作者：Joshua Bemenderfer
原文地址: creating-custom-plugins
譯者：jeneser
Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插件的用途很廣泛，從全局組件，到為應用添加一些額外的功能、如路由(Vue Router)，存儲在應用程序里的不可變數據(Vuex)。
一般來說，Vue插件的開發是非常簡單的。Vue插件僅僅是包含一個公開方法install的對象、這個方法有兩個參數：Vue 構造器和一個可選的選項對象。盡管，插件系統看起來十分簡單，但其仍然可以產生相當大的作用。
你的第一個插件
為了打開vue插件開發的大門，下面我們將先實現一個最簡單的插件。這個插件的功能是：當組件被掛載到DOM后，控制臺輸出Mounted!。
// 這是你的插件對象。 它可以導出到任何地方使用。
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)
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添加全局功能，而沒有直接修改應用邏輯。拆分模塊這種做法總是極好的，你可以隨時添加或移除一個單獨的模塊。同時，這也使得插件非常容易分發。
添加一些其他的功能
安裝應用范圍的組件和指令
如果你想把組件或指令打包為一個插件來進行分發，可以這樣寫：
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。
const MyPlugin {
install(Vue, options) {
Vue.myAddedProperty = 'Example Property'
Vue.myAddedMethod = function() {
return Vue.myAddedProperty
}
}
};
export default MyPlugin;
修改Vue實例
不需要任何注入機制便可以將屬性或方法直接添加到組件實例，你可以這樣來修改Vue構造器的prototype：
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組件進行修改。
const MyPlugin = {
install(Vue, options) {
Vue.mixin({
mounted() {
console.log('Mounted!');
}
});
}
};
export default MyPlugin;
Mixin是一個相當重要的話題，但不在本文的討論范圍之內。目前，可以肯定的是，Mixin是一種靈活的分布式復用 Vue 組件的方式，Mixin可以包含任意組件選項并可以混合進其他組件之中。
自動安裝插件
對于那些沒有在應用中使用模塊化系統的用戶，他們往往將通過<script>標簽引用你的插件，并期待插件無需調用Vue.use()便會自動安裝 。你可以在插件最后添加如下幾行代碼來實現自動安裝：
// 如果Vue是全局對象自動安裝插件
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(MyPlugin)
}
發布你的插件
如果你已經寫了一個插件，并準備將其分享到社區，下面是一些常用的幫助別人發現你的插件的方法，如果你還不熟悉這些流程的話。
向Awesome-Vue提交PR。很多人會來這里尋找插件。
(其他) Vue論壇，Vue Gitter Channel，或者在Twitter上@ #vuejs。
趕快去開發一些插件吧！
End
作者：Joshua Bemenderfer
原文地址:creating-custom-plugins
譯者：jeneser
譯者GitHub：https://github.com/jeneser
版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）
