封装组件库并上传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)

拖延症太可怕!!!

相关推荐
李明卫杭州3 分钟前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-20 分钟前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx40 分钟前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡
C+ 安口木41 分钟前
CSS通用优惠券样式
前端·css
小趴菜82271 小时前
安卓人机验证View
android·java·前端
闲人编程2 小时前
2025年,如何选择Python Web框架:Django, Flask还是FastAPI?
前端·后端·python·django·flask·fastapi·web
光影少年2 小时前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
Aoda2 小时前
企业级项目结构设计的思考与实践 —— 以 PawHaven 为例
前端·架构
若无_2 小时前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js
玄魂2 小时前
一键生成国庆节祝福海报,给你的朋友圈上点颜色
前端·javascript·数据可视化