自定義的vue插件,在我的理解中，分為兩種:

1.注冊成全局組件的形式

比如，你在main,js中Vue.use(yourPlugin) 然后在你的頁面內(nèi)可以這樣使用

<template>
  <div id="yourPage">
    <yourPlugin></yourPlugin>
  </div>
</template>

2.注冊成全局函數(shù)的形式

同樣在main.js中Vue.use(yourPlugin)
但是在你的頁面內(nèi)是使用函數(shù)的形式調(diào)用的,比如

<template>
</template>
<script>
export default {
  mounted: {
    this.$yourPlugin.show({ yourData })
  }
}
</script>

第一種形式可以參考這位大大的 http://www.itdecent.cn/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文件基本不變

<template lang="html" name="fade">
  <div class="plugin-box" v-if="isShow" @click="hide">
    <h1>瞧一瞧看一看啦哈</h1>
  </div>
</template>

<script>
export default {
  name: 'plugin',
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    show: function (data) {
      this.isShow= true
    },
    hide: function () {
      this.isShow= false
    }
  }
}
</script>

<style lang="css">
</style>

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

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

使用方法放在最上面那里