開發插件

插件通常會為 Vue 添加全局功能。插件的範圍沒有限制——一般有下面幾種：

1、添加全局方法或者屬性，如: vue-custom-element。

2、添加全局資源：指令/過濾器/過渡等，如 vue-touch。

3、通過全局 mixin 方法添加一些組件選項，如: vue-router。

4、添加 Vue 實例方法，通過把它們添加到 Vue.prototype 上實現。

5、一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router。

Vue.js 的插件應當有一個公開方法 install 。這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象：（官方例子）

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 添加全局資源
  Vue.directive(‘my-directive‘, {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 註入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 添加實例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
 

其核心還是通過prototype來添加方法和屬性。

使用插件

// 調用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

//也可以傳入一個選項對象：
Vue.use(MyPlugin, { someOption: true })

Vue.use 會自動阻止多次註冊相同插件，屆時只會註冊一次該插件。

此處有大量好用的插件和庫 --> awesome-vue

待續……

vue -- 插件的開發與使用