组件库

一个轻量级、可定制的 Vue 3 移动端 UI 组件库，基于 TypeScript 开发。

🛠️ 技术栈

Vue 3 - 渐进式 JavaScript 框架 TypeScript - 类型安全的 JavaScript 超集 Vite - 现代前端构建工具 Vitest - 基于 Vite 的测试框架 ESLint + Prettier - 代码质量和格式化 Less - CSS 预处理器 Vant CLI - 组件库构建工具

✨ 特性

• 🚀 基于 Vue 3 + TypeScript 开发
• 📦 开箱即用的高质量组件
• 🛠️ 完整的开发工具链
• 🎨 支持主题定制
• 📱 移动端优先设计
• 💪 99% 单元测试覆盖率
• 📖 详细的文档和示例
• 🍭 支持 Tree Shaking
• 🌍 支持 TypeScript

📦 安装

使用 npm 安装：

npm install components

使用 yarn 安装：

yarn add components

使用 pnpm 安装：

pnpm add components

🚀 快速开始

完整引入

import { createApp } from 'vue';
import Components from 'components';
import 'components/lib/index.css';

const app = createApp();
app.use(Components);

按需引入

import { createApp } from 'vue';
import { Button } from 'components';
import 'components/es/button/style';

const app = createApp();
app.use(Button);

在组件中使用

<template>
  <div>
    <Button type="primary" @click="handleClick">
      点击按钮
    </Button>
  </div>
</template>

<script setup lang="ts">
import { Button } from 'components';

const handleClick = () => {
  console.log('按钮被点击了！');
};
</script>

🔧 开发

环境要求

• Node.js >= 16
• pnpm >= 7

安装依赖

pnpm install

开发模式

启动开发服务器，实时预览组件：

pnpm dev

构建

构建组件库和文档：

pnpm build

只构建组件库：

pnpm build:lib

测试

运行单元测试：

pnpm test

运行测试并生成覆盖率报告：

pnpm test:coverage

代码检查

pnpm lint

类型检查

pnpm type-check

📁 项目结构

components/
├── packages/                 # 组件源码
│   ├── button/              # 按钮组件
│   │   ├── index.ts         # 组件入口
│   │   ├── Button.vue       # 组件实现
│   │   ├── types.ts         # 类型定义
│   │   └── __tests__/       # 单元测试
│   ├── utils/               # 工具函数
│   │   ├── dom.ts           # DOM 工具
│   │   ├── format.ts        # 格式化工具
│   │   └── validate.ts      # 校验工具
│   ├── demo/                # 开发演示
│   └── index.ts             # 组件库入口
├── lib/                     # 构建输出 (CommonJS)
├── es/                      # 构建输出 (ES Module)
├── docs/                    # 文档网站
└── tests/                   # 测试配置

🎯 开发计划

• [x] ✅ 项目基础架构搭建
• [x] ✅ TypeScript 配置
• [x] ✅ 构建工具配置 (Vite + Vant CLI)
• [x] ✅ 测试环境配置 (Vitest)
• [x] ✅ 代码规范配置 (ESLint + Prettier)
• [x] ✅ Button 组件示例
• [ ] 🚧 更多基础组件开发
• [ ] 📝 组件文档编写
• [ ] 🎨 主题定制系统
• [ ] 📱 移动端适配优化
• [ ] 🚀 CI/CD 流程配置
• [ ] 📦 NPM 包发布

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

开发流程

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改动 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

提交规范

请遵循 Conventional Commits 规范：

• feat: 新功能
• fix: 修复
• docs: 文档
• style: 代码格式
• refactor: 重构
• test: 测试
• chore: 构建/工具

📄 开源协议

MIT License

🔗 相关链接

• Vue 3 官方文档
• TypeScript 官方文档
• Vite 官方文档
• Vitest 官方文档

💖 致谢

特别感谢 Vant 项目提供的设计灵感和最佳实践参考。