分享一篇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
完;
