Vue2.0 實踐階段性分享

近來忙於學習、開發，已有一段時間沒寫文章了。這段時間用 Vue2.0 開發項目，踩坑之餘，也收穫了很多！趁熱打鐵，來個階段性分享吧！

整個後臺咱們使用 Vue-router 來管理路由，用 Vuex 統一狀態管理，Vue-resource 來完成ajax請求，Element-ui 來快速開發UI，webpack 編譯打包，eslint 規範團隊代碼規範。

框架相關

框架搭建，你們能夠採用官網 的 vue-cli 開始着手構建。安裝過程當中，咱們能夠根據項目所需，選擇版本、單元測試、e2e測試，以及是否使用eslint等（已經有不少搭建入門篇了，這裏就很少贅述，有興趣的同窗能夠去網上搜下）。初步搭建後，能夠執行下 yarn init，項目會自動生成 yarn.lock 文件，鎖定版本。（關於yarn，能夠參考下這篇文章）。

框架初始化後，咱們能夠在 build 文件夾中的 webpack.base.conf.js 查看到 webpack 的基本配置，以下：

在 config 文件夾下的index.js能夠配置本地開發的端口，默認是8080，你能夠根據須要調整：

在 .eslintrc.js 文件的 rules 裏面自定義團隊js的書寫規範，簡單示例：

其中 0 爲關閉，1 爲警告, 2 爲報錯。

路由

首先根據官網提示安裝 npm install vue-router 或者 yarn add vue-router， 而後在main.js裏面，根據官網提示引入。接着，寫一個路由配置文件，在main.js裏面引入使用，如今 main.js 裏面關於路由的配置應該是這樣的：

若是咱們須要把路由和全局狀態管理 store (下文會講到) 同步起來，可使用 vuex-router-sync。安裝引用後，在模塊裏面從state裏面就能夠拿到路由的相關信息了，如：

有時候路由跳轉須要檢查是否須要受權，這時候就要定義路由的 meta 字段了。引用官網的一句話 「一個路由匹配到的全部路由記錄會暴露爲 $route 對象（還有在導航鉤子中的 route 對象）的 $route.matched 數組。所以，咱們須要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。「

咱們能夠這樣在全局導航鉤子中檢查 meta 字段，以此來判斷是否須要跳轉受權：

注意：不要忘記在須要受權的路由前面加上 meta: { requiresAuth: true } 。

Vuex狀態管理

首先根據官網提示安裝 npm install vuex 或者 yarn add vuex，而後新建一個store文件夾，裏面分別放置 modules, actions, getters, mutations, constants 和 index.js 等文件, 接着在 main.js 裏面這樣寫：

關於store的佈局，咱們能夠根據項目所需，拆分紅不一樣的 module、action 等，以下：

關於state裏面數據的變更都在mutation裏面處理，接口調用在action裏面處理，須要.vue 文件裏面獲取數據能夠經過 mapGetters 或者 mapState，大體實例：

mapGetters 和 mapState 的區別在於 mapGetters，你寫一個 getters function 能夠在不一樣模塊之間共用，而 mapState 只用於當前的模塊。

因爲全部 state 和 getters 等都放在store中，因此咱們能夠在 mutation 和
action 裏面經過解構參數，拿到想要的 state 和 getter 等，如：

篇幅有限，沒法面面俱到，詳細用法建議你們參考官網 或者其它 vuex 詳解篇。

組件和過濾器

組件和過濾器的註冊可分爲全局使用和部分模塊使用。例如，咱們寫了一個確認框組件comfirm.vue，這個組件要在模塊a裏面引用，咱們能夠在模塊a裏面這樣引用，並傳入對應的prop:

<template>
  <div class="f-confirm">
    <f-confirm :confirmData="confirmData" :isBill="isBill"></f-confirm>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import fConfirm from './confirm';

export default {
  data() {
    return {
      isBill: true
    }
  },
  
  computed: mapGetters({
    confirmData 'getConfirmData'
  }),
  
  components: { fConfirm },
};
</script>

