Vivace-UI

A Vue.js 3.0 UI Toolkit for Admin

版本迭代

1.将组件封装为组件库

• 使用index.html测试npx vite
• 测试ts功能是否正常
• 测试button组件
• 使用@vitejs/plugin-vue添加一个SFC单文件组件
• 添加shims-vue.d.ts解决不能识别.vue的报错
• 添加@vitejs/plugin-vue-jsx支持tsx文件
• 添加tsconfig.json文件解决JSX 语法报错
• 在 entry.js中导出文件，实现install方法
• 配置打包输出文件格式'esm', 'umd', 'iife'
• demo 测试esm文件

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/mvp

2.使用 UnoCSS 实现原子化 CSS

UnoCSS 是一个拥有高性能且具灵活性的即时原子化 CSS 引擎，可以兼顾产物体积和开发性能。

除此以外 UnoCSS 还可以有更强的可定制性和易用性。

• 完全可定制 - 没有核心实用程序，所有功能都通过预设提供。
• 无需解析、无需 AST、无需扫描，它是即时的（比 Windi CSS 或 Tailwind JIT 快 200 倍）
• ~3.5kb min+gzip - 零依赖和浏览器友好。
• 快捷方式 - 动态别名实用程序。
• 属性模式 - 在属性中分组实用程序
• 纯 CSS 图标 - 使用任何图标作为单个类。
• 检查器 - 以交互方式检查和调试。
• CSS-in-JS 运行时版本。
• CSS Scoping。
• CSS 代码拆分 - 为 MPA 提供最小的 CSS。
• 库友好 - 随你的组件库提供原子样式并安全地限定范围。

UnoCSS 的 github 地址

功能实现

• 引入 UnoCSS 实现原子化 CSS 样式
• 使用安全列表实现在 UnoCSS 中使用变量定制样式
• 引入 @unocss/preset-icons 预设实现字体图标按钮,需要安装@iconify-json/ic

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/unocss

3.添加文档网站

• 利用 Vitepress 搭建生成文档网站
• 引用组件并展示到 Demo；
• 引用 Markdown 插件方便代码 Demo 示例编写。

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/docs

4.搭建 Vitest 单元测试环境

• 配置 Vitest 环境
• button 组件测试用例

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/vitest

5.集成 Eslint + Prettier + Husky 规范化

• 编码与项目结构规范；
• Eslint 代码检查工具；
• Prettier 代码格式化工具；
• Git commit 提交检查脚本；
• Husky + git hook 提交前校验。

Angular 团队 git 提交规范如下，本文严格按照这个规范提交代码：

• type：commit 的类型；
• feat：新功能、新特性；
• fix: 修改 bug；
• perf：更改代码，以提高性能；
• refactor：代码重构（重构，在不影响代码内部行为、功能下的代码修改）；
• docs：文档修改；
• style：代码格式修改, 注意不是 css 修改（例如分号修改）；
• test：测试用例新增、修改；
• build：影响项目构建或依赖项修改；
• revert：恢复上一次提交；
• ci：持续集成相关文件修改；
• chore：其他修改（不在上述类型中的修改）；
• release：发布新版本；
• workflow：工作流相关文件修改。

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/lint

6.发布兼容多种 JS 模块标准的软件包

常见的模块规范:

• IFFE：使用立即执行函数实现模块化 例：(function()) {}；

• CJS：基于 CommonJS 标准的模块化；

• AMD：使用 Require 编写；

• CMD：使用 SeaJS 编写；

• ESM：ES 标准的模块化方案 ( ES6 标准提出 )；

• UMD：兼容 CJS 与 AMD、IFFE 规范。

• 配置 Vite 输出多种格式模块；

• 配置 SourceMap 映射；

• 测试打包结果。

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/build

7.持续集成 CI：基于 Github Action 的回归验证

• 创建工作流 Workflow；
• 创建 Job；
• 运行 CI 服务；
• 颁发 CI 徽章。

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/ci

8.提交软件包到 npm 仓库

• 确定语义化版本；
• 设置持续交付过程 ;
• 引用自动发布徽章。

语义化版本规定:

版本格式：主版本号.次版本号.修订号（MAJOR.MINOR.PATCH）

• 主版本号：当你做了不兼容的 API 修改；
• 次版本号：当你做了向下兼容的功能性新增；
• 修订号：当你做了向下兼容的问题修正。

本章代码参考：https://github.com/xiumubai/vivace-admin/tree/feature/ci

9.使用 vercel 部署文档

登陆官方网站，把 vivace-admin 拉取到仓库中，配置参数，直接 deploy

访问地址：https://vivace-admin.vercel.app/

实现组件库的按需引入

TODO

• 自动添加 changelog
• 自动打 tag
• commitlit 配置
• 改造为 monorepo 模式