详细了解如何在npm上发布自己的包？（下）

从终端来看包是发布成功了，我们打开我们的npmjs来看，包是否存在。

哈哈，这不就是我们发布的包吗？？

Tip：如果推送不成功，说明可能存在同名的包，请改下package.json里的name再发布。具体的命令以及错误处理地址：❤️npm常用命令以及npm publish常见问题处理方法❤️_纸飞机博客-CSDN博客

修改了包后再publish报错就需要修改package.json中的version，相当于发布一个新的版本。例如第一次提交的1.0.0 => 1.0.1 ，第二次便可以发布了。

🔥四、使用组件库

❤️1、npm install 组件库

npm i my_npm_comp

包已经安装成功我们接下来引入。

❤️2、使用组件库

我们以vue为例，注意由于我们用的是原生js做的组件库，故可用在任何场景，当然你如果用vue或者react写的也是可以作为组件库的。

App.vue

<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>

我们来演示演示：

使用非常完美。就这样一个完整的组件库完美制作成功了。组件库不仅限于使用原生js来制作哦！小伙伴们可以自己动手尝试一遍哦，也可以自己做一套把常用的方法上传上去，随取随用，很舒服的。