npm install下来的包到底怎么来的？难怪npmjs上会有这么的库！手把手教你做一个完全属于你自己的npm组件库！

git init my_npm_comp
cd my_npm_comp
npm init -y

let Alert = {
    show:function(){
        alert('纸飞机666')
    }
}


export default Alert;

let Toast = {
  // 隐藏的 setTimeOut 引用
  hideTimeOut: null,
  /**
   * 初始化
   */
  init: function () {
    var toastNode = document.createElement("section");
    toastNode.innerHTML =
      '<i class="iconfont icon-success"></i><i class="iconfont icon-error"></i><span class="text">111</span>';
    toastNode.id = "toastWaka"; // 设置id，一个页面有且仅有一个Toast
    toastNode.setAttribute("class", "toast"); // 设置类名
    toastNode.style.display = "none"; // 设置隐藏
    document.body.appendChild(toastNode);
  },
  /**
   * 显示Toast
   * @param text 文本内容
   * @param type 类型 success error
   * @param duration 持续时间
   */
  show: function (text, type, duration) {
    // 确保上一次的 TimeOut 已被清空
    if (this.hideTimeOut) {
      clearTimeout(this.hideTimeOut);
      this.hideTimeOut = null;
      // console.error('上一次的 TimeOut 还未走完!');
      // return;
    }
    if (!text) {
      console.error("text 不能为空!");
      return;
    }
    var domToastWaka = document.getElementById("toastWaka");
    console.log("domToastWaka", domToastWaka);
    if (!domToastWaka) {
      console.error("toastWaka DOM 不存在!");
      return;
    }
    var domIconSuccess = domToastWaka.querySelector(".icon-success"); // 成功图标
    var domIconError = domToastWaka.querySelector(".icon-error"); // 错误图标
    var domToastText = domToastWaka.querySelector(".text"); // 文字
    domToastText.innerHTML = text || "";
    switch (type) {
      case "success":
        domIconSuccess.style.display = "inline";
        domIconError.style.display = "none";
        break;
      case "error":
        domIconSuccess.style.display = "none";
        domIconError.style.display = "inline";
        break;
      default:
        domIconSuccess.style.display = "none";
        domIconError.style.display = "none";
        break;
    }
    domToastWaka.style.display = "block";
    // 不传的话默认2s
    var that = this;
    this.hideTimeOut = setTimeout(function () {
      domToastWaka.style.display = "none";
      that.hideTimeOut = null; // 置 TimeOut 引用为空
    }, duration || 2000);
  },
  /**
   * 隐藏 Toast
   */
  hide: function () {
    // 如果 TimeOut 存在
    if (this.hideTimeOut) {
      // 清空 TimeOut 引用
      clearTimeout(this.hideTimeOut);
      this.hideTimeOut = null;
    }
    var domToastWaka = document.getElementById("toastWaka");
    if (domToastWaka) {
      domToastWaka.style.display = "none";
    }
  },
};

Toast.init();

export default Toast;

/*toast样式*/
#toastWaka {
    position: absolute;
    display: none;
    left: 50%;
    bottom: 50%;
    z-index: 99999;
    margin: 0 auto;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 120px;
    height:40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background-color: rgba(000,000,000,0.5);
}
 
#toastWaka .text{
    color: #fff;
    display: inline-block;
    font-size: 14px;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

import Toast from './components/Toast'
import Alert from './components/Alert'


let myLibs = {}

myLibs.Alert = Alert
myLibs.Toast = Toast

export default myLibs

npm config set registry=http://registry.npmjs.org

npm adduser

npm login

npm publish

npm i my_npm_comp

<template>
  <div id="app">
      <button @click="openAlert()">打开Alert</button>
      <button @click="openToast()">打开Toast</button>
  </div>
</template>

<script>
import myLibs from 'my_npm_comp'
import 'my_npm_comp/style.css'
export default {
  name: "App",
  components: {},
  data() {
    return {
      
    };
  },
  methods: {
    openAlert(){
      myLibs.Alert.show();
    },
    openToast(){
      myLibs.Toast.show("我是toast!", "success", 3000);
    }
  },
};
</script>