Vue: 插件

说到 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)
引入库的 CSS 文件：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 提供的导出，引入库的方法还是很有用的。

最后编辑于：2019.01.21 10:52:07