Wie kann man mit Vue ein Seitendesign ähnlich wie Zhihu Daily implementieren?

Vue.js ist ein Front-End-Framework, das auf dem MVVM-Muster basiert. Es entkoppelt Daten und UI-Seiten durch Datenbindung und Komponentisierung und macht die Webentwicklung effizienter und einfacher. Zhihu Daily ist ein Nachrichten-Client mit schönem UI-Design, leistungsstarker Interaktivität und Inhaltsvielfalt. In diesem Artikel werden wir die Vue-Technologie verwenden, um ein Seitendesign zu implementieren, das Zhihu Daily nachahmt.

1. Erstellen Sie die Umgebung

Bevor wir beginnen, müssen wir Node.js und Vue-cli installieren. Führen Sie nach der Installation von Node.js mit dem Befehlszeilentool den folgenden Befehl im Terminal aus, um Vue-cli zu installieren:

$ npm install -g vue-cli

Nach Abschluss der Installation verwenden Sie Vue-cli, um ein Projekt basierend auf der Webpack-Vorlage zu erstellen:

$ vue init webpack vue-zhihudaily

An diesem Punkt können wir sehen, dass nach dem Erstellen eines neuen Projekts mehrere Fragen gestellt werden (Projektname, Beschreibung, Autor, ob Eslint-Code-Spezifikationen erforderlich sind usw.), ein Ordner mit dem Namen vue-zhihudaily im aktuellen Verzeichnis erstellt wird das Stammverzeichnis des Projekts.

2. Seitenlayout

In Zhihu Daily ist es hauptsächlich in drei Seiten unterteilt: Homepage, Artikellistenseite und Artikeldetailseite. Hier nehmen wir die Homepage als Beispiel. Erstellen Sie im Ordner „src“ einen Ordner „views“, um die Schnittstellendateien zu speichern. Erstellen Sie die Home.vue-Datei mit dem folgenden Code:

<template>
  <div class="home">
    <div class="banner"></div>
    <div class="daily-list"></div>
  </div>
</template>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.daily-list {
  width: 100%;
  height: 100%;
}
</style>

Hier verwenden wir das Flex-Layout, um die Seite vertikal zu zentrieren. Unter diesen wird Banner zum Anzeigen von Karussellbildern und Tagesliste zum Anzeigen von Artikellisten verwendet.

3. Verwendung von Komponenten

Um die Wiederverwendung und Wartung zu erleichtern, verwenden wir die Vue-Komponentenisierung zum Aufbau der Schnittstelle. Erstellen Sie im src-Ordner einen Komponentenordner zum Speichern von Komponentendateien. Erstellen Sie darin eine Datei mit dem Namen DailyItem.vue:

