Vue: 外掛

摘要： 說到 Vue 的外掛，大家會先想到什麼呢，是那個狀態管理的 Vuex 還是發 Ajax 請求的 axios 呢？今天就聊聊 Vue 外掛。你說外掛有什麼好聊的，直接看文件的 Get Started 我就會了呀。No no no，今天想聊的是自己寫外掛怎麼方便別人引入的問題。...

說到 Vue 的外掛，大家會先想到什麼呢，是那個狀態管理的 Vuex 還是發 Ajax 請求的 axios 呢？今天就聊聊 Vue 外掛。你說外掛有什麼好聊的，直接看文件的 Get Started 我就會了呀。No no no，今天想聊的是自己寫外掛怎麼方便別人引入的問題。

別人的外掛

我們先看看以前我們是怎麼引入 Element UI 的：

import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';

Vue.use(ElementUI);
import 'element-ui/lib/theme-chalk/index.css';

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

其實就兩步：

Vue.use(xxx)
import "xxx/yyy.css

第二步容易理解，那麼第一步到底是怎麼做到的呢？以前我都用習慣了，一直沒太在意這個 use 的用法是什麼。

開發外掛

最近在寫輪子的時候才發現這個用法。因為在輪子匯出的時候總不能讓開發者去拷貝我的 .vue 檔案來用我的輪子吧，所以需要一個開箱即用的引入輪子的方法，而官方文件早就給出 解決方案 。

假如現在已經寫好了一個元件 HelloWorld.vue ，可以在入口檔案引入，並在 install 函式使用全域性註冊。

// main.js
import HelloWorld from './components/HelloWorld.vue'

const XXXUI = {}

XXXUI.install = function (Vue, options) {
Vue.component('HelloWorld', HelloWorld)
}

export default XXXUI

引入外掛

當你打包了 main.js 後會生成 xxx.min.js 檔案，別人引入外掛的時候就可以這樣寫：

import XXXUI from 'xxxui.min.js'
import Vue from 'vue'

Vue.use(XXXUI)

當 Vue.use(XXXUI) 執行的時候就相當於執行寫在 install 函式裡的程式碼，也就是說此時會在開發者的專案裡全域性註冊 HelloWorld 元件。

更多用法

你還可以在 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) {
// 邏輯...
}
}

export MyPlugin

最後將自己的外掛 export 就可以讓別的開發者直接使用 Vue.use() 完成外掛的引入了。

總結

其實 Plugin.install = function() {} 的寫法不過是將入口檔案包裝了一下，暴露出一個介面，開發者只要使用這個介面就可以輕鬆初始化別人的庫。這裡的初始化也不過是全域性註冊XXX，繫結YYY方法到Vue原型上，本質上只是一個回撥。

可能有人會問，那我乾脆在入口檔案裡全域性註冊不就好了，開發者連 Vue.use 都可以不用寫。但是，有可能別人不想一次全用你的元件呀，想接需載入呀。所以呢，Vue 提供的匯出，引入庫的方法還是很有用的。