Vue.js 是一種基於 MVVM 模式的前端框架，透過資料綁定和元件化的方式將資料和 UI 頁面進行了解耦，使 Web 開發更加高效和簡單。知乎日報是一種新聞用戶端，有著美觀的 UI 設計，強大的互動性以及內容多樣性。在本篇文章中，我們將透過 Vue 技術實現一個仿知乎日報的頁面設計。
在開始之前，我們需要先安裝 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 的資料夾作為項目根目錄。
在仿知日報中，主要分為首頁、文章列表頁和文章詳情頁三個頁面，在這裡我們以首頁為例。在 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 用於顯示文章清單。
為了方便多用和維護，我們使用 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。
仿知乎日報的輪播圖是該頁面的重要組成部分。在 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 元件中。
在仿知日報中，首頁需要展示文章清單和輪播圖。我們使用 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 語法，我們可以非同步地取得所需的數據，使頁面效率更高。
在這篇文章中，我們用Vue 技術實作了一個仿知乎日報的頁面設計，涉及了元件、輪播圖、資料獲取等知識點。組件化開發讓開發者可以更好地維護和擴展程式碼，使用第三方程式庫（如 Swiper、axios）可以快速地實現功能，使得開發效率更高。
不斷拓展自己的知識庫，開拓視野，不斷探索，才能在 Web 開發的道路上走得更遠。
以上是如何使用 Vue 實現仿知日報的頁面設計？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
