Vue 外掛程式開發入門

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

下面就看一下 vue 的外掛程式開發如何入門。

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

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

yourplugin.install = function (vue, options) )

// 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, )
複製**

// version: 1.1.0

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

// version: 0.7.13

// src/index.js
let vue
// 封裝為 es6 class
class
router
= {}) 
}// 避免重複 install，設立 flag
router.installed = false
router.install = function (externalvue) 
vue = externalvue
// install 的具體邏輯，此處省略
// ...
// install 完畢
router.installed = true
}// 同樣，vue 作為全域性變數時自動 install
if (typeof
window !== 'undefined' && window.vue) 
export
default router複製**

// version: 1.0.3

// src/index.js
// install 方法
function
plugin(vue) 
// 外掛程式核心邏輯，此處省略
// ...
}// 同上，vue 是全域性變數時，自動 install
if (typeof
window !== 'undefined' && window.vue) 
export
default plugin;複製**

歡迎關注ddfe

vue外掛程式開發

vue外掛程式開發主要是用來實現一些全域性方法或者全域性物件。vue的外掛程式要求是實現乙個install公開方法。其中此install方法的第乙個入參是vue構造器，第二個入參是 是乙個可選的選項物件。一 開發 以乙個alert的彈窗外掛程式為示例，alert.js 具體 如下 定義乙個全域性變數...

Vue 外掛程式開發

vue.js 的外掛程式應當有乙個公開方法 install 這個方法的第乙個引數是 vue 構造器 第二個引數是乙個可選的選項物件 myplugin.install function vue,options vue.directive my directive vue.mixin vue.proto...

vue開發外掛程式

1 新建plugin.js,檔案內容如下 import name1 from name1.vue let myplugin myplugin.install function vue,options 2.新增全域性資源 vue.directive my directive 3.注入元件選項 vue....