一.專案開啟時

1. 專案的創建

 1-1 全域創建腳手架 npm i @vue/cli -g  
 1-2 使用vue指令創建專案 vue create 專案名  
 1-3 選擇2.0的版本  
 1-4 創建成功后進行基礎配置  
 1-5 洗掉腳手架專案的歡迎界面等專案無關的檔案  
 1-6 創建vue.config.js檔案關閉eslint語法監測  
 1-7 下載相關依賴

2. 路由的配置

 2-1 下載路由 npm i router
 2-2 配置路由 創建src/router/index.js的檔案(方便后期的維護)
 配置如下
 2-3 在main.js中引入 并注入到new Vue實體中
 2-4 在app.vue配置掛載點
 2-5 可以在src/utils/request.js中配置基地址 便于后期維護

// 配置路由 
 import Vue from "vue"
 // 1、引入路由物件
 import VueRouter from "vue-router"
 // 2、使用Vue.use注冊相關組件等
 Vue.use(VueRouter)
 // 3、創建路由規則
 const routes = [
     {
         path: "/login",
         // @是src這個目錄的別名
         component: ()=>import("@/views/login.vue") // 按需引入
     }
 ]
 // 4、使用路由規則生成路由物件
 const router = new VueRouter({
     // routes: routes, 簡寫如下
     routes
 })
 // 5、匯出路由物件
 export default router
 import router from "./router"
 ?
 // 6、將路由物件注入到new vue實體中
 new Vue({
   router,
   render: h => h(App),
 }).$mount('#app')

<template>
   <div>
     <!-- 設定掛載點 -->
     <router-view></router-view>
   </div>
 </template>

//封裝基礎路徑 便于后期維護
 import axios from 'axios'
 import Vue from "vue";
 //封裝基地址
 axios.defaults.baseURL = 'http://127.0.0.1:3000'
 ?
 //最后匯出
 export default axios
 //在請求的介面函式中匯入

二.注冊登錄退出狀態時

1. 登錄時

 1-1 登陸跳轉之前 要將傳入的token存到本地存盤中 存盤一定要在跳轉組件之前(因為后面獲取資訊會驗證到這個token的資料)
 1-2 判斷的條件要寫清楚 message要跟介面回傳的message對應上
 1-3 token值就在請求回來的data中

2. 配置請求的攔截器

 2-1 在utils/request.js中配置

// 添加請求攔截器
 axios.interceptors.request.use(function (config) {
     // 在發送請求之前做些什么
     let token = localStorage.getItem('token-70')
     //判斷token是否存在 如果存在執行攔截
     if (token) {
     //這里配置過請求頭的驗證后 后面路由的配置就不用再配置
         config.headers.Authorization = token
     }
     return config;
   }, function (error) {
     // 對請求錯誤做些什么
     return Promise.reject(error);
   });

三. 專案開發時

1. 操作順序

 1-1 都是先創組件-配路由-搭布局-實作功能-優化

2. 導航守衛的配置

 2-1 導航守衛:即是在訪問需要登錄的頁面的時候 會跳轉到登錄頁面 如果有登錄則直接跳轉

 //白名單路徑
 let arr = ['/personal', 'edit_profile']
 router.beforeEach((to, from, next) => {
 //判斷是訪問陣列中的路徑且沒有token 直接跳轉到登錄頁
   if (arr.indexOf(to.path) != -1 && !localStorage.getItem('token-70')) {
     next('/login')
     Toast.fail('請先登錄');
   } else {
   //如果已經登錄 即直接訪問頁面
     next()
   }
 })

3. 當圖片路徑不完整時

 3-1 可以配置一個全域的過濾器拼接基礎的路徑
 3-2 在過濾器重判斷是否完整的路徑 是則不需要拼接 避免重復拼接路徑的結果

//過濾器,拼接基礎路徑
 Vue.filter('jionPath', function (val) {
   //判斷路徑是否已經是完整的路徑 是則不需要拼接
   if (val && val.indexOf('http') != -1) return val
   return axios.defaults.baseURL + val
 })

4. 解決跳轉重復路徑

 4-1 當跳轉到當前路由會報錯 規定不能跳轉到同一路由
 4-2 解決:代碼如下

在src/router/index.js中添加配置
 // 解決重復跳轉同一個路由報錯問題
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)
 }

5. 快取用戶訪問的欄目

 5-1 當跳轉到某一個欄目后 點擊進文章后回傳 會自動回到固定的位置
 5-2 解決:添加sessionStorage的快取資料 在點擊欄目的同時將下標存盤在本地存盤中 再將定義欄目下標的值換為sessionStorage的快取資料
 5-3 遇到的問題:當一開始進取沒有點擊欄目的時候,因為sessionStorage快取里面沒有資料 所以不會顯示資料 需要在點擊任意欄目后才會顯示資料
 5-4 解決方法:在定義的欄目下標中判斷 如果sessionStorage中沒有值的話 下標就為1(代碼如下)

//獲取用戶點擊欄目的下標
 this.curIndex = name;
       sessionStorage.setItem("ye", JSON.stringify(this.curIndex));
 //重新配置到定義的欄目下標中
 curIndex: JSON.parse(sessionStorage.getItem("ye")) || 1,
 //判定沒有點擊時為展示下標為1的資料

6. 遞回組件的應用

 6-1 遞回組件:就是利用組件名稱，呼叫自己，

7. 組件的復用

 7-1 當看到頁面與頁面有重復的部分 即想到可以在components中創建一個公共的組件 進行復用
 7-2 再將頁面不同的地方父傳子技術傳進去

8. 配置回應請求的攔截器

 8-1 對資料的回應做攔截 如果沒有登錄要訪問需要登錄的頁面時 會跳轉到登錄頁 登錄后才能訪問
 8-2 如果已經登錄了 則直接訪問

// 添加回應攔截器
 axios.interceptors.response.use(function (response) {
     // 對回應資料做點什么
     // 判斷用戶是否已登錄，如果未登錄跳轉到登錄頁面
     if (response.data.statusCode == 401) {
         Toast.fail("請求登錄！");
         let url = location.origin
         location.href = url + "/#/login";
     }
     return response;
 }, function (error) {
     // 對回應錯誤做點什么
     return Promise.reject(error);
 });

內容還未補全 第一次接觸vue專案的總結 有錯誤的地方希望能告知修正 謝謝