Vue插件的使用

简介

插件是一种能为 Vue 添加全局功能的工具代码

一、创建一个插件

创建一个 plug.js 文件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

// plug.js
export default {
  install: (Vue, options) => {
    // 1. 添加全局方法或 property
    Vue.myGlobalMethod = function () {
      // 逻辑...
    }
 
    // 2. 添加全局资源
    Vue.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // 逻辑...
      }
      ...
    })
 
    // 3. 注入组件选项
    Vue.mixin({
      created: function () {
        // 逻辑...
      }
      ...
    })
 
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      // 逻辑...
    }
  }
}

二、引入插件

在 main.js 文件中，引入插件

import plug from './util/plug'
// 调用 `plug.install(Vue)`
Vue.use(plug)

案例:

步骤一:

步骤二