Vibe Coding 实战项目
本章节我们将完整演示 Vibe Coding 的全过程——不是埋头写代码，而是用自然语言描述需求、让 AI 来执行。
最终目标就是不写一行代码，也能做出一个真实可用的 Web 应用。
先搞懂：Vibe Coding 到底是什么
Vibe Coding 这个名字来自 OpenAI 联合创始人 Andrej Karpathy 的一条推文。
他的意思是：你沉浸在产品的「氛围」里，忘记代码细节，只描述你想要什么，AI 帮你实现。
和你现在的编程方式有什么区别
| 传统编程 | Vibe Coding |
|---|---|
| 记忆语法和 API，查文档 | 用自然语言描述意图，AI 生成代码 |
| 逐行手写，自己调试 | 多轮对话迭代，AI 写 + AI 改 |
| 先把整体设计好，再一行行写 | 边聊边做，边做边调整 |
| 遇到 bug 自己搜、自己想 | 错误信息直接丢给 AI，让它修 |
| 你的角色是实现者 | 你的角色是设计者 |
Vibe Coding 的核心工作节奏
整个开发过程遵循一个简单的三步循环：
| 步骤 | 你做什么 | AI 做什么 |
|---|---|---|
| 1. Plan | 描述需求和目标 | 分析需求、给出技术方案 |
| 2. Execute | 确认方案、给出约束 | 生成代码、修改文件 |
| 3. Verify | 运行验证、检查结果 | 修复错误、调整输出 |
每完成一步就验证一步，通过之后再进入下一个循环。
这就是 Vibe Coding 的核心秘诀——不是一次性把所有需求丢给 AI，而是一小步一小步地推进，每步都确认方向正确。
环境准备
只需要三个东西，而且全部免费。
1. VS Code 编辑器
下载地址：https://code.visualstudio.com
VS Code 教程：https://www.runoob.com/vscode/vscode-tutorial.htmlVS Code 支持 Windows / macOS / Linux，完全免费。
2. GitHub Copilot（VS Code 已内置，无需安装）
VS Code 最新版本已经内置了 GitHub Copilot，不需要安装任何扩展。
我们只需要做一件事：
- 打开 VS Code，点击右上角的 账户图标
- 选择 Sign in with GitHub，登录你的 GitHub 账号
- 登录后 Copilot 自动激活
如果没有 GitHub 账号，先去 github.com 免费注册一个。
打开编辑器就能看到 Copilot 入口，只需要登录 GitHub 账号即可，无需去扩展市场安装插件。
点击右上角的小图标就可以调出 Copilot 聊天窗口：
3. Node.js
下载地址：https://nodejs.org
Node.js 教程：https://www.runoob.com/nodejs/nodejs-tutorial.html
选择 LTS 版本，安装后打开终端验证：
node -v # 应显示 v20.x.x 或更高 npm -v # 应显示 10.x.x 或更高
认识几个快捷键
这两个快捷键是你最常用的：
| 快捷键 | 功能 | 什么时候用 |
|---|---|---|
| Ctrl+I（Mac: Cmd+I） | 内联 Chat | 选中一段代码，让 AI 解释或修改它 |
| Ctrl+Shift+I（Mac: Cmd+Shift+I） | Chat 面板 | 和新功能开发相关的大段对话 |
| Tab | 接受补全 | AI 给出灰色建议，按 Tab 接受 |
| Esc | 拒绝补全 | AI 的建议不对，按 Esc 忽略 |
项目立项：我们要做什么
现在我们要用 Vibe Coding 方式构建一个完整的任务管理应用。
功能清单
- 创建、编辑、删除任务
- 任务有三种状态：待办、进行中、完成
- 优先级分三档：高（红色）、中（黄色）、低（绿色）
- 看板视图：三列拖拽改变任务状态
- 深色模式：一键切换
- 数据自动保存到浏览器（刷新不丢失）
- 手机也能用（响应式布局）
技术选型
| 做什么 | 用什么 | 为什么选它 |
|---|---|---|
| 前端框架 | Vue 3 | 上手简单，社区活跃，中文资料多 |
| 构建工具 | Vite | 启动快，Vue 官方推荐 |
| 样式 | Tailwind CSS | 不用写 CSS 文件，直接在 HTML 里写样式类 |
| 数据存储 | localStorage | 浏览器自带，无需后端服务器 |
| 项目名称 | vibe-coding-runoob | 我们的实战项目名称 |
第一轮对话：搭骨架
现在我们开始真正的 Vibe Coding，不是一次性告诉 AI 所有需求，而是一步一步来。
Step 1：创建项目
打开终端，创建项目：
npm create vite@latest vibe-coding-runoob -- --template vue
打开新终端，进入该项目，然后按照 tailwindcss，使用 code . 命令让项目在 VS Code 中打开：
cd vibe-coding-runoob npm install npm install -D tailwindcss @tailwindcss/vite code .
现在 VS Code 打开了项目，按 Ctrl+Shift+I（Mac: Cmd+Shift+I）打开 Copilot Chat 面板，右上角也有个切换面板的按钮：
Step 2：第一次对话
在 Chat 面板里输入下面这段话，就是把你想要的东西用自然语言说出来：
我在开发一个任务管理 Web App，项目名 vibe-coding-runoob。 技术栈：Vue 3 + Vite + Tailwind CSS。 请帮我搭建项目骨架，创建以下文件： 1. src/types/task.ts — 定义 Task 类型 字段：id, title, description, status, priority, dueDate, createdAt status 可选值：'todo' | 'in-progress' | 'done' priority 可选值：'low' | 'medium' | 'high' 2. src/App.vue — 应用主页面 - 顶部导航栏（标题"Vibe Coding Runoob"） - 中间显示任务列表区域 要求： - 使用 Vue 3 script setup 语法 - 使用 Tailwind CSS 做样式 - 界面简洁干净，主色调用 indigo（靛蓝色） - 现在先用假数据展示，后面再接真实功能
AI 会一段一段地输出代码并修改文件代码，你点击 保留 让它自动写入文件。
申请执行命令，你只需要点允许就可以了：
Step 3：验证
AI 代码写完后，会提示我们可以在终端运行：
npm run dev
右上角点击打开终端按钮，然后在终端执行命令：
浏览器打开 http://localhost:5173，看到页面就说明第一步成功了。
完成效果如下：
这就是 Plan → Execute → Verify 的第一轮。你描述了目标，AI 执行了，你验证了结果。后面的每一轮都按这个节奏来。
遇到不懂的代码？
Vibe Coding 不需要你读懂每一行代码。但如果某段代码你完全看不懂，选中它，按 Ctrl+I，输入：
用通俗的中文解释这段代码在做什么
AI 会用你能理解的语言解释它。
第二轮对话：实现任务列表和表单
骨架跑通了，现在来实现真正的功能。
Step 1：任务卡片组件
继续在 Chat 面板输入：
创建 src/components/TaskCard.vue 组件： 功能： - 展示单个任务的信息：标题、描述、优先级标签、截止日期 - 优先级用颜色区分：high 红色、medium 黄色、low 绿色（左边框即可） - 点击左侧复选框标记任务为完成（标题加删除线） - 右上角有删除按钮（× 图标） - 鼠标悬停时卡片微微放大（hover:scale-[1.02]） Props 接收：task（Task 类型） Emit 事件：toggle（切换完成状态）、delete（删除任务）
AI 生成后文件写入点保留，命令执行点允许，最后效果：
然后创建任务列表容器：
创建 src/components/TaskList.vue 组件： 功能： - 接收任务列表，用 TaskCard 展示每一项 - 任务按创建时间倒序排列（最新的在上面） - 顶部有状态筛选按钮：全部 / 待办 / 进行中 / 完成 - 没有任务时显示空状态提示："还没有任务，点击下方按钮创建第一个吧"
Step 2：创建任务表单
创建 src/components/TaskModal.vue 组件： 功能： - 点击"+ 新建任务"按钮打开弹窗 - 表单字段：标题（必填）、描述（选填）、优先级（下拉选择） - 标题为空时显示红色错误提示"标题不能为空" - 点击弹窗外的灰色遮罩关闭弹窗 - 按 ESC 键关闭弹窗 - 提交后用 emit 把新任务传给父组件 使用 v-model 绑定表单数据 使用 Teleport 把弹窗渲染到 body 下
Step 3：把组件拼起来
现在更新 App.vue，把 TaskList 和 TaskModal 组合到一起：
更新 src/App.vue： - 引入 TaskList 和 TaskModal 组件 - 使用 reactive 管理 tasks 数组（先用示例数据） - 实现 addTask 函数：接收 TaskModal 提交的数据，添加到 tasks 数组 - 实现 toggleTask 和 deleteTask 函数 - TaskModal 的显示/隐藏用 ref(false) 控制 示例数据包含 2 条任务，让页面看起来不空
Step 4：验证
在浏览器里手动操作一遍：新建任务 → 点复选框标记完成 → 删除任务。全部功能正常运转后，进入下一轮。
第三轮对话：数据持久化
现在刷新页面任务就没了。我们需要把数据存到浏览器的 localStorage 里。
告诉 AI 你的需求
现在任务数据只存在内存里，刷新就没了。请把数据持久化到 localStorage： 1. 创建 src/utils/storage.ts： - saveTasks(tasks): 把任务数组存为 JSON - loadTasks(): 读取并解析 JSON，读取出错时返回空数组 - 存储键名：vibe-coding-runoob-tasks 2. 更新 src/stores/taskStore.ts： - 用 Vue reactive 管理状态 - 初始化时从 localStorage 加载数据 - 使用 watch 自动监听变化并保存（deep: true） - 导出 addTask、updateTask、deleteTask 函数 - 首次使用时如果没有数据，自动创建 3 条示例任务 3. 更新 App.vue，改为从 taskStore 获取数据和方法
验证
# 在浏览器中： 1. 添加几条任务 2. 刷新页面 → 任务还在！ 3. 按 F12 打开开发者工具 → Application → Local Storage 4. 找到 vibe-coding-runoob-tasks，查看存储的 JSON 数据
如果数据没了，把 F12 控制台里的错误信息粘贴给 AI，让它修复。
第四轮对话：看板视图
需求描述
我想添加一个看板视图（Kanban），文件：src/components/KanbanBoard.vue 功能： - 三列：待办 | 进行中 | 已完成 - 任务卡片显示在对应状态的列中 - 卡片可以拖拽到其他列（用 HTML5 原生拖拽 API） - 拖入新列时自动更新任务的 status - 在 App.vue 顶部加两个 Tab 按钮："列表"和"看板" - 切换时保持数据一致 注意：不需要引入任何拖拽库，用原生的 dragstart、dragover、drop 事件即可。
AI 生成后验证：拖一张卡片从「待办」到「进行中」，确认任务状态更新了。
第五轮对话：深色模式和移动端适配
深色模式
添加深色模式：创建 src/components/ThemeToggle.vue 功能： - 点击按钮切换亮色/深色模式 - 在 html 标签上添加/移除 dark class - 用 localStorage 记住用户选择（键名：vibe-coding-runoob-theme） - 首次访问时跟随系统设置（prefers-color-scheme） - 按钮放在导航栏右侧 同时给所有组件添加 dark: 前缀的深色样式。
移动端适配
适配手机屏幕（375px 宽）： - 看板三列在手机上改成竖向单列布局 - 任务模态框在手机上改成从底部滑出的样式 - 所有按钮的点击区域不小于 44px - 表单输入框字号不小于 16px（防止 iOS 自动缩放） - 导航栏在手机上用汉堡菜单 使用 Tailwind 的响应式类：sm: md: lg:
验证：在浏览器按 F12，切换到手机模式（375px），逐一检查每个页面。
遇到 Bug 怎么办：万能排错模板
这是 Vibe Coding 的「急救包」——遇到任何错误，直接用这个模板：
我遇到了一个问题，帮我修复： 【错误信息】 把终端或浏览器控制台的完整错误粘贴在这里 【我想实现的效果】 描述你期望发生什么 【我已经尝试过的方法】 列出你试过但没解决的操作
AI 会根据错误信息自动定位问题、给出修复方案。你不需要自己分析原因。
让 AI 审查你的代码
每完成一个大功能，在 Chat 里输入：
请审查我当前项目的代码，重点检查： 1. 有没有安全风险 2. 有没有性能问题 3. 错误处理是否完整 4. 有没有可以简化的地方
AI 会逐条给出问题和修复建议。这是有经验的开发者才能做的事——但有了 AI，你也能做到。
部署上线
项目做好了，最后一步是让它上线，任何人都能访问。
推送到 GitHub
$ git init $ git add . $ git commit -m "feat: vibe-coding-runoob 任务管理应用" # 在 github.com 创建同名仓库后： $ git remote add origin https://github.com/你的用户名/vibe-coding-runoob.git $ git push -u origin main
部署到 Vercel
- 访问 vercel.com，用 GitHub 账号登录
- 点击 Add New Project，选择 vibe-coding-runoob 仓库
- Framework 选 Vite，直接点 Deploy
- 等 1-2 分钟，拿到 xxxx.vercel.app 域名
把链接发给朋友，他们就能用你的应用了。
Vibe Coding 总结
写好提示词的公式
好的提示词 = 目标 + 约束 + 上下文
| 不推荐 | 推荐 |
|---|---|
| 帮我做一个任务列表 | 创建 TaskList.vue 组件。功能：展示任务列表，含标题、状态、优先级标签。使用 Tailwind CSS，数据通过 props 传入。不要引入第三方 UI 库。 |
迭代节奏
每次对话 → 只做一个功能 每次修改 → 立刻在浏览器里验证 每个功能完成 → 立刻 git commit 每天结束 → push 到 GitHub
不要攒很多修改再一起测试，那是给自己制造麻烦。
这些事不要丢给 AI
- 完全不看代码就接受——至少要知道改了哪些文件
- AI 说「这段代码有安全风险」时，认真看待
- 上线前不手动测试每一个功能