vibe-coding-cn/i18n/zh/documents/实战案例/README.md

104 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 🎬 实战案例
> 从 0 到 1 的完整 Vibe Coding 项目案例
---
## 案例列表
| 案例 | 难度 | 技术栈 | 耗时 | 状态 |
|:---|:---|:---|:---|:---|
| [Todo App](./01-todo-app.md) | ⭐ 入门 | HTML/CSS/JS | 30 分钟 | ✅ 完成 |
| [个人博客](./02-blog-system.md) | ⭐⭐ 中等 | Next.js/MDX | 2-4 小时 | ✅ 完成 |
| [AI 聊天机器人](./03-chatbot.md) | ⭐⭐ 中等 | Python/FastAPI | 1-2 小时 | ✅ 完成 |
| [命令行工具](./04-cli-tool.md) | ⭐⭐ 中等 | Python/Click | 1-2 小时 | ✅ 完成 |
| [Chrome 扩展](./05-chrome-extension.md) | ⭐⭐ 中等 | JS/Chrome API | 2-3 小时 | ✅ 完成 |
---
## 快速开始
每个案例都包含:
1. **开始前的提示词** - 直接复制给 AI
2. **项目结构** - 清晰的目录规划
3. **核心代码** - 关键实现片段
4. **验收清单** - 确保功能完整
5. **进阶挑战** - 继续提升
### 使用方式
1. 选择一个感兴趣的案例
2. 复制「第一步」的提示词给 AI
3. 跟着 AI 的指导一步步完成
4. 对照验收清单检查功能
---
## 案例详情
### ⭐ 入门级
#### [Todo App](./01-todo-app.md)
最简单的入门项目30 分钟完成一个待办事项应用。
- 技术栈:纯 HTML/CSS/JavaScript
- 学习重点DOM 操作、本地存储
### ⭐⭐ 中等级
#### [个人博客](./02-blog-system.md)
构建一个支持 Markdown 的个人博客系统。
- 技术栈Next.js + MDX + Tailwind CSS
- 学习重点:静态生成、文件系统路由
#### [AI 聊天机器人](./03-chatbot.md)
接入 AI API 的聊天机器人。
- 技术栈Python + FastAPI + OpenAI API
- 学习重点API 调用、流式响应
#### [命令行工具](./04-cli-tool.md)
实用的文件批量重命名工具。
- 技术栈Python + Click + Rich
- 学习重点CLI 开发、文件操作
#### [Chrome 扩展](./05-chrome-extension.md)
网页笔记助手浏览器扩展。
- 技术栈JavaScript + Chrome API
- 学习重点:扩展开发、本地存储
---
## 贡献案例
欢迎提交你的 Vibe Coding 实战案例!
### 格式要求
```markdown
# 实战案例:项目名称
> 难度:⭐⭐ | 预计时间X 小时 | 技术栈XXX
## 🎯 项目目标
## 📋 开始前的准备
## 🏗️ 项目结构
## 🔧 核心代码
## 🚀 部署/使用
## ✅ 验收清单
## 💡 进阶挑战
```
### 提交方式
1. Fork 本仓库
2.`i18n/zh/documents/实战案例/` 添加案例文件
3. 更新本 README 的案例列表
4. 提交 Pull Request
---
## 相关资源
- [从零开始 Vibe Coding](../从零开始vibecoding/)
- [常见坑汇总](../常见坑汇总/)
- [提示词库](../../prompts/)