[Vue] 外掛開發入門

作者：滴滴公共前端團隊 - 小春+獻勇

相對元件來說，Vue 的外掛開發受到的關注要少一點。但是外掛的功能是十分強大的，能夠完成許多 Vue 框架本身不具備的功能。

大家一般習慣直接呼叫現成的外掛，比如官方推薦的 vue-router、vue-touch 等。

下面就看一下 Vue 的外掛開發如何入門。

首先我們簡單回顧一下 Vue.js 官方文件中對於外掛開發的描述。

Vue 的外掛必須提供一個公開方法 install，該方法會在你使用該外掛，也就是 Vue.use(yourPlugin) 時被呼叫，相當於是一個外掛的註冊或者宣告。install 接受 Vue 構造器作為第一個引數，並且有一個可選的選項物件作為第二個引數，比如：

yourPlugin.install = function (Vue, options) {
  // 1. 新增全域性方法或屬性
  Vue.myGlobalMethod = ...
  // 2. 新增全域性資源
  Vue.directive('my-directive', {})
  // 3. 新增例項方法
  Vue.prototype.$myMethod = ...
}複製程式碼

外掛在使用時有兩種方式：

第一種是如上述提到的，可以通過 Vue.use(yourPlugin) 全域性方法進行呼叫。
進行 Vue 的大型專案開發時，如果用 vue-cli 生成專案目錄結構，Vue.use() 方法一般在 main.js 中呼叫。

第二種實際上是外掛本身幫你完成了 Vue.use()的呼叫。
這種情況下，外掛會去檢測是否存在 Vue 全域性變數，如果存在，就自動呼叫 Vue.use()。所以，如果你的專案中是使用 script 方式引入的 Vue.js（這種情況下 Vue 才會作為一個全域性變數存在），在使用比如 vue-router 之類的外掛時就可以直接引入然後使用，不用再呼叫 Vue.use()。
但是，在模組環境下應當始終顯式呼叫該方法，以保證外掛可以正常使用：

// 通過 Browserify 或 Webpack 使用 CommonJS 相容模組
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了呼叫此方法
Vue.use(VueRouter)
// 或者可以多傳入一個選項物件
// Vue.use(VueRouter, { hashbang: true })複製程式碼

接下來我們看一下一些官方的常用外掛的實現，我們配合去除具體邏輯的原始碼進行一些解讀：

1、vue-touch

// version: 1.1.0
// vue-touch.js
var vueTouch = {}
// 暴露出的全域性配置項，也就是在呼叫 Vue.use(Vue, options) 時傳入的第二個選項引數
vueTouch.config = {}
// 核心部分，外掛的具體邏輯均在此實現
vueTouch.install = function (Vue) {
  Vue.directive('touch', {
    bind: function () {
    },
    update: function () {
    },
    unbind: function () {
    }
  })
}
// 支援 CommonJS
if (typeof exports == "object") {
  module.exports = vueTouch
// 支援 AMD
} else if (typeof define == "function" && define.amd) {
  define([], function(){ return vueTouch })
// Vue 是全域性變數時，自動呼叫 Vue.use()
} else if (window.Vue) {
  window.VueTouch = vueTouch
  Vue.use(vueTouch)
}複製程式碼

2、vue-router

// version: 0.7.13
// src/index.js
let Vue
// 封裝為 ES6 class
class Router {
  // 可傳入全域性配置項
  constructor({
    hashbang = true,
    abstract = false,
    history = false,
    saveScrollPosition = false,
    transitionOnLoad = false,
    suppressTransitionError = false,
    root = null,
    linkActiveClass = 'v-link-active'
  } = {}) {
    // ...
  }
}
// 避免重複 install，設立 flag
Router.installed = false
Router.install = function (externalVue) {
  if (Route.installed) {
    return
  }
  Vue = externalVue
  // install 的具體邏輯，此處省略
  // ...

  // install 完畢
  Router.installed = true
}
// 同樣，Vue 作為全域性變數時自動 install
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Router)
}
export default Router複製程式碼

3、vue-resource

// version: 1.0.3
// src/index.js
// install 方法
function plugin(Vue) {
  if (plugin.installed) {
    return;
  }

  // 外掛核心邏輯，此處省略
  // ...
}
// 同上，Vue 是全域性變數時，自動 install
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}
export default plugin;複製程式碼

看完以上三個官方例子，相信各位已經對 Vue 的外掛開發過程有了一定的瞭解，大家就可以根據自己的需要為 Vue 增加各種全域性功能了。

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公眾號：微信搜尋公眾號“DDFE”或掃描下面的二維碼