说到 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 文件来用我的轮子吧, 所以需要一个开箱即用的引入轮子的方法, 而官方文档早就给出解决方案 https://cn.vuejs.org/v2/guide/plugins.html .
假如现在已经写好了一个组件 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 提供的导出, 引入库的方法还是很有用的.
来源: http://www.jianshu.com/p/0b415d28d5f5