如何通过前端开发场景实战提升项目实战能力？

React/Vue项目怎么写AGENTS.md 开头先说说 前面两篇把基础概念讲完了，这篇我们来点实在的，专门聊聊前端项目怎么写AGENTS.md。 我自己在前端项目里踩过不少坑。最开始写AGENTS.md的时候，我把后端那一套搬过来，结果AI该不会的还是不会——它不知道前端用什么构建工具、组件怎么组织、样式怎么写。后来慢慢摸索，才总结出一些前端特有的门道。 React项目的AGENTS.md怎么写 先上一个我在React项目里用的AGENTS.md模板。 # AGENTS.md - React Monorepo 项目 ## 项目架构 基于 pnpm + Turborepo 的 Monorepo 项目，包含多个 React 应用包。 ## 技术栈 - React 18 - TypeScript - Vite - React Router 6 - Zustand（状态管理） - TanStack Query（服务端状态） - Vitest + Testing Library ## 开发命令 ### 安装依赖 ```bash pnpm install 启动开发服务器 pnpm dev # 启动所有 pnpm dev --filter @myapp/web # 启动特定应用 构建 pnpm build pnpm build --filter @myapp/web 测试 pnpm test # 监听模式 pnpm test -- --run # 单次运行 pnpm test -- --coverage # 带覆盖率 代码检查 pnpm lint pnpm typecheck 代码规范 组件规范 使用函数式组件 + Hooks 组件文件使用 PascalCase（如 UserProfile.tsx） 使用 <script setup> 语法糖（Vue 项目） 样式规范 使用 CSS Modules 或 styled-components 样式文件使用 kebab-case（如 user-profile.module.css） 禁止使用全局样式（除 reset/normalize） TypeScript 规范 启用 strict 模式 禁止使用 any 类型 接口使用 I 前缀（如 IUser） 类型定义优先使用 type 状态管理 服务端状态使用 TanStack Query 客户端状态使用 Zustand 组件内部状态使用 useState 目录结构 src/ ├── components/ # 公共组件 ├── features/ # 功能模块 ├── hooks/ # 自定义 Hooks ├── services/ # API 调用 ├── stores/ # Zustand stores ├── types/ # 类型定义 └── utils/ # 工具函数 测试要求 测试文件放在源文件同目录或 tests 目录 测试文件命名：xxx.test.tsx 或 xxx.spec.tsx 单元测试覆盖率达到 70% 以上 提交前必须通过所有测试 UI 组件使用 Testing Library 测试用户行为 注意事项 路由配置在 src/routes/ 目录 API 请求统一使用 services/ 目录下的模块 公共组件必须包含 Storybook stories 图片等静态资源放在 public/ 或 src/assets/ 环境变量使用 .env.local，本地敏感配置使用 .env.local.example 作为模板 这个模板基本上覆盖了React项目的主要方面。你可能会问：为什么要写这么详细？ 我的经验是：前端项目的坑特别多。AI不知道你的组件怎么组织、状态管理用什么方案、路由怎么配置。稍微写漏一点，AI生成的代码就可能和你项目的实际结构对不上。 ## Vue项目的AGENTS.md怎么写 Vue项目的情况有点不一样。Vue 3 的 Composition API 和 React 的Hooks思路比较像，但具体写法上还是有差异的。