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

完;