## 技术栈约束 - **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 - ✅ 内存使用合理无泄漏 - ✅ 网络请求优化合理 ### 用户体验 - ✅ 界面美观符合设计规范 - ✅ 交互流程顺畅自然 - ✅ 错误提示清晰有用 - ✅ 响应式设计适配良好 ### 可维护性 - ✅ 代码结构清晰易懂 - ✅ 组件复用性良好 - ✅ 文档完整准确 - ✅ 测试覆盖率充分