sard

介绍

sard 是一套基于 Vue3 框架开发的兼容多端的 UI 组件库。

特性

• 🧩 121+个高质量组件，覆盖移动端主流场景
• 🌿 支持按需引入和 Tree Shaking
• 📖 详尽的文档和案例展示
• ʦ 使用 TypeScript 编写，提供完整的类型定义
• 🌈 支持定制主题
• 🌍 国际化支持
• 🌙 支持暗黑模式
• 🧪 单元测试覆盖率超过 80%，保障稳定性
• ⭐️ 零外部依赖，不依赖三方 npm 包

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源。

更新日志

更新日志

如何维护

前提条件

• 确保 node >= v22.22.2
• 建议使用 pnpm 包管理器
• 建议使用 vscode 编辑器

克隆仓库到本地

git clone https://github.com/sutras/sard.git

安装依赖

pnpm install

运行开发环境

npm run dev

运行上面命令后会生成四个链接：

Local:   http://localhost:5173/mobile/    （演示）
Network: http://192.168.1.121:5173/mobile/ (局域网演示）
Local:   http://localhost:7761/           （文档）
Network: http://192.168.1.121:7761/       （局域网文档）

测试

npm run test

构建文档站点

npm run build:site

预览构建的文档站点

npm run preview

构建组件库

npm run build

部署文档站点到 github pages

npm run deploy

发布组件库到 npm

npm run publish

修复问题流程

1. 修复问题
2. 测试 npm run test
3. 修改版本号 packages/sard/package.json
4. 暂存 git add .
5. 提交 git commit -m 'fix: '
6. 给提交打标签 npm run tag
7. 生成 changelog 并暂存、提交 npm run changelog && git commit -a -m 'chore: changelog'
8. 打包组件库 npm run build:sard
9. 发布到 npm npm run publish:sard
10. 推送代码和标签 npm run push
11. 打包&部署文档 npm run deploy

新增组件流程

1. 运行 npm run nc 命令创建组件
2. 运行 npm run nsc 命令创建子组件
3. 编写组件代码（接口、类型、结构、样式、交互）
4. 编写案例代码
5. 编写组件文档
6. 编写测试用例
7. 分别在以下环境进行测试：
   • 桌面端浏览器
   • 移动端浏览器
8. 从上面的“修复问题流程”步骤2开始走一遍

贡献者

感谢这些优秀的人：