关于自定义Vue插件的两种常见形式

自定义的vue插件,在我的理解中，分为两种:

1.注册成全局组件的形式

比如，你在main,js中Vue.use(yourPlugin) 然后在你的页面内可以这样使用

2.注册成全局函数的形式

同样在main.js中Vue.use(yourPlugin)
但是在你的页面内是使用函数的形式调用的,比如

第一种形式可以参考这位大大的 http://www.jianshu.com/p/d6855556cd75

主要记录一下第二种
js文件修改为

import temp from './temp.vue'
const pluginModel= {
  install (Vue, options) {
    // Vue.component(temp.name, temp)
    const Plugin= Vue.extend(temp)
    let pluginBox= document.querySelector('.plugin-box')
    function $pluginModel() {}
    $pluginModel.show = (data) => {
      return new Promise((resolve) => {
        if (!pluginBox) {
          pluginBox= new Plugin()
          pluginBox.$mount()
          document.querySelector('body').appendChild(pluginBox.$el)
        }
        pluginBox.show(data)
        resolve()
      })
    }
    Vue.prototype.$pluginModel= $pluginModel
  }
}

export default pluginModel

vue文件基本不变

然后在main.js中引入js文件并Vue.use(yourPlugin)

...
import yourPlugin from './yourPlugin.js'
Vue.use(yourPlugin)
...

使用方法放在最上面那里