Day 7: 项目初始化
从零搭建专业级项目脚手架,包含所有必要配置。
项目架构设计
选择技术栈
你:搭建一个电商项目,前端用 React + TypeScript,后端用 Node.js + Express + MongoDB
Claude 会:
- 创建项目目录结构
- 配置开发环境
- 安装核心依赖
- 设置代码规范
目录结构规划
你:按照最佳实践组织项目文件夹结构
典型结构:
project/
├── client/ # 前端代码
│ ├── src/
│ ├── public/
│ └── package.json
├── server/ # 后端代码
│ ├── src/
│ ├── tests/
│ └── package.json
├── shared/ # 共享代码
└── docs/ # 项目文档
前端项目初始化
React + TypeScript 项目
你:用 Vite 创建 React + TypeScript 项目,配置好路由、状态管理、UI 库
Claude 会配置:
- Vite 构建工具
- React Router 路由
- Redux Toolkit 状态管理
- Ant Design UI 组件
- Tailwind CSS 样式
Vue + TypeScript 项目
你:创建 Vue3 + TypeScript 项目,配置 Pinia、Vue Router、Element Plus
Next.js 项目
你:创建 Next.js 全栈项目,配置 API 路由、数据库连接、身份认证
后端项目初始化
Express + TypeScript
你:创建 Express + TypeScript 后端,配置中间件、路由、数据库连接
包含配置:
- Express 服务器
- CORS 跨域处理
- 请求日志记录
- 错误处理中间件
- 环境变量管理
数据库配置
你:配置 MongoDB 连接,创建基础数据模型
你:配置 MySQL + Prisma ORM,设计用户和订单表
开发环境配置
代码规范
你:配置 ESLint + Prettier + Husky,统一代码风格
创建配置文件:
.eslintrc.js
- 代码检查规则.prettierrc
- 代码格式化规则.husky/pre-commit
- Git 提交前检查
环境变量
你:设置开发、测试、生产环境的配置文件
创建:
.env.development
.env.production
.env.example
Docker 配置
你:添加 Docker 配置,支持容器化部署
测试环境搭建
单元测试
你:配置 Jest + React Testing Library,写几个示例测试
API 测试
你:配置 Supertest,为后端接口写测试用例
E2E 测试
你:配置 Playwright,创建端到端测试
CI/CD 配置
GitHub Actions
你:配置 GitHub Actions,自动运行测试和部署
自动化流程
你:设置自动化流程:代码检查 → 运行测试 → 构建项目 → 部署上线
常用项目模板
博客系统
你:创建博客项目模板,包含:
- 文章 CRUD
- 用户系统
- 评论功能
- 标签分类
- SEO 优化
管理后台
你:创建管理后台模板,包含:
- 用户权限管理
- 数据统计图表
- CRUD 操作界面
- 文件上传功能
电商项目
你:创建电商项目模板,包含:
- 商品管理
- 购物车功能
- 订单系统
- 支付集成
- 用户中心
项目配置技巧
路径别名
你:配置路径别名,用 @ 代替 src 路径
环境检测
你:添加环境检测,开发环境显示详细错误,生产环境隐藏敏感信息
热重载配置
你:优化开发服务器配置,提升热重载速度
团队协作配置
Git 工作流
你:设置 Git Flow 工作流,配置分支保护规则
代码审查
你:配置 PR 模板,规范代码审查流程
文档配置
你:用 Storybook 创建组件文档
你:用 Swagger 生成 API 文档
性能优化配置
构建优化
你:配置 Webpack/Vite 构建优化,减少包体积
缓存策略
你:配置浏览器缓存和 CDN 缓存策略
代码分割
你:配置路由级别的代码分割,按需加载
监控配置
错误监控
你:集成 Sentry 错误监控,实时捕获生产环境错误
性能监控
你:配置性能监控,跟踪页面加载时间、API 响应时间
日志系统
你:配置日志系统,记录用户行为和系统事件
项目初始化原则:一次配置好,后面专注写业务代码。工具链越完善,开发效率越高。
第七天完成! 你已经学会搭建专业级项目架构了。明天学习 API 开发。
下一步
Day 8: API 开发 - 设计和实现 RESTful API
练习建议:
- 选一个技术栈,完整搭建一个项目脚手架
- 体验一下完善的开发环境带来的便利
- 试试用 Claude 快速创建不同类型的项目模板