vue項目基本腳手架

vue項目基本腳手架，包含，vue-router路由，axios請求代理，全局配置檔案，路由守衛，http攔截器，vuex狀态管理工具。拿來即用的項目基本配置

每次建立項目都要進行一大堆的各種配置。

終于抽空把一些基本的配置進行了打包，下載下傳克隆就可以直接開發了。

1，vue-router

vue-router是路由元件，腳手架中配置的是history模式，如果需要hash模式請自行切換

mode: 'history',
 替換為
 mode: 'hash',
           

路由守衛的執行個體

先導入cookie的處理函數

// cookie 浏覽器關閉自動失效版本
function setCookie(cname, cvalue) {
    document.cookie = cname + "=" + cvalue;
  };
  //擷取cookie
  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == " ") c = c.substring(1);
      if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
  };
  //清除cookie
  function clearCookie(cname) {
    setCookie(cname, "");
  }

  export {setCookie,getCookie,clearCookie}           

// cookie操作檔案
import{getCookie} from "./utils/utils.js";           

執行個體應用

{
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      // 路由守衛執行個體
      beforeEnter: (to, from, next) => {
        if (!getCookie("cookies")) {
          next({ path: '/login' })
        } else {
          next()
        }
      }
    },           

在路由跳轉前，先判斷是否登入，登入正常跳轉，若未登入，則跳轉到登入界面

預設的404頁面執行個體

{
      // 404頁面
      path: '*',
      name: 'error',
      component: () => import(/* 你的錯誤頁面*/ './views/error.vue')
    }           

在路由配置檔案的結尾使用通配符，沒有找到的路由規則都會比對 “ ”規則

2，全局配置檔案的執行個體

在utils中建立global.js

配置參數并導出

// 這裡是全局配置檔案
let param = {
    baseURL: '/api',//開發
    // baseURL:'',//生産
  

}
export {
param,
}           

在main.js中為其添加到vue原型中，在使用的時間就可以通過“this.$ ”調用

// 導入配置檔案，并添加在vue原型
import { param } from "./utils/global.js";
Vue.prototype.$param = param;           

調用執行個體

js檔案中this.$param.baseURL
//'/api'
html中$param.baseURL
//'/api'           

3,http響應攔截器

在main.js中設定http響應攔截器，對響應進行統一的攔截處理

// http響應攔截器
axios.interceptors.response.use(data => {
  if (data.data.Code == 201) {
    router.replace({
      path: '/login',
    })
  //  邏輯代碼，比如跳轉到登入頁面
  } else if (data.data.Code == 202) {
  //  邏輯代碼
  }
  return data
}, error => {
  return Promise.reject(error)
})

在這裡，我與後端進行了約定，接口傳回201代表使用者的登入資訊失效（異常登入，賬号在其他地方登入）
我對傳回的狀态碼進行判斷，如果是201則清空本地登入狀态并跳轉“login”登入頁面           

4，為所有的請求攜帶參數

在main.js中為所有的請求攜帶參數，比如cookie和語言辨別符

if (getCookie("cookies")) {
  Vue.prototype.axios.defaults.headers.common['Authorization'] = getCookie("cookies")
}            

5,全局配置的過濾函數

在utils中建立filter.js檔案，添加過濾函數并導出

let moneyFormat = (value) => {
    if (value*1<=0) {
        return 0
    } else {
        return value
    }

}
export {moneyFormat}           

在main.js中挂載在vue上

// 全局過濾器加載
import * as filters from './utils/filter.js';
Object.keys(filters).forEach(key => { //過濾器挂載在Vue上
  Vue.filter(key, filters[key])
})           

打包的腳手架有兩份

my-vue.rar檔案是基本的配置檔案，攜帶了子產品，但是沒有進行配置。

連結：

https://pan.baidu.com/s/1NUgk3Pry49fErBlNTbfHmQ

提取碼：k60w

my-vue.zip檔案是攜帶了配置，并添加了注釋說明。

https://pan.baidu.com/s/1xXTAEIO8pykLAz2Waqfzhg

提取碼：ifsi