如何从0开发一个Vue组件库并发布到npm（下）

<template>
    <div class="di-toast" :class="`di-toast--${type}`" v-if="show">
        {{message}}
    div>
template>
<script>
export default {
    data(){
        return {
            message:'',
            show:false,
            type:''
        }
    }
}
script>
<style>
.di-toast{
    width: 60%;
    width: 200px;
    background: rgb(15, 15, 15);
    padding:3px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    position: fixed;
    left: calc(50% - 100px);
    top: 200px;
}
.di-toast--warning{
    background: #FDF6EC;
    color: #E6A28B;
}
.di-toast--success{
    background: #F0F9EB;
    color: #93C26D;
}
style>

import toast from './index.vue'
toast.install = (Vue) => {
    const toastConstructor = Vue.extend(toast);//使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
    let $vm = new toastConstructor();//将这个子类实例化
    let $el = $vm.$mount().$el;//$vm执行$mount()手动挂载会返回一个带有$el的对象,$el就是一个dom对象
    document.querySelector("body").appendChild($el);//将这个dom对象添加到body中
    //在Vue原型上注入$toast方法
    Vue.prototype.$toast = (option) => {
        $vm.show = true
        if (!(option instanceof Object)) {
            //如果传的不是对象直接弹出
            $vm.message = option
        } else {
            $vm.message = option.message
            $vm.type = option.type
        }
        setTimeout(() => {
            $vm.show = false
        }, 2000)
    }
}
export default toast

import diButton from "./packages/button" 
import toast from "./packages/toast" 
export {
    diButton,
    toast
}

<template>
  <div class="home">
    <di-button type="primary" @click="toast">按钮di-button>
  div>
template>
<script>
// @ is an alias to /src
import Vue from "vue";
import { diButton, toast } from "vuecomponentdi";
Vue.use(diButton);
Vue.use(toast);
export default {
  name: "Home",
  methods: {
    toast() {
      // this.toast("这是一个普通弹窗");
      // this.$toast({
      //   message: "这是一个成功弹窗",
      //   type: "success",
      // });
      this.$toast({
        message: "这是一个警告弹窗",
        type: "warning",
      });
    },
  },
};
script>

"publishConfig": {
    "access": "public"
  },

{
  "name": "vuecomponentdi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^8.2.0"
  },
  "publishConfig": {
    "access": "public"
  }
}

npm login
npm publish

npm install vuecomponentdi