创建第一个项目

动手实践

跟着这个教程，一步步创建你的第一个项目！我们会以一个「个人博客系统」为例，带你完整体验整个流程。

📋 前置要求

已完成环境安装（Node.js、pnpm 等）

已阅读「如何写好需求」文档

准备好你的项目想法

🚀 完整流程概览

第1步：开始对话 → 第2步：描述需求 → 第3步：确认需求 → 第4步：选择技术栈 → 第5步：生成代码 → 第6步：下载运行

💬 第 1 步：开始对话

进入项目创建页面后，你会看到一个 AI 对话界面。在这里，你可以用自然语言描述你想要的项目。

AI 助手会帮助你

不用担心说得不够专业！AI 助手会引导你补充细节，帮你把模糊的想法变成清晰的需求。

📝 第 2 步：描述需求

向 AI 助手描述你想要做什么。以下是一个博客系统的示例对话：

示例对话

你说： "我想做一个个人博客系统，自己写文章，别人可以来看和评论。"

AI 回复： "明白了，你想做个个人博客来发布文章。通常博客会包含这些功能：

1. 写文章、编辑、删除文章
2. 给文章分类和打标签
3. 读者可以评论文章
4. 搜索文章内容
5. 文章可以设为草稿或发布
6. 统计文章阅读量

这些功能里，哪些是你需要的？还有其他想要的吗？"

你说： "1、2、3、5 都需要。另外我想要深色模式，还有一个「关于我」的页面。"

AI 回复： "好的，我来总结一下需求..."

需求描述要点

写需求的关键

1. 明确功能点：不要说"管理文章"，而是说"可以发布、编辑、删除文章"
2. 描述用户角色：谁会使用这个系统？管理员？普通用户？
3. 说明业务规则：比如"草稿不对外显示"、"评论需要审核"
4. 控制范围：先做核心功能，不要一次想做太多

✅ 第 3 步：确认需求

当 AI 收集到足够信息后，会给你一个需求总结

请仔细确认！

这是最后一次修改需求的机会！一旦开始生成，中途修改需求会影响整体规划质量。

确认没问题后，回复"确认"或"开始生成"即可。

⚙️ 第 4 步：选择技术栈

确认需求后，你需要选择项目的技术栈：

选项	可选项	建议
前端框架	Vue 3 / React	初学者推荐 Vue 3
后端框架	NestJS / Express / Django / FastAPI / Spring Boot	初学者推荐 NestJS
UI 组件库	Naive UI / Element Plus / Ant Design	推荐 Naive UI
数据库	MySQL / PostgreSQL / SQLite	开发测试推荐 SQLite，想部署推荐 MySQL

不知道选什么？

如果你不确定技术栈，可以选择我们的推荐组合 ：

• 前端：Vue 3 + Naive UI

• 后端：NestJS

• 数据库：SQLite（便于本地开发）

🎯 第 5 步：生成代码

点击 「生成项目」 按钮，坐等魔法发生！

生成过程解析

生成过程分为几个阶段，你可以实时看到进度：

┌─────────────────────────────────────────────────────────────┐
│  🔄 阶段1：需求分析与计划生成（约 1-2 分钟）               │
│     ├── 分析需求文档                                        │
│     ├── 设计数据模型（实体、字段、关系）                   │
│     ├── 规划 API 接口                                       │
│     └── 生成开发计划（任务拆分、迭代规划）                 │
├─────────────────────────────────────────────────────────────┤
│  🔄 阶段2：项目初始化（约 30 秒）                          │
│     ├── 创建项目结构                                        │
│     ├── 安装依赖                                            │
│     └── 配置基础设施                                        │
├─────────────────────────────────────────────────────────────┤
│  🔄 阶段3：代码生成（主要阶段，约 3-10 分钟）              │
│     ├── 迭代1：用户认证模块                                │
│     ├── 迭代2：核心业务后端                                │
│     ├── 迭代3：核心业务前端                                │
│     ├── 迭代N：...                                          │
│     └── 最终迭代：收尾优化                                 │
├─────────────────────────────────────────────────────────────┤
│  ✅ 完成！                                                  │
└─────────────────────────────────────────────────────────────┘

