前端架构：从0到上线 - 完整提示词体系
🚀 前端架构：从0到上线 - 完整提示词体系
📋 阶段一：需求分析与技术选型
1.1 业务需求分析
我计划开发一个[电商平台/后台管理系统/SaaS应用]，请帮我：
1. 核心功能梳理
- 主要用户角色：[买家/卖家/管理员]
- 核心业务流程：[浏览商品-下单-支付]
- 关键数据实体：[用户、商品、订单]
2. 非功能性需求
- 预期用户量：[日活1000/月活10000]
- 性能要求：[首屏加载<2s，LCP<2.5s]
- 安全要求：[登录验证、数据加密]
3. 特殊需求
- 国际化支持：[中/英双语]
- 多端适配：[桌面/移动端响应式]
- 第三方集成：[支付、短信、地图]
请给出前端架构选型建议和技术栈方案。
1.2 技术栈决策
基于以下业务需求：
- 应用类型：[单页应用/服务端渲染/静态站点]
- 团队规模：[1人/5-10人/20+人]
- 开发周期：[1个月/3个月/6个月]
- 技术偏好：[React生态/Vue生态/其他]
请推荐完整的技术栈组合：
1. 核心框架及理由
2. 状态管理方案
3. 路由解决方案
4. 样式方案选择
5. 构建工具配置
6. 测试策略
7. 部署方案
🏗️ 阶段二：项目初始化
2.1 脚手架生成
使用以下技术栈创建项目脚手架：
- 框架：[Next.js 14 / Vite + React 18 / Vue 3 + Vite]
- 语言：[TypeScript 5.x]
- 包管理：[pnpm]
- 代码规范：[ESLint + Prettier + Husky]
- CSS方案：[Tailwind CSS / styled-components / UnoCSS]
- 组件库：[shadcn/ui / Ant Design / Element Plus]
请生成：
1. package.json完整依赖配置
2. tsconfig.json TypeScript配置
3. 项目目录结构
4. 基础环境变量配置
5. 开发/构建脚本
6. Git忽略文件配置
2.2 核心架构配置
为我的[Next.js/React/Vue]项目配置企业级架构：
1. 目录结构设计
- 按功能模块划分组织
- 共享组件统一管理
- 工具函数分类存放
- 类型定义集中管理
2. 构建优化配置
- 分包策略（chunk splitting）
- 压缩优化（gzip/brotli）
- 图片优化配置
- PWA支持（如果需要）
3. 开发环境配置
- 热重载配置
- Mock数据方案
- 代理配置
- 错误边界
生成完整配置文件，包含详细注释。
🔧 阶段三：核心模块开发
3.1 路由架构设计
设计适用于[电商平台]的路由系统：
1. 路由分层
- 公开路由：/home, /products, /login
- 认证路由：/dashboard, /orders, /profile
- 管理路由：/admin/users, /admin/products
2. 路由保护机制
- 基于角色的权限控制
- 路由懒加载实现
- 404页面处理
- 路由守卫配置
3. 动态路由需求
- 商品详情页：/products/:id
- 用户个人页：/user/:username
- 嵌套路由：/dashboard/settings/notifications
请生成路由配置文件和权限验证组件。
3.2 状态管理架构
设计全局状态管理方案：
应用特点：
- 多页面共享数据：[用户信息、购物车、主题]
- 需要持久化状态：[登录状态、用户偏好]
- 复杂异步操作：[API调用、数据同步]
请实现：
1. 状态分层设计（全局/模块/页面）
2. 持久化方案（localStorage/cookies）
3. 异步状态管理（RTK Query/TanStack Query）
4. 性能优化（memoization/selector）
5. TypeScript类型安全
生成核心状态管理代码和示例用法。
3.3 API通信层
设计企业级API通信层：
技术栈：[Axios / fetch API]
要求：
1. 请求拦截器（token自动注入）
2. 响应拦截器（统一错误处理）
3. 取消请求机制
4. 重试策略
5. 请求缓存
6. 分页参数标准化
7. 文件上传支持
8. WebSocket集成
生成：
- API客户端封装
- 类型定义
- 错误处理工具
- 使用示例
🎨 阶段四：UI组件系统
4.1 基础组件库
创建可复用的基础组件库：
1. 表单组件
- Input、Select、DatePicker、Upload
- 表单验证系统
- 表单状态管理
2. 数据展示组件
- Table（支持排序、筛选、分页）
- Card、List、Grid
- 空状态、加载状态
3. 交互组件
- Modal、Drawer、Notification
- Dropdown、Tooltip、Popover
4. 布局组件
- Container、Grid、Flex
- Header、Sidebar、Footer
要求：
- 支持主题定制
- 完整的TypeScript类型
- 无障碍访问支持
- 响应式设计
- 单元测试覆盖
4.2 业务组件封装
基于电商业务封装业务组件：
1. 商品卡片组件
- 图片懒加载
- 价格显示（折扣、原价）
- 库存状态
- 添加到购物车按钮
2. 购物车组件
- 商品数量增减
- 价格计算
- 优惠券应用
- 结算流程
3. 用户地址管理组件
- 地址增删改查
- 地图选点
- 默认地址设置
生成组件代码，包含Props类型定义和使用示例。
⚡ 阶段五：性能优化
5.1 构建优化
优化[Next.js/Vite]项目构建性能：
1. 代码分割策略
- 路由级代码分割
- 组件懒加载
- 第三方库动态导入
2. 资源优化
- 图片压缩和WebP转换
- 字体子集化
- SVG雪碧图
3. 缓存策略
- CDN缓存配置
- Service Worker缓存
- 浏览器缓存头设置
4. 监控配置
- Web Vitals监控
- 错误追踪
- 性能分析
生成优化配置和关键代码。
5.2 运行时性能
优化前端运行时性能：
1. 渲染优化
- React.memo、useMemo、useCallback
- 虚拟滚动列表实现
- 图片懒加载和占位符
2. 内存管理
- 事件监听器清理
- 定时器管理
- WebSocket连接管理
3. 网络优化
- 请求合并
- 预加载策略
- 离线缓存
4. 用户感知优化
- 骨架屏实现
- 渐进式图片加载
- 过渡动画优化
生成关键优化代码和性能监控工具。
🧪 阶段六：测试策略
6.1 测试框架配置
配置完整的测试环境：
技术栈：
- 单元测试：[Vitest / Jest]
- 组件测试：[React Testing Library / Vue Test Utils]
- E2E测试：[Cypress / Playwright]
- 集成测试：[MSW模拟API]
请生成：
1. 测试环境配置文件
2. 测试工具函数
3. Mock数据工厂
4. 测试覆盖率配置
5. CI/CD测试集成脚本
6.2 测试用例编写
为以下组件编写测试用例：
组件：[用户登录表单]
测试场景：
1. 表单验证测试
- 空表单提交
- 无效邮箱格式
- 密码长度验证
2. 交互测试
- 输入框输入
- 显示/隐藏密码
- 记住登录状态
3. 集成测试
- 成功登录流程
- 登录失败处理
- 网络异常处理
生成完整的测试文件，包含各种边界条件。
🚢 阶段七：部署与监控
7.1 CI/CD流水线
配置GitHub Actions CI/CD流水线：
阶段：
1. 代码检查
- ESLint检查
- TypeScript编译检查
- 代码规范检查
2. 测试阶段
- 单元测试运行
- 组件测试
- E2E测试
3. 构建阶段
- 生产环境构建
- 打包优化
- 静态资源上传
4. 部署阶段
- 部署到[Vercel/Netlify/AWS S3]
- 环境变量注入
- 数据库迁移（如需要）
生成完整的.github/workflows/ci-cd.yml配置。
7.2 生产环境监控
配置生产环境监控：
1. 错误监控
- Sentry配置
- 错误边界实现
- 用户行为追踪
2. 性能监控
- Web Vitals实时监控
- 自定义性能指标
- 慢加载追踪
3. 业务监控
- 用户转化率追踪
- 关键功能使用统计
- A/B测试框架
4. 日志系统
- 结构化日志
- 日志级别管理
- 日志聚合分析
生成监控配置代码和Dashboard示例。
📚 阶段八：文档与维护
8.1 项目文档
生成完整的项目文档：
1. 开发文档
- 环境搭建指南
- 代码规范说明
- 组件使用示例
2. API文档
- 接口文档
- 类型定义说明
- 错误码说明
3. 部署文档
- 生产环境部署步骤
- 环境变量配置
- 故障排查指南
4. 维护文档
- 代码架构说明
- 性能优化指南
- 常见问题解答
使用TypeDoc/Vitepress生成文档站点配置。
🔄 快速启动模板
一键生成项目
基于以下需求创建完整项目：
项目名称：E-Commerce Admin
技术栈：Next.js 14 + TypeScript + Tailwind CSS + shadcn/ui
功能模块：
1. 用户认证系统
2. 商品管理CRUD
3. 订单管理
4. 数据统计面板
5. 系统设置
请生成：
- 完整项目结构
- 核心业务代码
- 数据库Schema设计（如需要）
- 部署配置文件
增量开发指令
// 添加新功能
"为现有电商项目添加优惠券功能，包含：
- 优惠券管理后台界面
- 优惠券领取和使用逻辑
- 订单结算时优惠计算
- 优惠券统计报表
生成完整代码，保持现有代码风格。"
// 性能优化
"分析当前项目性能瓶颈，针对以下问题优化：
- 商品列表页加载慢
- 图片资源过大
- 首屏渲染时间过长
提供具体优化方案和代码修改。"
调试与修复
"当前遇到问题：[具体错误描述]
错误现象：[页面表现]
相关代码：[@file_path:line_number]
请分析：
1. 问题根本原因
2. 修复方案
3. 预防措施
4. 影响范围评估"
🎯 使用技巧
上下文管理
// 提供完整上下文
"项目背景：在线教育平台，使用Next.js + TypeScript
当前任务：开发课程播放页面
已有组件：VideoPlayer、CourseSidebar、CommentSection
需求：添加播放速度控制、字幕切换、画质选择功能
生成代码，集成到现有组件中。"
分步骤执行
"任务：实现用户评论系统
步骤1：设计数据库Schema和API接口
步骤2：创建评论组件UI
步骤3：实现评论发布和加载功能
步骤4：添加评论审核和敏感词过滤
请分步骤生成代码，每步确认后再继续。"
技术选型咨询
"我正在选择前端状态管理方案：
项目特点：
- 大型企业管理后台
- 复杂表单交互
- 实时数据更新
- 离线支持需求
候选方案：Zustand、Redux Toolkit、Vuex Pinia
请对比优缺点，给出推荐和建议实现。"
📌 最佳实践提示
- 明确技术栈：开头说明使用的框架和版本
- 分步骤描述：复杂任务拆分为小步骤
- 提供示例：给出期望的代码结构
- 指定格式：说明输出格式要求
- 保持上下文：引用已有文件或代码
- 限制范围：明确需要生成的部分
示例高效指令：
"@components/UserForm.tsx
修改这个表单组件：
1. 添加邮箱验证规则
2. 增加手机号字段（中国格式验证）
3. 提交时显示加载状态
4. 错误信息国际化
仅生成修改后的代码，保持现有代码风格。"
这套提示词体系覆盖了前端项目从0到上线的全生命周期，Cursor能够快速理解并生成相应代码。
浙公网安备 33010602011771号