Vue: 插件

作者: 写代码的海怪 | 来源:发表于2019-01-21 10:50 被阅读78次

    说到 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)
    });
    

    其实就两步:

    1. Vue.use(xxx)
    2. 引入库的 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 提供的导出,引入库的方法还是很有用的。

    相关文章

      网友评论

        本文标题:Vue: 插件

        本文链接:https://www.haomeiwen.com/subject/ssvqjqtx.html