02年世界杯韩国黑哨_曲棍球世界杯 - guanchafang.com

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.html

VS 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 说「这段代码有安全风险」时，认真看待

上线前不手动测试每一个功能