🎉 欢迎使用 AI合租 文档系统!返回主站 →
文档中心
💻 Vibe Coding
Day 7: 项目初始化

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 快速创建不同类型的项目模板