说到 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 提供的导出,引入库的方法还是很有用的。
网友评论