为什么要分迭代？

我们按照迭代来生成代码，每个迭代完成一部分功能：

• 先生成后端接口
• 再生成前端 API 调用文件
• 然后生成前端页面
• 每个迭代都会进行测试验证

这样可以确保前后端类型完全对齐，避免接口不匹配的问题。

生成完成

当你看到 ✅ 完成 时，项目就生成好了！你会得到一个完整的项目压缩包。

📁 第 6 步：下载并查看项目

项目结构

下载解压后，你会看到这样的结构：

my-blog

frontend // 前端项目

backend // 后端项目

README.md // 项目说明

plan.md // 开发计划（参考）

data-model.md // 数据模型（参考）

各文件说明

文件/目录	说明
frontend/	前端项目，使用选择的前端框架
backend/	后端项目，使用选择的后端框架
README.md	项目说明，包含运行指南
plan.md	开发计划，可以了解项目是如何设计的
data-model.md	数据模型，可以了解数据库结构

▶️ 第 7 步：运行项目

关于运行命令

以下命令以 NestJS + Vue 3 技术栈为例。如果你选择了其他技术栈，请参考对应的运行指南：

• 📦 后端运行指南 - 各后端框架的启动方式
• 🖥️ 前端运行指南 - 各前端框架的启动方式

安装依赖

bash

        $
        # 进入项目目录
cd my-blog

# 安装后端依赖
cd backend && pnpm install

# 安装前端依赖
cd ../frontend && pnpm install

      

启动后端

打开一个终端，启动后端服务：

bash

        $
        cd backend && pnpm run start:dev
      

等待看到类似这样的输出：

[Nest] LOG [NestApplication] Nest application successfully started
[Nest] LOG Application is running on: http://localhost:3000

启动前端

打开另一个终端，启动前端服务：

bash

        $
        cd frontend && pnpm run dev
      

等待看到：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/

访问项目

打开浏览器，访问：

• 🖥️ 前端：http://localhost:5173
• 🔌 后端 API：http://localhost:3000

恭喜！

如果你能看到项目首页，说明一切正常！🎉

现在你可以：

• 使用默认账号登录后台（通常是 admin / admin123）
• 尝试各项功能
• 查看生成的代码，学习项目结构

📖 理解生成的代码

后端代码结构（以 NestJS 为例）

backend/
├── src/
│   ├── modules/           # 业务模块
│   │   ├── auth/          # 认证模块
│   │   ├── user/          # 用户模块
│   │   └── article/       # 文章模块
│   ├── common/            # 通用组件
│   └── main.ts            # 入口文件
├── prisma/                # 数据库相关
│   └── schema.prisma      # 数据模型定义
└── package.json

前端代码结构（以 Vue 3 为例）

frontend/
├── src/
│   ├── api/               # API 调用文件
│   ├── views/             # 页面组件
│   ├── components/        # 公共组件
│   ├── stores/            # 状态管理
│   ├── router/            # 路由配置
│   └── main.ts            # 入口文件
└── package.json

学习建议

生成的代码是很好的学习材料！你可以：

1. 查看 plan.md 了解项目是如何设计的
2. 查看 data-model.md 了解数据库结构
3. 查看 modules/xxx/ 目录，学习一个功能模块是如何实现的
4. 从简单功能开始修改，逐步熟悉代码

❓ 遇到问题？

常见问题快速解决

问题	可能原因	解决方案
pnpm 命令找不到	未安装 pnpm	运行 npm install -g pnpm
后端启动报错	数据库未初始化	运行 pnpm prisma db push
前端显示空白	后端未启动	确保后端正在运行
端口被占用	之前的进程未关闭	杀掉占用端口的进程或换端口

更多帮助

• 📚 运行指南 - 各技术栈的详细运行说明
• ❓ 常见问题 - 更多问题解答
• 💬 遇到无法解决的问题？欢迎反馈！

完成了！

恭喜你完成了第一个项目的创建和运行！🎉

接下来你可以：

• 尝试修改一些简单的代码，看看效果
• 创建你自己的项目
• 学习更多进阶用法