案例效果

1. 點(diǎn)擊“首頁”和“我的”可以切換頁面
2. 首頁可以下拉刷新，請求更多數(shù)據(jù)
3. 首頁下滑可以加載更多

1.創(chuàng)建并梳理項(xiàng)目結(jié)構(gòu)

1. 創(chuàng)建項(xiàng)目，記得要安裝路由 和 eslint
   
2. 梳理結(jié)構(gòu)，清空 views和components文件夾

2. 安裝和配置Vant組件庫

Vant：輕量、可靠的移動端組件庫

Vant官網(wǎng)

1. 安裝

# Vue2 項(xiàng)目，安裝 Vant 2：
npm i vant -S

2. 導(dǎo)入組件

Vant 支持一次性導(dǎo)入所有組件，引入所有組件會增加代碼包體積，因此不推薦這種做法。

但是在開發(fā)階段，我們不用考慮體積的問題，怎么快怎么來。在發(fā)布的時候，可以對項(xiàng)目體積進(jìn)行優(yōu)化，可以直接把vant從項(xiàng)目中抽出去。

舉例如下：

輸入網(wǎng)址：http://toutiao.liulongbin.top/report.html 可以看到黑馬頭條項(xiàng)目（該項(xiàng)目已經(jīng)發(fā)布）打包之后生成的結(jié)果，如下：

由上圖可以看到沒有把vant打包進(jìn)來

在main.js中配置vant組件庫

import Vue from 'vue'; 
import Vant from 'vant'; 
import 'vant/lib/index.css'; Vue.use(Vant); // use函數(shù)是來安裝插件的

之后參考官方文檔，根據(jù)需求進(jìn)行使用，看到頁面效果出現(xiàn)就成功了。

3. 使用 Tabbar 組件并開啟路由模式

<template><div><!-- 路由占位符 --><router-view></router-view><!-- Tabbar 區(qū)域 --><van-tabbar route><van-tabbar-item  icon="home-o" to="/home">首頁</van-tabbar-item><van-tabbar-item  icon="user-o" to="/user">我的</van-tabbar-item></van-tabbar></div>
</template>

4. 通過路由展示對應(yīng)的 Tabbar 頁面

在router/index.js 中配置路由規(guī)則：

5. 初始化 - 使用Navbar組件以及覆蓋默認(rèn)樣式

