Vue3+vite实现组件上传npm并应用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3+vite实现组件上传npm并应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

1.2 index.js

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

1.3 vite.config.js

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

1.4 package.json

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

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

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

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

name：上传后的名称

description：版本描述

version：版本号

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

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

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

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

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

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

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

Vue3+vite实现组件上传npm并应用,npm,前端,node.js

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项目组件中直接使用就行

Vue3+vite实现组件上传npm并应用,npm,前端,node.js 文章来源地址https://www.toymoban.com/news/detail-604892.html

到了这里，关于Vue3+vite实现组件上传npm并应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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