关于vue插件和组件的创建和使用

plugin插件

1、插件是一个对象，必须实现install办法
2、插件需要在vue文件中使用Vue.use(插件)
3、插件方法

Vue.extend(.vue文件)继承.vue文件的构造函数

 var NotifyCom = Vue.extend(NotifyVue);

instance.$mount(dom)手动挂载

 var instance = new NotifyCom();
  instance.$mount(document.createElement("div"));
  instance.$el 实例的真是dom

挂载全局

Vue.prototype.$toast=Toast
将插件挂载到全局的（所有组件的实例都将拥有拆键的方法和属性）

总体代码

import NotifyVue from "./NotifyVue.vue";
const Notify = {
   };
Notify.install = function (Vue) {
   
  var NotifyCom = Vue.extend(NotifyVue);
  var instance = new NotifyCom();
  instance.$mount(document.createElement("div"));
  document.body.appendChild(instance.$el);
  Notify.show = instance.show;
  Notify.hide = instance.hide;
  Notify.success = instance.success;
  Notify.danger = instance.danger;
  Notify.warning = instance.warning;
  Vue.prototype.$notify = Notify;
};
export default Notify;

提示插件Notify编写

在plugin创建一个文件夹notify

里面包含NotifyCom.vue和index.js俩文件

NotifyCom.vue文件编写

<template>
  <div class="notify"
       v-if="msg"
       :style="{ color: color, backgroundColor: bgColor }">
    {
   {
    msg }}
  </div>
</template>
<style scoped>
.notify {
   
  height: 44px;
  line