Vue.js 外掛是為應用新增全域性功能的一種強大而且簡單的方式。外掛的用途很廣泛，從全域性元件，到為應用新增一些額外的功能、如路由(Vue Router)，儲存在應用程式裡的不可變資料(Vuex)。
一般來說，Vue外掛的開發是非常簡單的。Vue外掛僅僅是包含一個公開方法install的物件、這個方法有兩個引數：Vue 構造器和一個可選的選項物件。儘管，外掛系統看起來十分簡單，但其仍然可以產生相當大的作用。
你的第一個外掛
為了開啟vue外掛開發的大門，下面我們將先實現一個最簡單的外掛。這個外掛的功能是：當元件被掛載到DOM後，控制檯輸出Mounted!。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 這是你的外掛物件。 它可以匯出到任何地方使用。 const MyPlugin = { // install方法是必需的 // 包含兩個引數：Vue 構造器，一個可選的選項物件 install(Vue, options) { // 使用minxin將功能注入所有元件 Vue.mixin({ // 新增到mixin中的任何內容將被注入到所有元件中。 //在這個例子中， mounted() 方法將在元件被掛載到DOM後呼叫 mounted() { console.log('Mounted!'); } }); } }; export default MyPlugin; |
現在，你的外掛便可以使用了。你可以通過匯入並用Vue.use來顯式呼叫你的外掛：Vue.use(MyPlugin)
|
1 2 3 4 5 6 7 8 9 10 11 |
import Vue from 'vue' import MyPlugin from './my-vue-plugin.js' import App from './App.vue' // 在這裡顯式呼叫外掛 Vue.use(MyPlugin) new Vue({ el: '#app', render: h => h(App) }); |
你可能會奇怪，為什麼我不能直接在main.js中呼叫Vue.mixin()來實現這一點呢？其原因就是：我們向Vue新增全域性功能，而沒有直接修改應用邏輯。拆分模組這種做法總是極好的，你可以隨時新增或移除一個單獨的模組。同時，這也使得外掛非常容易分發。
新增一些其他的功能
安裝應用範圍的元件和指令
如果你想把元件或指令打包為一個外掛來進行分發，可以這樣寫：
|
1 2 3 4 5 6 7 8 9 10 11 |
import MyComponent from './components/MyComponent.vue'; import MyDirective from './directives/MyDirective.js'; const MyPlugin { install(Vue, options) { Vue.component(MyComponent.name, MyComponent) Vue.directive(MyDirective.name, MyDirective) } }; export default MyPlugin; |
修改Vue構造器
你可以在外掛中以你期待的方式來修改Vue構造器(全域性Vue物件)。下面的程式碼在Vue構造器中新增了一個屬性myAddedProperty和一個方法myAddedMethod。
|
1 2 3 4 5 6 7 8 9 10 |
const MyPlugin { install(Vue, options) { Vue.myAddedProperty = 'Example Property' Vue.myAddedMethod = function() { return Vue.myAddedProperty } } }; export default MyPlugin; |
修改Vue例項
不需要任何注入機制便可以將屬性或方法直接新增到元件例項，你可以這樣來修改Vue構造器的prototype：
|
1 2 3 4 5 6 7 8 9 10 |
const MyPlugin { install(Vue, options) { Vue.prototype.$myAddedProperty = 'Example Property' Vue.prototype.$myAddedMethod = function() { return Vue.myAddedProperty } } }; export default MyPlugin; |
這些屬性將會被加到所有的元件和Vue例項中。
社群裡公認的做法是：新增在Vue prototype裡的任何屬性都要以美元符
$作為其字首
新增元件的生命週期鉤子或屬性
如上文中“你的第一個外掛”示例所示，你可以通過Mixin新增生命週期鉤子對Vue元件進行修改。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const MyPlugin = { install(Vue, options) { Vue.mixin({ mounted() { console.log('Mounted!'); } }); } }; export default MyPlugin; |
Mixin是一個相當重要的話題，但不在本文的討論範圍之內。目前，可以肯定的是，Mixin是一種靈活的分散式複用 Vue 元件的方式，Mixin可以包含任意元件選項並可以混合進其他元件之中。
自動安裝外掛
對於那些沒有在應用中使用模組化系統的使用者，他們往往將通過<script>標籤引用你的外掛，並期待外掛無需呼叫Vue.use()便會自動安裝 。你可以在外掛最後新增如下幾行程式碼來實現自動安裝：
|
1 2 3 4 |
// 如果Vue是全域性物件自動安裝外掛 if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(MyPlugin) } |
釋出你的外掛
如果你已經寫了一個外掛，並準備將其分享到社群，下面是一些常用的幫助別人發現你的外掛的方法，如果你還不熟悉這些流程的話。
- 選擇一個合適的開源協議，然後將原始碼釋出到NPM和GitHub。
- 向Awesome-Vue提交PR。很多人會來這裡尋找外掛。
- (其他) Vue論壇，Vue Gitter Channel，或者在Twitter上加 #vuejs 標籤。
趕快去開發一些外掛吧！