目錄
- <<回到導覽
- 1.面經基礎版
- 1.1.VueCli建項目
- 1.1.1.VueCli 自定義項目
- 1.1.2.ESlint代碼規范
- 1.2.項目路由
- 1.2.1.一級路由配置
- 1.2.2.二級配置路由
- 1.2.3.設置高亮
- 1.2.4.發生請求、渲染
- 1.2.5.跳轉傳參、再發請求
- 1.2.6.體驗優化
- 1.2.7.keep-alive
<<回到導覽
1.面經基礎版
1.1.VueCli建項目
1.1.1.VueCli 自定義項目
-
安裝腳手架 (已安裝)
npm i @vue/cli -g -
創建項目
vue create 項目名 -
選擇創建自定義項目選項，回車
-
自定義項目（空格鍵為確認/取消），回車
-
選擇vue的版本
-
是否使用history模式
-
選擇css預處理
-
選擇eslint規范
-
選擇校驗的時機 （保存校驗）
-
選擇配置文件的生成方式（放在單獨的文件之中）
-
是否保存預設，為預設命名
當我們保存預設后，下次可以直接建立含有上面選項的項目
-
項目創建完畢
1.1.2.ESlint代碼規范
JavaScript Standard Style 規范說明：https://standardjs.com/rules-zhcn.html
-
通過eslint插件來實現自動修正
-
配置VSCode
添加配置代碼
// 當保存的時候，eslint自動幫我們修復錯誤 "editor.codeActionsOnSave": {"source.fixAll": true }, // 保存代碼，不自動格式化 "editor.formatOnSave": false
1.2.項目路由
1.2.1.一級路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
// 一級路由
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'Vue.use(VueRouter)
const router = new VueRouter({routes: [{path: '/',component: Layout},{path: '/detail',component: ArticleDetail}]
})
export default router
1.2.2.二級配置路由
通過children配置項，可以進行路由嵌套，配置二級路由
-
二級配置路由(view/index.js)
routes: [// 一級路由{path: '/',component: Layout,children: [// 二級路由{path: '/article',component: Article},{path: '/collect',component: Collect},{path: '/like',component: Like},{path: '/user',component: User}]},{path: '/detail',component: ArticleDetail}] -
配置二級路由出口（Layout.vue）
<div class="h5-wrapper"><div class="content"><!-- 二級路由出口 --><router-view></router-view></div><nav class="tabbar"><router-link to="/article">面經</router-link><router-link to="/collect">收藏</router-link><router-link to="/like">喜歡</router-link><router-link to="/user">我的</router-link></nav></div>一級路由的出口在App.vue中
<div class="wrapper"><router-view></router-view> </div>
很多同學心里的路由應該是這樣的
-
誠然，這樣的路由更符合我們操作邏輯；
-
但是在我們最開始的路由圖中，一級路由首頁和二級路由都有個特點，都有導航條
-
所以首頁和二級路由分為一類，沒有導航條的面經詳情分為一類
-
從路由出口的角度來看，一級路由出口在App.vue，二級路由出口在首頁（Layout.vue），而導航條在一級路由頁Layout.vue中，二級路由出口外
-
所以，首頁和二級路由都有都有導航條，而面經詳情頁沒有
-
說得有點繞，畫個圖方便理解一些（一級路由出口就是包裹、定位一級路由頁的容器，二級亦然）
1.2.3.設置高亮
-
將a標簽替換為
<router-link to="/xxx">XXX</router-link> -
設置高亮樣式（也可以先自定義匹配類名）
.router-link-active{font-weight: 700;color: orange; }
1.2.4.發生請求、渲染
安裝axios:yarn add axios
接口文檔：
請求地址: https://mock.boxuegu.com/mock/3083/articles
請求方式: get
接下來的操作無非是請求數據（created），循環渲染，這里我就省略了
1.2.5.跳轉傳參、再發請求
-
為盒子設置點擊傳參
// 傳參方式多樣，可以自己選擇 @click="router.push(`/detail?id=${item.id}`)" -
獲取傳遞參數，將參數傳給服務器，再將結果渲染即可
1.2.6.體驗優化
-
為首頁重定向列表頁
加配置項
redirect: '/article' -
為面經詳情頁添加返回上一頁按鈕
@click="router.back()"
1.2.7.keep-alive
- 當路由被跳轉后，原來所看到的組件就被銷毀了，重新返回后組件又被重新創建了。
- 所以當點擊返回上一頁按鈕，因為主頁組件已被銷毀，所以并不能回到進入面經詳情頁時，首頁的位置
- 我們可以利用keep-alive組件，來緩存主頁組件，來完成這個功能
keep-alive 是 Vue 的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
keep-alive 是一個抽象組件：它自身不會渲染成一個 DOM 元素，也不會出現在父組件中
-
App.vue
<template><div class="h5-wrapper"><keep-alive><!-- 一級路由出口 --><router-view></router-view></keep-alive></div> </template>以上代碼，keep-alive包裹了一級路由出口，那么一級路由頁都會被緩存；但是同為一級路由頁的面經詳情頁，我們并不想其緩存（因為面經詳情頁太多了，瀏覽量多的畫會影響性能），我們可以利用keep-alive的三個屬性
屬性 效果 include 組件名數組，只有匹配的組件會被緩存 exclude 組件名數組，任何匹配的組件都不會被緩存 max 最多可以緩存多少組件實例 -
上面代碼可以改為(只顯示了修改的部分)
<!-- LayoutPage為組件名，沒有組件名才會匹配組件名 --> <keep-alive :include="['LayoutPage']"><router-view></router-view> </keep-alive>緩存組件后，再返回首頁，created，mounted等生命鉤子并不會觸發（因為組件沒有被重新創建），如果我們要返回首頁立即觸發某些事件，我們可以利用keep-alive 的額外的兩個生命周期鉤子。
生命周期鉤子 觸發時機 activated 當組件被激活（使用）的時候觸發 deactivated 當組件不被使用的時候觸發
】Sliding Window Maximum)