创建Vue插件（手动展示vue组件）

一、插件通常用来为 Vue 添加全局功能。

1、添加全局方法或者 property。

2、添加全局资源：指令/过滤器/过渡等。如 vue-touch

3、通过全局混入来添加一些组件选项。如 vue-router

4、添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

5、一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

插件的功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

二、在vue中自定义全局插件

1.写Toast组件

<template>
  <div class="toast" v-show="isShowToast">
    <span>{{showText}}</span>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  data() {
    return {
      isShowToast: false,
      showText: '',
    }
  },
  methods: {
    showToast(a) {
      this.showText = a
      this.isShowToast = true
      setTimeout(() => {
        this.isShowToast = false
      }, 1000)
    },
  },
}
</script>

2.定义一个js文件，写入toast插件

//封装一个toast插件

import Toast from './Toast.vue'
const obj = {
  //这里在使用Vue.use()的时候会默认调用install方法,并默认传入参数Vue
  install(Vue) {
    //1.创建组件构造器(Vue.extend()本质是返回一个VueComponent构造函数)
    const toastConstructor = Vue.extend(Toast)
    //2.由组件构造器创建一个对象实例
    const toast = new toastConstructor()
    //3.创建一个div，并将其添加到页面中
    let div = document.createElement('div')
    document.body.appendChild(div)
    //4.将div挂载为模板容器，$mount()就是挂载模板容器，和vue实例中.$mount('#app')
    //  是一样的；但是toast.vue中存在 < template />,开发时依赖的vue-template-compiler
    //  会将其解析为render函数然后将.$mount('div')这个容器替换掉，所以创建的这个div最终
    //  会被代替掉
    toast.$mount(div)

    //上面的步骤其实就是手动将组件放入到页面中加载

    //将$toast添加为原型方法，这样每个组件都能使用里面的方法了
    Vue.prototype.$toast = toast
  },
}
export default obj

//然后到main.js中引用该插件

3.在main.js中引用该插件

import toast from 'components/common/toast/toast.js'
//加载自定义的toast插件,会自动调用install方法
Vue.use(toast)

到这里toast组件的内容就已经在页面的最后显示出来了，不过通过v-show隐藏了

4.在不同的地方使用插件

    //点击购物车添加商品
    addToCart() {
      //在设置添加购物车成功的toast时，不能直接点击添加就直接显示成功，而是应该添加
      //成功后再显示
      this.$store.dispatch('addProduct', productItem).then((res) => {
        this.$toast.show(res)
      })
    },

由于在定义toast插件时通过Vue.prototype.$toast = toast将toast组件挂载到原型上了，所以可以通过this.$toast.show(res)来调用toast组件内的方法，从而改变toast的v-show状态以此来决定显示隐藏。