## 技术栈约束
- **Vue3 Composition API优先**:优先使用Composition API,避免Options API混用
- **Element Plus组件规范**:严格遵循Element Plus的设计规范和API使用
- **ESLint + Prettier强制**:所有代码必须通过ESLint检查和Prettier格式化
- **TypeScript类型安全**:关键业务逻辑必须有完整的类型定义
- **浏览器兼容性**:支持现代浏览器,IE11及以下不考虑
## 开发强制规则
- **组件命名规范**:使用PascalCase命名组件,kebab-case命名文件
- **代码提交规范**:遵循Conventional Commits规范
- **性能基准要求**:首屏加载时间 < 3秒,交互响应时间 < 100ms
- **代码覆盖率**:核心业务逻辑单元测试覆盖率 > 80%
- **无障碍访问**:关键功能必须支持键盘导航和屏幕阅读器
## 开发指导原则
- **渐进式开发**:从简单功能开始,逐步增加复杂度
- **组件复用优先**:优先使用现有组件,避免重复造轮子
- **性能意识**:开发过程中持续关注性能影响
- **用户体验导向**:以用户使用体验为核心考量
- **团队协作友好**:代码易读、易维护、易扩展
## Vue3开发标准流程
### 需求分析阶段
1. **业务需求理解**:深入理解业务场景和用户需求
2. **技术方案设计**:选择合适的技术方案和架构模式
3. **接口设计确认**:前后端接口设计和数据结构确认
4. **UI/UX设计评审**:界面设计和交互流程评审
### 开发实施阶段
```mermaid
flowchart TD
A[创建组件结构] --> B[实现基础功能]
B --> C[添加样式和交互]
C --> D[集成API接口]
D --> E[错误处理和边界情况]
E --> F[性能优化]
F --> G[单元测试编写]
G --> H[代码审查]
H --> I[集成测试]
```
### 质量保证流程
1. **代码自检**:ESLint检查、TypeScript类型检查
2. **功能测试**:手动测试核心功能和边界情况
3. **性能测试**:使用Vue DevTools分析性能瓶颈
4. **兼容性测试**:主流浏览器兼容性验证
5. **代码审查**:团队成员代码审查和反馈
### 部署发布流程
```mermaid
graph LR
A[本地测试] --> B[提交代码]
B --> C[CI/CD构建]
C --> D[测试环境部署]
D --> E[功能验收]
E --> F[生产环境部署]
F --> G[线上监控]
```
## 代码质量标准
### 功能完整性
- ✅ 业务需求100%实现
- ✅ 边界情况妥善处理
- ✅ 错误状态友好提示
- ✅ 加载状态合理展示
### 代码质量
- ✅ ESLint检查零警告
- ✅ TypeScript类型完整
- ✅ 组件职责单一清晰
- ✅ 代码注释充分合理
### 性能表现
- ✅ 首屏加载时间 < 3秒
- ✅ 交互响应时间 < 100ms
- ✅ 内存使用合理无泄漏
- ✅ 网络请求优化合理
### 用户体验
- ✅ 界面美观符合设计规范
- ✅ 交互流程顺畅自然
- ✅ 错误提示清晰有用
- ✅ 响应式设计适配良好
### 可维护性
- ✅ 代码结构清晰易懂
- ✅ 组件复用性良好
- ✅ 文档完整准确
- ✅ 测试覆盖率充分