当前位置:首页 > 博客 >Node.js > 正文

开发一个vue插件

时间:2019-05-17 22:58   作者:admin   点击:

主要是用来开发一些常见的功能,一些公用的模块,都可以让它以插件的形式存在,方便管理、维护以及使用。

1.在开发vue插件的时候,不需要安装太多的依赖,所以建议使用webpack-simple

vue init webpack-simple xiayulin

生成的目录结构

image.png

2.入口文件的作用是将组件作为Vue的插件。Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象

新建一个index.js

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) {    // 逻辑...
  }
}

待更新