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的灵活写法。这都取决于您。