vue插件开发

插件MyPlugin.js

module.exports = (function() {
  var install = function install(Vue) {
       if (install.installed) return;

         // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
          // 逻辑...
        }
        // 2. 添加全局资源
        Vue.directive('my-directive', {
          bind (el, binding, vnode, oldVnode) {
            // 逻辑...
            el.innerHTML = 'DDDD'

          }
        })
        // 3. 注入组件
        Vue.mixin({
          created: function () {
            // 逻辑...
          }
        })
        // 4. 添加事例方法
        Vue.prototype.$myMethod = function (options) {
          // 逻辑...
        }
  }

  return install;

})()

调用main.js

import Vue from 'vue'
import App from './App.vue'
import MyPlugin from './MyPlugin'

Vue.use(MyPlugin)

var vm = new Vue({
  el: '#app',
  render: h => h(App)
})

Vue组件App.vue

<template>
  <div id="app">
     <div v-my-directive></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {

    },
    mounted: function() {

    }
}
</script>

参考网站
https://cn.vuejs.org/v2/guide/plugins.html