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

Vue.js插件是為應(yīng)用添加全局功能的一種強(qiáng)大而且簡(jiǎn)單的方式。插件的用途很廣泛，從全局組件，到為應(yīng)用添加一些額外的功能、如路由(Vue Router)，存儲(chǔ)在應(yīng)用程序里的不可變數(shù)據(jù)(Vuex)。

一般來說，Vue插件的開發(fā)是非常簡(jiǎn)單的。Vue插件僅僅是包含一個(gè)公開方法install的對(duì)象、這個(gè)方法有兩個(gè)參數(shù)：Vue 構(gòu)造器和一個(gè)可選的選項(xiàng)對(duì)象。盡管，插件系統(tǒng)看起來十分簡(jiǎn)單，但其仍然可以產(chǎn)生相當(dāng)大的作用。

你的第一個(gè)插件

為了打開vue插件開發(fā)的大門，下面我們將先實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的插件。這個(gè)插件的功能是：當(dāng)組件被掛載到DOM后，控制臺(tái)輸出Mounted!。

// 這是你的插件對(duì)象。 它可以導(dǎo)出到任何地方使用。
const MyPlugin = {
  // install方法是必需的
  // 包含兩個(gè)參數(shù)：Vue 構(gòu)造器，一個(gè)可選的選項(xiàng)對(duì)象
  install(Vue, options) {
      // 使用minxin將功能注入所有組件
    Vue.mixin({
      // 添加到mixin中的任何內(nèi)容將被注入到所有組件中。
      //在這個(gè)例子中， mounted() 方法將在組件被掛載到DOM后調(diào)用
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

現(xiàn)在，你的插件便可以使用了。你可以通過導(dǎo)入并用Vue.use來顯式調(diào)用你的插件：Vue.use(MyPlugin)

import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'

// 在這里顯式調(diào)用插件
Vue.use(MyPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
});

你可能會(huì)奇怪，為什么我不能直接在main.js中調(diào)用Vue.mixin()來實(shí)現(xiàn)這一點(diǎn)呢？其原因就是：我們向Vue添加全局功能，而沒有直接修改應(yīng)用邏輯。拆分模塊這種做法總是極好的，你可以隨時(shí)添加或移除一個(gè)單獨(dú)的模塊。同時(shí)，這也使得插件非常容易分發(fā)。

添加一些其他的功能

安裝應(yīng)用范圍的組件和指令

如果你想把組件或指令打包為一個(gè)插件來進(jìn)行分發(fā)，可以這樣寫：

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構(gòu)造器

你可以在插件中以你期待的方式來修改Vue構(gòu)造器(全局Vue對(duì)象)。下面的代碼在Vue構(gòu)造器中添加了一個(gè)屬性myAddedProperty和一個(gè)方法myAddedMethod。

const MyPlugin {
  install(Vue, options) {
    Vue.myAddedProperty = 'Example Property'
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};

export default MyPlugin;

修改Vue實(shí)例

不需要任何注入機(jī)制便可以將屬性或方法直接添加到組件實(shí)例，你可以這樣來修改Vue構(gòu)造器的prototype：

const MyPlugin {
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Example Property'
    Vue.prototype.$myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};

export default MyPlugin;

這些屬性將會(huì)被加到所有的組件和Vue實(shí)例中。

社區(qū)里公認(rèn)的做法是：添加在Vue prototype里的任何屬性都要以美元符$作為其前綴

添加組件的生命周期鉤子或?qū)傩?/strong>

const MyPlugin = {
  install(Vue, options) {

    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });

  }
};

export default MyPlugin;

// 如果Vue是全局對(duì)象自動(dòng)安裝插件
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyPlugin)
}