Vue3+vite实现组件上传npm并应用

场景：就是A项目的组件需要在B项目中使用

下面举例的是把a项目pagination分页组件上传到npm，在b项目使用

采坑日记：封装的组件一定要起name要不调用不成功

1.1 配置打包

1.1 首先在公用组件components文件夹下创建index.js文件，

 1.2 index.js

 1.3 vite.config.js

 1.4 package.json

 执行npm run build打包，出现如图文件夹则代表打包成功

 2.1 上传npm官网

2.1 cd lc-project 执行npm init -y，我的配置如下图

name：上传后的名称

description：版本描述

version：版本号

 2.2 上传到npm，首先得注册个npm账号 官网 记住用户名、密码和邮箱，发布的时候会用到

 2.3 设置npm源，一般都是淘宝镜像，需要切换官方镜像

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

 2.4 文件根目录打开终端，输入npm login

   2.5 在v3-o\lc-project目录下执行 npm publish 命令，出现  + [email protected] 则代表上传成功，可以官网查看下

 3.1 B项目中应用

  3.1 打开终端执行npm i lc-project

  3.2然后在main.js中

import "../node_modules/lc-project/style.css"; //引入组件样式
import lcProject from "lc-project"; //引入下载后的组件
app.use(lcProject);
app.mount("#app");

  3.3 在B项目组件中直接使用就行