<template>
  <div class="daily-item">
    <div class="thumbnail">
      <img :src="item.images[0]" alt="">
    </div>
    <div class="info">
      <div class="title">{{item.title}}</div>
      <div class="date">{{item.date}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style scoped>
.daily-item {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #ffffff;
}
.daily-item:hover {
  cursor: pointer;
}
.thumbnail {
  width: 80px;
  height: 60px;
  margin-right: 10px;
  overflow: hidden;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  font-size: 16px;
  color: #444444;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date {
  font-size: 12px;
  color: #999999;
}
</style>

DailyItem.vue wird verwendet, um Informationen aus der Artikelliste anzuzeigen, einschließlich Artikel-Miniaturansichten, Titel und Daten. Hier verwenden wir das Props-Attribut, um die Artikelinformationen an die Komponente zu übergeben. Verwenden Sie die DailyItem.vue-Komponente in Home.vue und ersetzen Sie daily-list durch:

<div class="daily-list">
  <daily-item v-for="(item, index) in dailyList" :key="index" :item="item"></daily-item>
</div>

Wenn mehrere Tagesberichte vorhanden sind, rendert diese Komponente automatisch ein DailyItem.vue für jeden Tagesbericht. Übergeben Sie in der Startseite der übergeordneten Komponente dailyList über Requisiten an die untergeordnete Komponente DailyItem.vue.

4. Karusselldiagramm-Implementierung

Das Karusselldiagramm, das Zhihu Daily imitiert, ist ein wichtiger Teil dieser Seite. Erstellen Sie im src-Ordner eine Komponente mit dem Namen Banner.vue:

<template>
  <div class="banner">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in bannerList" :key="index">
        <img :src="item.image" alt="">
        <div class="text">{{item.title}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, Pagination } from 'swiper/dist/js/swiper.esm.js'
import 'swiper/dist/css/swiper.css'

export default {
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      }
    }
  },
  props: ['bannerList'],
  mounted () {
    Swiper.use([Pagination])
    this.$refs.mySwiper.swiper.slideTo(0)
  },
  components: {
    Swiper,
    SwiperSlide,
    Pagination
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

In Banner.vue verwenden wir die Swiper-Drittanbieterbibliothek, um das Karusselldiagramm zu erstellen. Rufen Sie swiper.slideTo(0) in der gemounteten Hook-Funktion auf, um zu erkennen, dass die Startseite das erste Karussellbild ist.

Verwenden Sie die Banner.vue-Komponente in Home.vue:

<div class="banner">
  <banner :bannerList="bannerList"></banner>
</div>

Verwenden Sie hier Requisiten, um die BannerList an die Banner.vue-Komponente zu übergeben.

5. Datenerfassung

In Zhihu Daily muss die Homepage die Artikelliste und das Karussellbild anzeigen. Wir verwenden die Axios-Bibliothek, um eine GET-Anfrage an die Zhihu Daily API zu initiieren, um die Daten des Karusselldiagramms und der Artikelliste abzurufen. Erstellen Sie unter dem Ordner src einen Ordner mit dem Namen api und erstellen Sie darin eine Datei zhihudaily.js:

import axios from 'axios'

// 轮播图 API
const bannerApi = 'https://news-at.zhihu.com/api/4/news/latest'

// 文章列表 API
const articleListApi = 'https://news-at.zhihu.com/api/4/news/before/'

export default {
  // 获取轮播图
  async getBanner () {
    const { data } = await axios.get(bannerApi)
    return data.top_stories
  },

  // 获取文章列表
  async getArticleList (date) {
    const { data } = await axios.get(articleListApi + date)
    return data.stories
  }
}

Rufen Sie die Methode in der API in Home.vue auf und übergeben Sie die erhaltenen Daten an die entsprechenden Requisiten:

<script>
import api from '../api/zhihudaily'
import DailyItem from '../components/DailyItem.vue'
import Banner from '../components/Banner.vue'

export default {
  data () {
    return {
      bannerList: [],
      dailyList: []
    }
  },
  components: {
    DailyItem,
    Banner
  },
  async mounted () {
    this.bannerList = await api.getBanner()
    this.dailyList = await api.getArticleList('')
  }
}
</script>

Durch Asynchronität Mit der /await-Syntax können wir die erforderlichen Daten asynchron abrufen und so die Seite effizienter gestalten.

6. Fazit

In diesem Artikel haben wir die Vue-Technologie verwendet, um ein Seitendesign ähnlich wie Zhihu Daily zu implementieren, das Komponenten, Karussellbilder, Datenerfassung und andere Wissenspunkte umfasst. Die komponentenbasierte Entwicklung ermöglicht Entwicklern eine bessere Wartung und Erweiterung des Codes und nutzt Bibliotheken von Drittanbietern (wie Swiper, Axios), um Funktionen schnell zu implementieren und so die Entwicklung effizienter zu gestalten.

Erweitern Sie kontinuierlich Ihre Wissensbasis, erweitern Sie Ihren Horizont und forschen Sie weiter, damit Sie auf dem Weg zur Webentwicklung weiter vorankommen können.

Das obige ist der detaillierte Inhalt vonWie kann man mit Vue ein Seitendesign ähnlich wie Zhihu Daily implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!