总结田鼠科技前端团队在Vue3项目中的工程化实践经验，涵盖构建、测试、部署全流程。
项目背景
田鼠科技前端团队在2023年底全面启动了技术栈升级，将核心产品的前端框架从Vue2迁移至Vue3，同时引入TypeScript以提升代码质量和开发效率。本文将分享我们在迁移和工程化建设中的经验。
技术选型
- 框架：Vue 3.4 + Composition API
- 语言：TypeScript 5.x，strict模式
- 构建工具：Vite 5.x
- 状态管理：Pinia
- 路由：Vue Router 4.x
- UI组件库：自研组件库 + 少量Element Plus
- 测试：Vitest + Playwright
- 代码规范：ESLint + Prettier + Husky
工程化实践要点
1. 组件设计模式
采用"容器组件 + 展示组件"的分层模式，容器组件负责数据获取和业务逻辑，展示组件只负责UI渲染。这种模式让组件职责清晰，测试和复用更加方便。
2. TypeScript 类型体系
建立了完善的类型定义体系，包括API响应类型、业务实体类型、组件Props类型等。通过严格的类型约束，在编译阶段就能捕获大量潜在bug。
3. 自动化测试
单元测试覆盖率要求85%以上，关键业务逻辑覆盖率要求100%。使用Playwright进行E2E测试，覆盖核心用户流程。
4. CI/CD流水线
基于GitLab CI搭建了完整的CI/CD流水线，包含代码检查、单元测试、构建、部署等环节，代码合并到主干后自动部署到预发布环境。