此外，對於共用的組件和過濾器註冊，咱們能夠統一在 main.js 裏面，把它們加載進來，而後全局註冊，作法以下：

這樣註冊後，咱們在須要用到它們的任何一個組件裏面，均可以使用。好比我須要在模塊b裏面用到 header.vue 和 content.vue 這兩個組件，我直接在模塊a裏面這樣寫就行：

注意： 這時候 <script> 標籤裏面不須要再去 import 這個組件，也不須要寫在components 裏面了。

混合（mixin）

寫過 Sass 的同窗都知道混合宏，那麼，在Vue裏面，mixin又是什麼呢？官網是這樣描述的，「混合是一種靈活的分佈式複用 Vue 組件的方式。混合對象能夠包含任意組件選項。以組件使用混合對象時，全部混合對象的選項將被混入該組件自己的選項。」

舉個例子，好比我在 模塊a 和 模塊b 裏面都須要用到這樣的代碼，那麼我能夠把它寫成一個mixin，以下：

在 模塊a 或 模塊b 裏面這樣引用就能夠了：

要注意的是，當組件和 混合對象有同名鉤子時，這些鉤子將混合成一個數組，都會被調用，可是 混合 對象的鉤子會比組件自身的鉤子先被調用。引用官網的一個例子：

var mixin = {
      created: function () {
        console.log('混合對象的鉤子被調用')
      }
    }
    new Vue({
      mixins: [mixin],
      created: function () {
        console.log('組件鉤子被調用')
      }
    })
    // -> "混合對象的鉤子被調用"
    // -> "組件鉤子被調用"

混合 對於減小重複的代碼是個很好的選擇，可是要注意謹慎使用全局的mixin, 由於它會影響到每一個單首創建的 Vue 實例。

api 調用

文首已經說起，咱們採用vue-resource來完成ajax請求。vue-resource是一個很是小巧的庫，壓縮後大約只有12KB，服務端啓用gzip壓縮後只有4.5KB大小。它和Vue.js同樣，除了不支持IE 9如下的瀏覽器，其餘主流的瀏覽器都支持。它支持Promise API和URI Templates，也支持攔截器。攔截器是全局的，攔截器能夠在請求發送前和發送請求後作一些處理。這裏提供 vue-resource github 地址，沒用過的同窗能夠先去看下。

爲了避免必每次調用都要寫上諸以下面這樣繁瑣的代碼，

this.$http.get(this.apiUrl, ...)
    .then((response) => {
        this.$set('gridData', response.data)
    })
    .catch(function(response) {
        console.log(response)
    });
    
    this.$http.post(this.apiUrl, data, ...)
    .then((response) => {
        this.$set('gridData', response.data)
    })
    .catch(function(response) {
        console.log(response)
    })

咱們能夠把 ajax 相關的調用方法封裝起來，簡單示例：

在須要用到的模塊裏面，這樣引用：

此外，項目所用到的接口地址也建議統一寫在一份配置文件，這樣比較好管理，簡單能夠這樣寫：

const path = {
  base: '/bill/manage',
  ports: {
    export: '/export/refresh/'
    bank: '/bank/filter/',
    online: '/online/filter/',
    ...
  }
};

export const getUri = (key) => {
  if (!path.ports[key]) {
    return false;
  }
  return path.base + path.ports[key];
};

在調用接口時，直接傳參數調用 getUri 來獲取對應的url, 如 getUri(bank)。
不過，這種方法我感受還不大滿意，若是你們有更好的作法，歡迎分享！

總結

篇幅有限，沒有辦法細講每一個小標題，只能把大體地跟你們分享下。這段時間，也喜歡本身作一下vue功能組件，如 vue-upload, vue-chart 等，有時間整理後，再和你們一塊兒分享！固然如今網上已經有不少現成的庫了，有興趣的同窗均可以去看看。

若是你也在用vue2開發, 歡迎交流、分享！