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