你也許不知道的Vuejs - 外掛開發

yugasun發表於2018-04-11
VueJS

by yugasun from yugasun.com/post/you-ma… 本文可全文轉載，但需要保留原作者和出處。

初識外掛

雖然 Vue.js 已經足夠強大了，但是在實際開發中，我們還是需要引入各種模組來實現我們的功能需求，或者給全域性的 Vue 物件新增一些全域性功能，而 Vue 外掛 就是來幫助我們完成這項工作的。

開發外掛

Vuejs 外掛範圍沒有限制，一般有以下幾種：

  1. 新增全域性方法或者屬性，如：vue-custom-element
  2. 新增全域性資源：指令、過濾器、過度等，如： vue-touch
  3. 通過全域性 mixin 方法新增一些元件選項，如：vue-router
  4. 新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
  5. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如：vue-router

Vuejs 外掛應當有一個公開方法 install，這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的配置物件，書寫方式如下：

MyPlugin.install = function(Vue, options) {
  // 1. 新增全域性方法或屬性
  Vue.myGlobalProp = 'yugasun';
  Vue.myGlobalMethod = function() {
    // 邏輯
  };

  // 2. 新增全域性資源：
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
      // 邏輯
    }
  });

  // 3. 注入通用方法或屬性給元件
  Vue.mixin({
    data(){
      return {
        // 通用資料,
      };
    },
    created() {
      // 邏輯
    },
  });

  // 4. 新增例項方法
  Vue.prototype.$myMethod = function(methodOptions) {
    // 邏輯
  };
};
複製程式碼

使用外掛

外掛使用起來很簡單，只需要引入，然後通過呼叫 Vue.use() 方法就行了：

import Vue from 'vue';
import MyPlugin from './MyPlugin';
Vue.use(MyPlugin, {someOption: true});
複製程式碼

開發元件

我們這裡以 vue-axios-plugin 為例，它是一個對 axios 二次封裝的外掛，便於在專案中直接通過 this.$http.get/post 來直接呼叫請求方法。

首先根據上面的模板，建立入口檔案 vue-axios-plugin.js：

const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) => {

}
export default VueAxiosPlugin
複製程式碼

然後給 Vue 新增例項方法：

import axios from 'axios'
const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) => {
  const service = axios.create(options)
  Vue.prototype.$axios = service
  Vue.prototype.$http = {
    get: (url, data, options) => {
      let axiosOpt = {
        ...options,
        ...{
          method: 'get',
          url: url,
          params: data
        }
      }
      return service(axiosOpt);
    },
    post: (url, data, options) => {
      let axiosOpt = {
        ...options,
        ...{
          method: 'post',
          url: url,
          data: data
        }
      }
      return service(axiosOpt);
    }
  }
}
export default VueAxiosPlugin
複製程式碼

具體 axios 的使用方法，請閱讀官方文件 axios

現在已經完成外掛的基本開發了，在專案中測試下，：

import VueAxiosPlugin from './vue-axios-plugin'
Vue.use(VueAxiosPlugin)
複製程式碼

然後你就可以在你的元件中直接使用新增的全域性方法了：

 var app = new Vue({
  el: '#app',
  data: {
    content: 'Sending...'
  },
  methods: {
    getUserInfo() {
      Promise.all([
        this.$http.get('http://yapi.demo.qunar.com/mock/5802/user', { id: 1 }),
        this.$http.post('http://yapi.demo.qunar.com/mock/5802/user', {
          username: 'yugasun',
        }, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
      ]).then((res) => {
        console.log(res)
      }).catch((e) => {
        console.log(e)
      })
    }
  },
  created() {
    this.getUserInfo()
  }
})
複製程式碼

釋出元件

外掛已經寫好了，你可以複製該檔案在不同的專案中複用了。如果覺得每次都複製檔案比較麻煩，你可以通過閱讀上一篇 定製開發專案模板 文章，將該外掛檔案直接新增到專案模板中即可。當然如果你的外掛足夠好，也可以釋出到 npm 社群，供全世界的程式設計師同胞使用。

每次專案緊急，有個需求很難搞定時，我們就會想著從 github 上搜尋我們需要的專案，既然我們從社群獲取了那麼多，當然也要學會感恩，偶爾嘗試著去回報下，不求程式碼有多麼高的質量，哪怕是單純地幫助修改一個說明文件中的錯誤，那也是一份貢獻，也許你的這次修改可以幫助別人節省半天的時間，任何專案都是在不斷迭代中成長的。

隨時歡迎進入全球最大的同性交友網站 GayGithub，貢獻你的第一份原始碼~

原始碼在此

專題目錄

You-May-Not-Know-Vuejs

相關文章