封装组件库并上传npm源

用户87261342418512025-09-10 10:06

入职新公司时，要做低代码平台，涉及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

登录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)

拖延症太可怕！！！