Vue.js插件開發

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) }

發布你的插件

如果你已經寫了一個插件，並准備將其分享到社區，下面是一些常用的幫助別人發現你的插件的方法，如果你還不熟悉這些流程的話。

• 選擇一個合適的開源協議，然后將源碼發布到NPM和GitHub。

• 向Awesome-Vue提交PR。很多人會來這里尋找插件。

• (其他) Vue論壇，Vue Gitter Channel，或者在Twitter上@ #vuejs。

趕快去開發一些插件吧！

End

作者：Joshua Bemenderfer
原文地址:creating-custom-plugins

譯者：jeneser
譯者GitHub：https://github.com/jeneser

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）