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：https://github.com/DDFE
微信公眾號：微信搜索公眾號“DDFE”或掃描下面的二維碼