<template><div class="home-container"><!-- 頭部區(qū)域 --><van-nav-bar title="黑馬頭條" fixed /></div>
</template>
<script>
export default {name: 'Home'
}
</script>
<style lang="less" scoped>.home-container {padding-top:46px;padding-bottom: 50px;.van-nav-bar {background-color: #007bff;}/deep/.van-nav-bar__title {color:#fff;}}
</style>

至此，接下來就是完善主頁的文章列表

6. 了解獲取列表數(shù)據(jù)的API接口

請求方式

• GET

請求根路徑

• https://www.escook.cn

請求URL 地址

• /articles

查詢參數(shù)–通過&進(jìn)行拼接

參數(shù)名	數(shù)據(jù)類型	說明
_page	Number	頁碼值。從 1 開始
_limit	Number	每頁展示的數(shù)據(jù)條數(shù)。

響應(yīng)的數(shù)據(jù)結(jié)構(gòu)

[{"art_id": "8163","title": "iOS原生混合RN開發(fā)最佳實(shí)踐","aut_id": "1111","comm_count": "254","pubdate": "2019-03-11 09:00:00","aut_name": "黑馬先鋒","is_top": 0,"cover": {"type": 3,"images": ["http://www.liulongbin.top:8000/resources/images/32.jpg","http://www.liulongbin.top:8000/resources/images/80.jpg","http://www.liulongbin.top:8000/resources/images/32.jpg"]}},{"art_id": "8089","title": "Typescript玩轉(zhuǎn)設(shè)計模式 之 創(chuàng)建型模式","aut_id": "1111","comm_count": "24","pubdate": "2019-03-11 09:00:00","aut_name": "黑馬先鋒","is_top": 0,"cover": {"type": 1,"images": ["http://www.liulongbin.top:8000/resources/images/11.jpg"]}},{"art_id": "8145","title": "JAVA消息確認(rèn)機(jī)制之ACK模式","aut_id": "1111","comm_count": "99","pubdate": "2019-03-11 09:00:00","aut_name": "黑馬先鋒","is_top": 0,"cover": {"type": 0}}
]

返回參數(shù)說明

參數(shù)名	類型	說明
art_id	string	文章 id
title	string	文章標(biāo)題
aut_id	string	作者的 id
comm_count	string	評論數(shù)
pubdate	string	發(fā)布日期
aut_name	string	作者名字
|- cover	object	文章封面
|---- type	number	封面的數(shù)量，可選值：0、1、3
|---- images	array	文章封面圖片的 URL 數(shù)組

7. 封裝utils目錄下的request模塊

安裝axios

npm i axios -S

封裝axios的原理

創(chuàng)建src/utils/request.js

import axios from 'axios'const request = axios.create({// 指定請求的根路徑baseURL: 'https://www.escook.cn'
})export default request

8.在Home組件中封裝initArticleList方法

一進(jìn)入Home組件就要發(fā)請求，來拿第一頁數(shù)據(jù)，一般來說是在created里面來調(diào)函數(shù)，發(fā)起請求。

但是，我們先不要寫created，先封裝一個methods來調(diào)接口拿數(shù)據(jù)：

// 導(dǎo)入 request.js
import request from '@/utils/request.js'
export default {name: 'Home',data () {return {// 頁碼值page: 1,// 每頁顯示多少條數(shù)據(jù)limit: 10}},methods: {// 封裝獲取文章列表數(shù)據(jù)的方法async initArticleList () {// 發(fā)起 GET請求，獲取文章的列表數(shù)據(jù)const { data: res } = await request.get('/articles', {// 請求參數(shù)params: {_page: this.page,_limit: this.limit}})console.log(res)}},created () {this.initArticleList()}
}

獲取到了數(shù)據(jù)：

9. 封裝 articleAPI 模塊

現(xiàn)有這樣一個需求：我希望一進(jìn)入User組件時，也會發(fā)起axios請求來獲取圖書列表，但我希望一次只請求5條數(shù)據(jù)，即把limit改成5即可

• 一般方法的話，就是在User.vue中寫和之前Home.vue大體一樣的代碼。
• 那如果還有一個頁面也要調(diào)這個接口呢？
• 可以會發(fā)現(xiàn)代碼冗余，因此要把代碼復(fù)用起來

思路

開始封裝

1. 創(chuàng)建src/api 文件夾，里面存著所有的api接口，有一個文件是articleAPI.js，文章相關(guān)的API都封裝到這個模塊中：

// 文章相關(guān)的 API 接口，都封裝到這個模塊中
import request from '@/utils/request.js'
// 向外按需導(dǎo)出一個 API 函數(shù)
export const getArticleListAPI = function (_page, _limit) {return request.get('/articles', {// 請求參數(shù)params: {_page,_limit}})
}

2. 在Home組件中調(diào)用這個api接口，User組件同理

// 按需導(dǎo)入 API 接口
import { getArticleListAPI } from '@/api/articleAPI.js'export default {name: 'Home',data () {return {// 頁碼值page: 1,// 每頁顯示多少條數(shù)據(jù)limit: 10}},methods: {async initArticleList () {const { data: res } = await getArticleListAPI(this.page, this.limit)console.log(res)}},created () {this.initArticleList()}
}

總結(jié)：

今后，如果需要調(diào)接口來獲取用戶相關(guān)的信息，則在src/api文件夾下新建一個模塊專門來定義用戶的api如userAPI.js

10. 封裝 ArticleInfo 組件

ArticleInfo組件是可復(fù)用的組件，放在components文件夾中

把請求回來的數(shù)據(jù)轉(zhuǎn)存到了data（）里面，供我們渲染頁面時去使用

渲染頁面

<!-- 導(dǎo)入，注冊，并使用 ArticleInfo 組件 --><ArticleInfo v-for="item in artlist" :key="item.id"></ArticleInfo>

為ArticleInfo 組件封裝 props 屬性

1. 使用 ArticleInfo 組件

<!-- 導(dǎo)入，注冊，并使用 ArticleInfo 組件 --><!-- 在使用自組件的時候，如果某個屬性名是“小駝峰”形式，則綁定屬性的時候建議改寫成"連字符"格式 --><!-- 如 cmtCount 建議寫成 cmt-count --><ArticleInfo v-for="item in artlist" :key="item.id" :title="item.title" :author="item.aut_name":cmt-count="item.comm_count" :time="item.pubdate"></ArticleInfo>

2. ArticleInfo.vue 中：

export default {name: 'ArticleInfo',// 自定義屬性props: {// 標(biāo)題title: {type: String,default: null},// 作者名字author: {type: String,default: null},// 評論數(shù)cmtCount: {// 通過數(shù)組形式， 為當(dāng)前屬性定義多個可能的類型type: [Number, String],default: 0},time: {type: String,default: null}}
}

為ArticleInfo 組件封裝 cover 屬性

        <!-- 單張圖片 --><img :src="cover.images[0]" alt="" class="thumb" v-if="cover.type === 1"></div><!-- 三張圖片 --><div class="thumb-box" v-if="cover.type === 3" ><img :src="item" alt="" class="thumb"v-for="(item,i) in cover.images" :key="i"></div>

 // 封面的信息對象cover: {type: Object,// 通過default函數(shù)返回cover屬性的默認(rèn)值default: function () {return { type: 0 }}}

11. 實(shí)現(xiàn)上拉加載更多

需要用到 Vant 提供的組件 — List

List 組件通過 loading 和 finished 兩個變量控制加載狀態(tài)，當(dāng)組件滾動到底部時，會觸發(fā) load 事件并將 loading 設(shè)置成 true。此時可以發(fā)起異步操作并更新數(shù)據(jù)，數(shù)據(jù)更新完畢后，將 loading 設(shè)置成 false 即可。若數(shù)據(jù)已全部加載完畢，則直接將 finished 設(shè)置成 true 即可。

export default {name: 'Home',components: {ArticleInfo},data () {return {// 頁碼值page: 1,// 每頁顯示多少條數(shù)據(jù)limit: 10,// 文章列表數(shù)組artlist: [],// 是否正在下一頁數(shù)據(jù),如果loading為true，則不會反復(fù)觸發(fā)onload事件// 每當(dāng)下一頁數(shù)據(jù)請求回來之后，千萬要記得 ，把loading 從 true 改為 falseloading: true,// 所有數(shù)據(jù)是否加載完畢,如果沒有更多數(shù)據(jù)了，要把finished改成truefinished: false}},methods: {async initArticleList () {// 返回值 res 就是一個數(shù)組const { data: res } = await getArticleListAPI(this.page, this.limit)// 如果是上拉加載更多，那么應(yīng)該是：// this.artlist=[舊數(shù)據(jù)在前，新數(shù)據(jù)在后]this.artlist = [...this.artlist, ...res]// 當(dāng)?shù)谝豁摂?shù)據(jù)請求回來之后把 loading 改為 falsethis.loading = falseif (res.length === 0) {// 證明沒有下一頁數(shù)據(jù)了，直接把 finished 改為true，表示數(shù)據(jù)加載完了！this.finished = true}},// 只要onload 被調(diào)用，就應(yīng)該請求下一頁數(shù)據(jù)onLoad () {// 1.讓頁碼值 +1this.page++// 2. 重新請求接口獲取數(shù)據(jù)this.initArticleList()}},created () {this.initArticleList()}
}

12. 實(shí)現(xiàn)下拉刷新功能

下拉刷新時會觸發(fā) refresh 事件，在事件的回調(diào)函數(shù)中可以進(jìn)行同步或異步操作，操作完成后將 v-model 設(shè)置為 false，表示加載完成。

export default {name: 'Home',components: {ArticleInfo},data () {return {// 頁碼值page: 1,// 每頁顯示多少條數(shù)據(jù)limit: 10,// 文章列表數(shù)組artlist: [],// 是否正在下一頁數(shù)據(jù),如果loading為true，則不會反復(fù)觸發(fā)load事件// 每當(dāng)下一頁數(shù)據(jù)請求回來之后，千萬要記得 ，把loading 從 true 改為 falseloading: true,// 所有數(shù)據(jù)是否加載完畢,如果沒有更多數(shù)據(jù)了，要把finished改成truefinished: false,// 是否正在下拉刷新isLoading: false}},created () {this.initArticleList()},methods: {async initArticleList (isRefresh) {// 返回值 res 就是一個數(shù)組const { data: res } = await getArticleListAPI(this.page, this.limit)if (isRefresh) {// 下拉刷新: 新數(shù)據(jù)在前，新數(shù)據(jù)在后this.artlist = [...res, ...this.artlist]this.isLoading = false// 當(dāng)} else {// 上拉加載更多：舊數(shù)據(jù)在前，新數(shù)據(jù)在后this.artlist = [...this.artlist, ...res]// 當(dāng)?shù)谝豁摂?shù)據(jù)請求回來之后把 loading 改為 falsethis.loading = false}if (res.length === 0) {// 證明沒有下一頁數(shù)據(jù)了，直接把 finished 改為true，表示數(shù)據(jù)加載完了！this.finished = true}},// 只要onload 被調(diào)用，就應(yīng)該請求下一頁數(shù)據(jù)onLoad () {// 1.讓頁碼值 +1this.page++// 2. 重新請求接口獲取數(shù)據(jù)this.initArticleList()},// 下拉刷新的處理函數(shù)onRefresh () {// 1. 要頁碼值 +1this.page++// 2. 重新請求接口，獲取數(shù)據(jù)this.initArticleList(true)}}
}

13. 定制主題

Vant定制主題的核心原理

該項(xiàng)目的標(biāo)題“黑馬頭條" 默認(rèn)是白色背景，我們是通過 /deep/ 深度選擇器再結(jié)合審查元素找到了類名進(jìn)行覆蓋

這個方法有一個缺點(diǎn)：如果另一個頁面，如用戶頁面，也有這個標(biāo)題，那么需要重復(fù)這種方法，不然樣式仍然是默認(rèn)的。

因此我們使用 定制主題 這個方法

1. 引入樣式源文件，在main.js 中進(jìn)行如下修改：

2. 如果 vue-cli 搭建的項(xiàng)目，可以在 vue.config.js 中進(jìn)行配置:

// 這個文件是 vue-cli 創(chuàng)建出來的 項(xiàng)目的 配置文件
// 在 vue.config.js 這個配置文件中，可以對整個項(xiàng)目的打包、構(gòu)建進(jìn)行全局性的配置
// webpack 在進(jìn)行打包的時候，底層用到的是 node.js
// 因此，在 vue.config.js 配置文件中，可以導(dǎo)入并使用 node.js 中的核心模塊
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
module.exports = {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0，請移除 lessOptions 這一級，直接配置選項(xiàng)。modifyVars: {// 可以通過 less 文件覆蓋（文件路徑為絕對路徑）// 從 盤符 開始的路徑叫做絕對路徑hack: `true; @import "${themePath}";`}}}}
}

4.上面的配置文件中的less變量在Vant 官網(wǎng)看：

14. 打包

下面介紹打包完成后能雙擊 dist/index.html 來打開項(xiàng)目，需要配置 vue.config.js：

然后在終端運(yùn)行：

npm run build