简单写一个vue插件

在vue中使用插件的源码如下：

如果我们使用插件可以在插件内部定义install方法或者export的就是个函数，看了vuex和vue-route的源码都是使用install方法，所以我在这里就用通常的install方法去实现

 function initUse (Vue) {
      Vue.use = function (plugin) {
        var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
        if (installedPlugins.indexOf(plugin) > -1) {
          return this
        } 
        // additional parameters
        var args = toArray(arguments, 1);
        args.unshift(this);
        if (typeof plugin.install === 'function') {
          plugin.install.apply(plugin, args);
        } else if (typeof plugin === 'function') {
          plugin.apply(null, args);
        }
        installedPlugins.push(plugin);
        return this
      };
    }

第一步 使用 vue init webpack vue-plugin 搭建vue脚手架项目

第二步，创建完项目，在src目录创建plugin.js,代码如下，在install方法里定义了一个全局方法，一个实例方法：

var myPlugin = Object.create(null);
myPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
       console.log('我是全局方法')
    }

    // 2. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('我是实例方法')
    }
  }

export default myPlugin

第三步 在main.js引入，调用myGlobalMethod全局方法

import Vue from 'vue'
import App from './App'
import router from './router'
import myPlugin from './plugin'
Vue.config.productionTip = false
Vue.use(myPlugin)
Vue.myGlobalMethod()
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

第四步 在HelloWorld.vue文件created里调用$myMethod()实例方法

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){
    this.$myMethod();
  }
}

第五步 运行项目，查看结果，两个方法都运行成功，简单的插件已经完成了

image.png