封装组件库并上传npm源

入职新公司时,要做低代码平台,涉及H5改造,就研究了下私有组件库,一直想记录下,但一直拖延,一转眼两年已过,赶紧整理下吧!

1、采用vue框架,使用命令 npm create vue@latest创建项目

过程可自主选择,在这里单元测试就不选了,直接选择空白项目,更好操作

2、初始化项目后进行git管理,添加远程地址,可跳过此步骤

git init

git remote add origin xxx

3、添加测试文件

src下新建components文件夹与测试组件,在这里简单写两个即可

Button

UserInfo

index.ts

3.1 测试组件否是可用

main.ts中导入

import UI from './components'

app.use(UI)

3.2 App.vue中使用

3.3 页面显示正常

4、配置

4.1 新建.npmignore忽略文件

4.2 配置打包信息

vite.config.ts

4.3 打包 npm run build

.es.js文件可以直接在其他vue项目中main.ts直接引用使用,类似3.1步骤

javascript 复制代码
import UI from '../public/xjg-ui.es.js'
import '../public/xjg-ui.css'

app.use(UI)

4.4 配置npm信息

*package中private设置为false

*增加main属性,指定访问入口文件

"main": "dist/xjg-ui.umd.js",

*version每次修改版本即可

5、上传npm

*如没有npm账号,去官网注册一个即可,很简单

*在根目录打开终端查看npm源地址是否为官网的,如果不是需要修改,否则上传会失败

查看 npm config get registry

官网地址 registry.npmjs.org/

登录npm npm login

注:没登录过会提示打开链接进行登录

*成功后准备上传文件,输入npm publish

注:npm上已有此名称,换个名称即可

*登录官网查看

6、测试

在自己的项目中拉取安装 npm i xjg-ui

mait.ts中注册使用

javascript 复制代码
import UI from 'xjg-ui'
import 'xjg-ui/dist/xjg-ui.css'
app.use(UI)

拖延症太可怕!!!

相关推荐
浪里行舟24 分钟前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
DoraBigHead2 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js
lecepin3 小时前
AI Coding 资讯 2025-10-22
前端·javascript·后端
BumBle4 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app