分享一篇vue项目规范
最近 Vue 用的比较多,而且因为公司里有实习生,当几个人写一个项目的时候,会出现很多问题,最麻烦的就是规范不统一,之前我有一篇文章是说, vue 是比较有规范的一种框架了,但是也会出现很多问题,所以我今天写了一篇规范,也顺便拿出来分享一下
先说下我所使用的技术站:
"dependencies": { "axios": "^0.17.1", "element-ui": "^2.0.5", "vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.0.1" }
一:关于 axios
1.axios 默认参数添加:
main.js:
axios.defaults.timeout = 5000; // axios.defaults.baseURL = '/api';//默认全局前缀,build 后可以直接改动这里 //或者 axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/api' : '' //拦截 axios.interceptors.response.use( response => { if(response.config.url === "/api/isRegisted"){ return response; } //若框架是springBoot if(response.data.code === 500) {
if (response.data.msg === '请先登录') { router.push({ path: '/login', query: {redirect: router.history.current.fullPath} }) } ElementUI.Message({ message: response.data.msg, center: true, type: 'warning' }) return Promise.reject(response.data) } // 若框架是springMVC if (res.data && !res.data.success) { if (res.data.code === '1004') { router.push({ path: '/login', query: {redirect: router.history.current.fullPath} }) } ElementUI.Message({ message: res.data.msg, center: true, type: 'warning' }) return Promise.reject(res.data.error.message) } if(response.data.code === 0){ return response; } }, error => { return Promise.reject(error.response.data) });
2.axios 挂载:
main.js:
Vue.prototype.axios = axios;
3.axios 封装:
main.js:
const get = (url,params)=>{ return new Promise((resolve, reject) => { axios.get(url, {params:params}) .then(function (response) { resolve(response.data); }).catch(err=>{
reject(err)
}) }) }; const post = (url,params)=>{ return new Promise((resolve, reject) => { axios.post(url, params) .then(function (response) { resolve(response.data) }).catch(err=>{
reject(err)
}) }) }; Vue.prototype.$api = api; Vue.prototype.$get = get; Vue.prototype.$post = post;
在 .vue 页面可以直接使用 this.$get(url,params).then(res=>{}) 和 this.$post(url,params).then(res=>{})
不需要再加 catch;
如果需要对于 loading 动画有需求可以这样使用:
this.loading = true this.$get(url,params).then(data=>{ this.list = data.page // 对于数据的操作 }).then(()=>{ this.loading = false }) // 第二个 then 是不论 ajax 的结果是正常还是异常,都会触发 // 如若对于 catch 有需求则再添加 catch
如果仍然有其他特殊参数的请求 可以直接调用 this.axios.get();
使用 this.axios 时必须加上 catch
二. vuex
1.ajax 判断
首先 ajax 请求可以写在 actions也可以直接写在 .vue 页面里;
我们判断的依据是 回调是否需要调用页面结构来区分,
比如在 .vue 页面中 发送完请求后需要调用 this.$refs.element等,或者需要利用组件的独立性的效果时 的那就写在.vue页面,否则就写在 actions 里
3.ajax 调用
因为异步的原因,不能将 get,post挂载到 vuex 上面, 所以新增 fetch.js 页面: import axios from 'axios' import api from './index.js'//api页面 const get = (url,params)=>{ return new Promise((resolve, reject) => { axios.get(url, {params:params}) .then(function (response) { resolve(response.data); }).catch(err=>{}) }) }; const post = (url,params)=>{ return new Promise((resolve, reject) => { axios.post(url, params) .then(function (response) { resolve(response.data) }).catch(err=>{}) }) }; export {api,get,post}; 在 vuex 页面中引入:import {api,get} from '@/api/fetch.js' 即可发起请求: getUser({commit}){ get(api.info).then(data=>{ commit('changeUser',data) }) } 如有特殊需要可以新引入 axios 或者在 fetch 上在进行特殊的添加
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() } })
关于详细的登录检验我都放置在了我的另一个博客中:http://www.cnblogs.com/Grewer/p/8440726.html
2.路由name;
路由都添加 name 字段,格式是路由格式的简化,采用驼峰命名,比如
{
path: '/foo/bar',
name:'fooBar',
component: Bar
}
四: api管理
1.新建src/api/index.js;
放置 api路径 要注意 axios已经有了前缀,所以这里的 api 值需要些前缀之后的路径
当路径较多时可以再多建几个文件,分类放置
2.挂载
在 main.js 里 import api from './api/index'
使用 Vue.prototype.$api = api 挂载到原型链上,
在 Vuex 里引入有 fetch页面了,这个页面已经将 api 引入了
我抽空写了一个简单的转换工具,可以简化 API 的编写:
https://www.npmjs.com/package/vueapimanage
github:https://github.com/Grewer/vueApiManage 欢迎 star
完;
