Vue.js 外掛
阿新 • • 發佈：2018-11-25
外掛
外掛通常會為 Vue 新增全域性功能。外掛的範圍沒有限制——一般有下面幾種：
-
新增全域性方法或者屬性，如: vue-custom-element
-
新增全域性資源：指令/過濾器/過渡等，如 vue-touch
-
通過全域性 mixin 方法新增一些元件選項，如: vue-router
-
新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
-
一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
使用外掛
通過全域性方法 Vue.use()
new Vue() 啟動應用之前完成：
// 呼叫 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
//... options
})
|
也可以傳入一個選項物件：
Vue.use(MyPlugin, { someOption: true })
|
Vue.use 會自動阻止多次註冊相同外掛，屆時只會註冊一次該外掛。
Vue.js 官方提供的一些外掛 (例如 vue-router
Vue 是可訪問的全域性變數時會自動呼叫 Vue.use()。然而在例如 CommonJS 的模組環境中，你應該始終顯式地呼叫 Vue.use()：
// 用 Browserify 或 webpack 提供的 CommonJS 模組環境時
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了呼叫此方法
Vue.use(VueRouter)
|
awesome-vue 集合了來自社群貢獻的數以千計的外掛和庫。
開發外掛
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) {
// 邏輯...
}
} |