如何使用 Vue 實現仿知日報的頁面設計？

Vue.js 是一種基於 MVVM 模式的前端框架，透過資料綁定和元件化的方式將資料和 UI 頁面進行了解耦，使 Web 開發更加高效和簡單。知乎日報是一種新聞用戶端，有著美觀的 UI 設計，強大的互動性以及內容多樣性。在本篇文章中，我們將透過 Vue 技術實現一個仿知乎日報的頁面設計。

1. 建置環境

在開始之前，我們需要先安裝 Node.js 和 Vue-cli。安裝Node.js 後，使用命令列工具在終端機執行以下指令安裝Vue-cli:

$ npm install -g vue-cli

在安裝完成後，使用Vue-cli 建立一個基於webpack 範本的專案：

$ vue init webpack vue-zhihudaily

此時，我們可以看到create a new project 問你若干問題（項目名稱、描述、作者、是否需要eslint 程式碼規格等）之後，會在目前目錄下建立一個名為vue-zhihudaily 的資料夾作為項目根目錄。

2. 頁面佈局

在仿知日報中，主要分為首頁、文章列表頁和文章詳情頁三個頁面，在這裡我們以首頁為例。在 src 資料夾中，建立一個 views 資料夾存放介面檔案。建立 Home.vue 文件，程式碼如下：

<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>

在這裡，我們使用 flex 佈局將頁面垂直居中。其中，banner 用來展示輪播圖，daily-list 用於顯示文章清單。

3. 使用元件

為了方便多用和維護，我們使用 Vue 元件化來建立介面。在 src 資料夾中，建立一個 components 資料夾存放組件檔案。在其中，建立一個名為 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 用於顯示文章清單中的信息，其中包括文章縮圖、標題和日期。在這裡，我們使用 props 屬性將文章資訊傳入元件。在 Home.vue 中使用 DailyItem.vue 元件，將 daily-list 替換成：

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

當有多篇日報時，該元件會自動地為每一篇日報渲染一個 DailyItem.vue。在父級元件 home 透過 props 將 dailyList 傳入子元件 DailyItem.vue。

4. 輪播圖實作

仿知乎日報的輪播圖是該頁面的重要組成部分。在 src 資料夾中，建立一個名為 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>

在 Banner.vue 中，我們使用了 Swiper 第三方函式庫來建立輪播圖。在 mounted 鉤子函數中呼叫 swiper.slideTo(0) 來實作初始頁面為第一張輪播圖。

在 Home.vue 中使用 Banner.vue 元件：

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

此處使用 props 將 bannerList 傳入 Banner.vue 元件中。

5. 資料取得

在仿知日報中，首頁需要展示文章清單和輪播圖。我們使用 axios 函式庫向知乎日報 API 發起 GET 請求，以取得輪播圖和文章清單的資料。在src 資料夾下，建立一個名為api 的資料夾，並在其中建立一個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
  }
}

在Home.vue 中呼叫api 中的方法，將獲取到的資料傳入對應的props 中：

<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>

透過async/await 語法，我們可以非同步地取得所需的數據，使頁面效率更高。

6. 結語

在這篇文章中，我們用Vue 技術實作了一個仿知乎日報的頁面設計，涉及了元件、輪播圖、資料獲取等知識點。組件化開發讓開發者可以更好地維護和擴展程式碼，使用第三方程式庫（如 Swiper、axios）可以快速地實現功能，使得開發效率更高。

不斷拓展自己的知識庫，開拓視野，不斷探索，才能在 Web 開發的道路上走得更遠。

以上是如何使用 Vue 實現仿知日報的頁面設計？的詳細內容。更多資訊請關注PHP中文網其他相關文章！