如何制作一个类似jquery插件的vue插件

vue拿来写插件，会不会太那啥？

请跟我念，“不会，符合业务需求才是你的老板最想要的。”

如何封装一个可以全局调用的vue插件

其原理其实相当简单，通过new Vue(vueComponentConstructor)您可以轻松的建立一个vue实例，在该实例上您可以操作方法、操作数据、监听数据变化，使用各种钩子，对开发者而言并没有任何阻碍。

我们生产了一个实例后该如何操作

请跟我来,写一个实现。首先，我们先写一个vue组件。

// vue组件 A.vue

当然，如果您的构建系统不支持vue-loader和webpack,您也可以使用以下写法

export default const Dialog = {
    name: 'xxx',
    template: `
        

            // some template
        
    `,
    data () {
        return {}
    },
    methods: {}
}

第二步，生产api出口

// 生成调用方法
import Vue from 'vue'
import A from './A.vue'

let AConstructor = Vue.extend(A)

export default function (options = {}) {
  let instance = new AConstructor({
    data: options // 混入初始化数据，也可以直接通过merge的方式把数据插入实例对象上
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true // 一些生成后的data成员操作
  return instance.vm
}

您可以将其生成单一实例，也可以每次调用生成不同实例，在关闭时调用$destroy配合destroyed或者beforeDestroy对存在页面上的vm.$el进行销毁。

一些提示

您可以将实例引用挂载到任何您想挂载的地方方便调用，您也可以使用Promise配合vue实例里的自定义方法或者其他方法实现promise链或者async await的灵活写法。这都取决于您。