vue项目基本脚手架，包含，vue-router路由，axios请求代理，全局配置文件，路由守卫，http拦截器，vuex状态管理工具。拿来即用的项目基本配置
每次创建项目都要进行一大堆的各种配置。
终于抽空把一些基本的配置进行了打包，下载克隆就可以直接开发了。
1，vue-router
vue-router是路由组件，脚手架中配置的是history模式，如果需要hash模式请自行切换
mode: 'history',
替换为
mode: 'hash',
AI 代码解读
路由守卫的实例
先导入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}
AI 代码解读
// cookie操作文件
import{getCookie} from "./utils/utils.js";
AI 代码解读
实例应用
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
// 路由守卫实例
beforeEnter: (to, from, next) => {
if (!getCookie("cookies")) {
next({ path: '/login' })
} else {
next()
}
}
},
AI 代码解读
在路由跳转前，先判断是否登录，登录正常跳转，若未登录，则跳转到登录界面
默认的404页面实例
{
// 404页面
path: '*',
name: 'error',
component: () => import(/* 你的错误页面*/ './views/error.vue')
}
AI 代码解读
在路由配置文件的结尾使用通配符，没有找到的路由规则都会匹配 “ ”规则
2，全局配置文件的实例
在utils中创建global.js
配置参数并导出
// 这里是全局配置文件
let param = {
baseURL: '/api',//开发
// baseURL:'',//生产
}
export {
param,
}
AI 代码解读
在main.js中为其添加到vue原型中，在使用的时间就可以通过“this.$ ”调用
// 导入配置文件，并添加在vue原型
import { param } from "./utils/global.js";
Vue.prototype.$param = param;
AI 代码解读
调用实例
js文件中this.$param.baseURL
//'/api'
html中$param.baseURL
//'/api'
AI 代码解读
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”登录页面
AI 代码解读
4，为所有的请求携带参数
在main.js中为所有的请求携带参数，比如cookie和语言标识符
if (getCookie("cookies")) {
Vue.prototype.axios.defaults.headers.common['Authorization'] = getCookie("cookies")
}
AI 代码解读
5,全局配置的过滤函数
在utils中创建filter.js文件，添加过滤函数并导出
let moneyFormat = (value) => {
if (value*1<=0) {
return 0
} else {
return value
}
}
export {moneyFormat}
AI 代码解读
在main.js中挂载在vue上
// 全局过滤器加载
import * as filters from './utils/filter.js';
Object.keys(filters).forEach(key => { //过滤器挂载在Vue上
Vue.filter(key, filters[key])
})
AI 代码解读
打包的脚手架有两份
my-vue.rar文件是基本的配置文件，携带了模块，但是没有进行配置。
链接：https://pan.baidu.com/s/1NUgk3Pry49fErBlNTbfHmQ
提取码：k60w
my-vue.zip文件是携带了配置，并添加了注释说明。
链接：https://pan.baidu.com/s/1xXTAEIO8pykLAz2Waqfzhg
提取码：ifsi
