在现代化的前端开发中，封装一套属于自己的UI组件库Yi经成为提升研发效Neng和保障产品体验一致性的关键步骤。

咱就是说先kankan我们的项目技术栈有哪些，哈哈。

node：v2.18.20 "@commitlint/cli": "^17.0.0", "@types/node": "^20.12.7", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "@vitejs/plugin-vue": "5.0.4", "@vitejs/plugin-vue-jsx": "^3.1.0", "@vue/compiler-sfc": "^3.4.21", "@vue/runtime-dom": "^3.4.21", "autoprefixer": "^10.4.19", "ava": "^6.1.3", "eslint": "^9.2.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "fs-extra": "^11.2.0", "husky": "^9.0.11", "lint-staged": "^15.2.2", "postcss": "^8.4..1", // 不对，不应该是链接 postcss-preset-env: ^10..3", // 同样，这里也不对 prettier: ^3..2", // 改为正常的版本号表示 sass-embedded: ^1..1", // 同上 ts-node: ^10..2", // 同上 tsconfig-paths: ^4..0", // 同上 typescript: ^5..2", // 同上 vite: 5..0", // 同上 vue-cli-plugin-typescript: ^0..1", // 同上 vue-tsc: ^2..3"

说实话，这些版本号kan着头晕，咱就记住是vue3 + typescript + vite就行了你懂的。

构建my-ui库，简单来说就是运行npm run lib命令。

上传my-ui到npm，需要在my-ui/lib文件夹下执行命令npm login登录，然后npm publish发布。

安装my-uihen简单，使用npm install my-ui命令就行了。

按需引入组件有两种方式：

// 方式一 import { MyButton, MyHeader, MyTab } from 'my-ui' // 方式二 import MyButton from 'my-ui/button' import MyHeader from 'my-ui/header' import MyTab from 'my-ui/tab' import MyNumgrid from 'my-ui/numgrid' my-ui组件库全量引入

全量引入组件也hen简单：import myUi from 'my-ui' import 'my-ui/style.css' const app = createApp app.use.mount 查kan组件效果

示例说明：要求对属性进行注释说明。

<button class="xc-font-size10, xc-margin10">{{ buttonText }}</button>

示例说明：使用rem单位，默认1rem = 10px。

所有类名以 xc- 开头，比如xc-paddingT10表示上内填充为1rem。

// 标准版，默认1rem = 10px $sizes-yound: ( : .1rem, : .2rem, ... : 10rem );

.xc-young { @each $key, $value in $sizes-yound { .xc-font-size#{$key} { font-size: $value; } ... } }

创建项目之后我们就Ke以kan到各种各样的组件效果了比如xc-padding10表示内填充为1rem。

通过公共方法获取主题，并在组件根节点中设置该主题，实现换肤功Neng。

所有类名以 xc- 开头，像素采用rem为单位。

template-vue3主工程的html, body设置为特定字体大小和行高。

这样我们就完成了一个简单的UI组件库的创建和上传。