vue插件学习

vue的插件通常是用来添加全局功能，

插件按功能分一般有：

• 1、添加全局方法或属性
• 2、添加全局属性：指令、过滤器、过渡
• 3、通过全局混入来添加一些组件选项
• 4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现

使用插件

1、使用import引入插件
2、Vue.use(插件名称)

开发插件

Vue.js 的插件应该暴露一个 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) {
    // 逻辑...
  }
}

开发一个简单的插件

• 1、开发插件

// justs.js
function install() {
    console.log("进入插件~")
}

export default { install }

• 2、引用插件

在main.js中引入
1、import Justs from './plugins/justs'
2、Vue.use(Justs)

• 3、一个最简单的插件就开发完成了