分享一篇vue项目规范
最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以我今天写了一篇规范,也顺便拿出来分享一下
一:关于 axios
1.axios 默认参数添加:
main.js:
axios.defaults.timeout = 5000; axios.defaults.baseURL = '/api';//默认全局前缀,build 后可以直接改动这里 //拦截 axios.interceptors.response.use( response => { //一个例子 start 需要使用返回值为500的时候 要进行特殊设置 if(response.config.url === "/api/isRegisted"){ return response; } // end if(response.data.code === 500){ //消息提示 //返回为未登录时可直接跳转到登录页 } return new Promise(()=>{});//then和 catch 都无法捕获 if(response.data.code === 0){ return response; //正确返回 response } }, error => { //消息提示:连接失败 return Promise.reject(error.response.data) });
2.axios 挂载:
main.js:
Vue.prototype.axios = axios;
3.axios 封装:
main.js:
Vue.get = (url,params)=>{ return new Promise((resolve, reject) => { axios.get(url, {params:params}) .then(function (response) { resolve(response.data); }).catch(err=>{}) }) } Vue.post = (url,params)=>{ return new Promise((resolve, reject) => { axios.post(url, params) .then(function (response) { resolve(response.data) }).catch(err=>{}) }) }
在 .vue 页面可以直接使用 this.get(url,params).then() 和 this.post(url,params).then()
不需要再加 catch
如果需要特殊参数的请求 可以直接调用 this.axios.post();
二. vuex
1.ajax 判断
首先 ajax 请求可以写在 actions也可以直接写在 .vue 页面里;
我们判断的依据是 回调是否需要调用页面结构来区分,
比如在 .vue 页面中 发送完请求后需要调用 this.$refs.element等,或者需要利用组件的独立性的效果时 的那就写在.vue页面,否则就写在 actions 里
3.ajax 调用
在页面中调用
import v from ‘Vue’;
然后和其他页面一样使用v.get(url,params).then() 和 v.post(url,params).then();
不能使用 this.axios
3.模块
按类型分类,将响应模块的state,mutations,actions等分别写在对应文件中,登录,注册,修改密码等写在index 中
三.路由
1.路由需登录
在创建路由时,添加的一个例子:
{
path: ‘bar’,
component: Bar,
meta: { requireLogin: true }
}
在需要登录的页面添加 meta:{ requireLogin: true } 这个元素
作用是在含有这个元素的页面是需要登陆后才能使用的;
起作用需要在 main.js 里设置
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireLogin)) { if ([判断登录信息]) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() } })
2.路由name;
路由都添加 name 字段,格式是路由格式的简化,采用驼峰命名,比如
{
path: ‘/foo/bar’,
name:’fooBar’,
component: Bar
}
四: api管理
1.新建src/api/index.js;
放置 api路径 要注意 axios已经有了前缀,所以这里的 api 值需要些前缀之后的路径
当路径较多时可以再多建几个文件,分类放置
2.挂载
这个有2种方案,
一是 在 main.js 里先 import api from ‘./api/index’
使用 Vue.prototype.$api = api 挂载到原型链上,
不过在 Vuex 的请求就有了新的问题,这个也有2个方案可以解决
{
1.不挂载在原型链上而是const v = new Vue({…}) ,在 v 上面挂载
在 Vuex 里 import v from ‘vue’,我比较推荐这个,因为要使用 axios ,肯定也是
要引入 Vue 的
2.在 Vuex 里直接 import api from ‘../api/index’
}
另外一种方案就是 在 main.js 里 将 api 挂载到 window 上: window.api = api;不过我没试过,可能会方便一点,但是速度可能会慢一点
完;