详解如何在npmjs上上传和更新属于自己的组件库（下）

🔥三、上传组件库

❤️1、先将npm源切换到npm

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

2、注册npm账号

已有账号可跳过。

首先去npmjs官网注册账号，一定要邮箱验证。

官网地址：npm

当然也可以使用npm命令注册： 看下面

bash终端注册账号：

npm adduser

按上图提示输入账号密码。Tip：输密码时字符不会显示出来，并且去邮箱验证账号，不验证push不了包。

❤️3、登陆账号

已登录账号可跳过。（使用npm whoami这条命令查看）

用命令创建账号会自动登录。官网手动创建的可如下操作：

npm login

我这边用huqinggui这个账号来演示。

❤️4、发布(推送)包

npm publish

从终端来看包是发布成功了，我们打开我们的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来制作哦！小伙伴们可以自己动手尝试一遍哦，也可以自己做一套把常用的方法上传上去，随取随用，很舒服的。