Vibe Coding 进阶：用 Claude Code 从零开发你的第一个项目

从环境搭建到项目交付，手把手教你用 Claude Code 进行 Vibe Coding 开发
作者：驴哥 | 分类：技术 / Vibe Coding | 标签：vibe-coding, Claude-Code, VS-Code, AI编程

注意：由于 Anthropic 官方的策略调整，近期 Claude Code 的一些新版本已不再支持 DeepSeek 等第三方模型。建议 Claude Code 的版本（包括插件）都控制在 2.1.153 及以前。

本文目录

• 第一章 · 10 分钟搭好开发环境
• 第二章 · 在 VS Code 中使用 Claude Code
• 第三章 · 写好 CLAUDE.md：让 AI 彻底理解你的项目
• 第四章 · 实战：从零开发个人待办事项应用
• 第五章 · 测试验收：确保项目能用
• 第六章 · 回顾与下一步

第一章 · 10 分钟搭好开发环境

目标：装好 4 个工具，终端验证通过，环境搭完。

1.1 安装 VS Code

步骤 1：下载安装包

打开浏览器，访问 https://code.visualstudio.com/，点击页面正中的"Download for Windows”按钮，下载 .exe 安装包。

步骤 2：运行安装程序

• 双击下载好的 .exe 安装包
• 勾选”我接受协议” → 点击”下一步”
• 安装路径保持默认即可（也可改为 D 盘）→ 点击”下一步”
• 后续步骤全部保持默认，一路点击”下一步” → 点击”安装”
• 安装完成，点击”完成”

步骤 3：安装中文语言包

• 打开 VS Code
• 按 Ctrl + Shift + P 打开命令面板
• 在搜索框中输入 Configure Display Language，回车
• 选择 zh-cn（简体中文）
• VS Code 弹出提示需要重启，点击”重启”
• 重启后界面变为中文，安装完成

提示：VS Code 安装非常简单，基本不会遇到问题。如果双击安装包没反应，右键选择”以管理员身份运行”即可。

1.2 安装 Node.js

Node.js 是 Claude Code 的运行基础，必须先装好。

步骤 1：下载安装包

打开浏览器，访问 https://nodejs.org/zh-cn/download，点击左边的 LTS（长期支持）版本下载。

步骤 2：运行安装程序

双击下载好的 .msi 安装包，进入安装向导。

一路点击 Next，勾选协议，选择安装路径（可保持默认），最后点击 Install 开始安装。

安装完毕后点击 Finish。

步骤 3：打开终端

• 方法一：按 Win + R 打开运行，输入 cmd 或 powershell，回车
• 方法二：桌面右键选择”在终端中打开”

步骤 4：验证安装

在终端中输入 node -v 回车，显示版本号即成功。再输入 npm -v 回车，显示版本号即成功。

报错处理：如果输入 node -v 提示”不是内部或外部命令”，说明环境变量没自动配置。解决方法：右键”此电脑” → 属性 → 高级系统设置 → 环境变量 → 在 Path 中添加 Node.js 的安装路径（默认是 C:\Program Files\nodejs\）。添加后重新打开终端再试。

1.3 安装 Claude Code

步骤 1：通过 npm 安装

打开终端（PowerShell 或 cmd），输入以下命令并回车：

npm install -g @anthropic-ai/claude-code

等待安装完成（可能需要 1-3 分钟）。

步骤 2：如果遇到权限报错

如果出现报错信息，在 PowerShell 中执行以下命令：

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

提示确认时输入 Y 回车，然后重新执行安装命令。

步骤 3：绕过登录验证

• 打开文件资源管理器，进入 C 盘 → 用户文件夹

• 找到 claude.json 文件，用记事本或 VS Code 打开

• 在文件最后一行的 } 前面加一个英文逗号，然后回车，添加：

"hasCompletedOnboarding": true

• 保存文件

步骤 4：验证安装

重新打开终端，输入 claude 回车，看到 Claude Code 的交互界面，说明安装成功。

1.4 安装并配置 CC Switch（国内模型）

CC Switch 可以让你切换使用国内的模型（如 DeepSeek），无需科学上网。

步骤 1：下载安装包

打开浏览器，访问：https://github.com/farion1231/cc-switch/releases/download/v3.11.1/CC-Switch-v3.11.1-Windows.msi

在 Assets 区域找到 .msi 文件，点击下载。

步骤 2：安装

双击 .msi 安装包，一路点击 Next，选择安装路径，最后点击 Install。

安装完毕后点击 Finish。

步骤 3：配置国内模型

打开 CC Switch，选择模型供应商（以 DeepSeek 为例）。

• 请求地址填写：https://api.deepseek.com/anthropic
• 去 DeepSeek 官网（https://platform.deepseek.com/）创建 API Key，填入对应位置

注意：API Key 是你使用模型的凭证，相当于”密码”，不要分享给他人。DeepSeek 的 API 需要充值才能使用，但费用很低，几块钱就够用很久。

第二章 · 在 VS Code 中使用 Claude Code

目标：在 VS Code 中启动 Claude Code，进入交互界面。

2.1 用 VS Code 打开项目目录

步骤 1：新建项目文件夹

在桌面（或其他你喜欢的位置）新建一个空文件夹，命名为 my-project。

步骤 2：用 VS Code 打开

• 打开 VS Code
• 点击左上角 文件 → 打开文件夹
• 选择刚才创建的 my-project 文件夹
• 如果弹出”是否信任此文件夹的作者”，点击”是，信任此文件夹的作者”

2.2 安装 Claude Code VS Code 官方插件

步骤 1：打开扩展商店

点击 VS Code 左侧活动栏的扩展图标（方块形状），或按 Ctrl + Shift + X。

步骤 2：搜索并安装

在搜索框中输入 Claude Code，找到 Anthropic 官方发布的扩展（注意认准发布者为 Anthropic），点击”安装”按钮。

步骤 3：确认安装成功

安装完成后，VS Code 左侧活动栏会出现一个 Claude 图标。点击该图标，即可打开 Claude Code 的侧边栏对话面板。

2.3 在 VS Code 中使用 Claude Code

Claude Code 插件安装好后，有两种常用方式使用：

方式一：侧边栏对话

点击左侧 Claude 图标，打开对话面板，在输入框中直接输入你的需求或问题。Claude Code 会读取项目文件，生成代码并直接写入项目。

2.4 备选：在集成终端中直接运行

如果你更习惯命令行，也可以不用插件，直接在终端运行：

• 按 Ctrl + `（Tab 键上方的反引号键）打开 VS Code 集成终端
• 输入 claude 回车
• 进入纯终端交互模式

推荐优先使用 2.2 节的插件方式，可视化更直观，对新手更友好。

第三章 · 写好 CLAUDE.md：让 AI 彻底理解你的项目

目标：生成一份合格的 CLAUDE.md，后续开发效率翻倍。

3.1 第一步：让 Claude Code 自动生成 CLAUDE.md

在 Claude Code 对话框中输入以下内容（可直接复制粘贴）：

帮我为这个项目生成一份CLAUDE.md 文件，包含以下内容：
1. 项目概述（用一两句话说明这个项目是什么）
2. 技术栈（列出使用的框架、库、工具）
3. 目录结构说明
4. 代码规范和风格约定
5. 常用开发命令（启动、构建、测试等）

Claude Code 会在项目根目录创建一个 CLAUDE.md 文件。

3.2 第二步：审阅并补充关键信息

自动生成的 CLAUDE.md 是一个起点，你需要检查并补充：

• 项目描述是否准确——用你自己的话重新描述项目目标
• 特殊要求——比如：界面必须是中文、必须支持手机端显示等
• 技术栈版本——明确你想要的框架版本（如 React 18、Vite 5）
• 约束条件——不能改的东西（如：必须使用某个配色、必须兼容某个浏览器）
• API 或数据说明——如果有外部接口或数据格式，在 CLAUDE.md 中写清楚

关键原则：CLAUDE.md 里写得越具体，Claude Code 生成的代码越贴合你的需求。模糊的描述会产生”猜”出来的代码，大概率不符合预期。

3.3 CLAUDE.md 模板示例

以下是一个待办事项项目的 CLAUDE.md 模板，可以直接参考修改：

# 项目说明

## 项目概述
一个简洁的个人待办事项管理应用，支持增删改查、标记完成、筛选查看。

## 技术栈
- 框架：React 18 + TypeScript
- 构建工具：Vite 5
- 样式：Tailwind CSS
- 数据存储：浏览器 localStorage

## 目录结构
- src/components/ — UI 组件
- src/App.tsx — 主应用组件
- src/main.tsx — 入口文件

## 界面要求
- 所有文字使用中文
- 支持响应式布局（桌面端和手机端）
- 配色方案：主色调为蓝色，背景白色

## 功能需求
1. 添加待办事项（输入框 + 回车/按钮）
2. 标记完成（复选框，完成后显示删除线）
3. 删除待办（点击删除按钮）
4. 筛选：全部/已完成/未完成
5. 数据持久化（刷新页面后不丢失）

## 注意事项
- 不要引入后端服务，纯前端实现
- 代码中变量和函数命名使用英文
- 组件拆分合理，不要所有代码写在一个文件里

第四章 · 实战：从零开发个人待办事项应用

目标：走完「需求 → 生成 → 运行 → 修改 → 提交」全链路。

4.1 新建项目并创建 CLAUDE.md

步骤 1：创建项目文件夹

在桌面新建文件夹，命名为 todo-app。VS Code → 文件 → 打开文件夹 → 选择 todo-app。

步骤 2：启动 Claude Code

点击左侧 Claude 图标，打开对话面板。

步骤 3：生成 CLAUDE.md

在对话框中输入：

帮我为这个项目生成一份CLAUDE.md，项目是一个用 React + Vite + Tailwind CSS 开发的个人待办事项应用，要求界面中文、支持响应式布局、数据存储在 localStorage。

等待生成完成，打开 CLAUDE.md，检查内容是否准确，按照第三章的模板补充完善。

4.2 提出项目需求

CLAUDE.md 确认无误后，在对话框中输入以下需求描述（可直接复制粘贴）：

请帮我开发一个个人待办事项应用，具体需求如下：

功能需求：
1. 添加待办：顶部有输入框，输入内容后点击按钮或按回车添加
2. 待办列表：展示所有待办事项，每项前面有复选框
3. 标记完成：点击复选框，待办文字显示删除线效果
4. 删除待办：每项右侧有删除按钮，点击删除
5. 筛选功能：底部有三个按钮——"全部"/"已完成"/"未完成"
6. 数据持久化：刷新页面后数据不丢失（使用 localStorage）
7. 显示统计：底部显示"共 X 项，已完成 Y 项"

界面要求：
- 所有文字用中文
- 主色调蓝色，背景白色，简洁清爽
- 支持手机端自适应
- 待办项之间有分隔线
- 已完成的待办文字变灰并显示删除线

点击发送后，Claude Code 开始自动创建项目结构和编写代码。如果 Claude Code 询问是否允许创建某个文件，点击”允许”。

请耐心等待，首次生成通常需要 2-5 分钟。

4.3 等待生成 & 检查项目结构

生成完成后，检查左侧文件树，确认以下关键文件存在：

文件	作用
package.json	项目依赖配置
src/App.tsx	主应用组件
src/main.tsx	项目入口
src/components/	UI 组件目录
index.html	HTML 入口页
vite.config.ts	Vite 构建配置
tailwind.config.js	Tailwind 配置
CLAUDE.md	项目说明文档

4.4 安装依赖并启动项目

步骤 1：安装依赖

按 Ctrl + ` 打开 VS Code 集成终端，输入：

npm install

等待依赖安装完成（首次可能需要 1-3 分钟）。

步骤 2：启动项目

依赖安装完成后，在终端输入：

npm run dev

终端会显示本地访问地址，通常是 http://localhost:5173。

步骤 3：在浏览器中查看

按住 Ctrl 键点击终端中的链接（或复制链接粘贴到浏览器地址栏），浏览器打开后，看到待办事项应用界面即表示启动成功。

启动失败？ 如果 npm run dev 报错，将终端中的完整报错信息复制给 Claude Code，让它帮你修复。

4.5 迭代修改：5 个典型场景

项目启动后，你可以不断提出修改需求：

场景	输入示例	预期效果
修改样式	把主标题改成深蓝色，字号加大到 28px	标题颜色和大小变化
增加功能	加一个清空所有已完成待办的按钮	列表底部出现”清空已完成”按钮
修复 bug	删除按钮点了之后页面闪一下但待办没删除	Claude Code 定位并修复代码
调整布局	把筛选按钮从底部移到顶部，放在输入框下方	筛选按钮位置上移
优化体验	添加待办后自动清空输入框，显示添加成功提示	输入框自动清空 + 弹出提示

每次修改后，Claude Code 会自动修改代码文件，浏览器热更新自动刷新。

描述问题时尽量具体：

• ❌ 不好的描述：”样式不好看”
• ✅ 好的描述：”待办项之间的间距太大，缩小到 8px；删除按钮颜色改成红色”

4.6 用 Git 提交代码

项目开发到一个可运行的版本后，用 Git 保存一份快照。

# 步骤 1：初始化 Git 仓库
git init

# 步骤 2：暂存所有文件
git add .

# 步骤 3：提交
git commit -m "v1.0 初始版本：待办事项基础功能"

为什么要提交？ 后续修改出错时，可以随时回退到这个版本。养成每次完成一个功能就提交一次的习惯。

第五章 · 测试验收：确保项目能用

目标：系统性测试，发现问题并修复。

5.1 逐项功能测试清单

打开浏览器，按照以下清单逐一操作并记录结果：

序号	测试项	操作方法	预期结果
1	添加待办	输入框输”测试 1”点击添加按钮	列表中出现”测试 1”
2	回车添加	输入框输入”测试 2”，按回车键	列表中出现”测试 2”
3	标记完成	点击”测试 1”前面的复选框	“测试 1”显示删除线，文字变灰
4	删除待办	点击”测试 1”右侧的删除按钮	“测试 1”从列表中消失
5	筛选-已完成	点击”已完成”按钮	只显示已完成的待办
6	筛选-未完成	点击”未完成”按钮	只显示未完成的待办
7	筛选-全部	点击”全部”按钮	显示所有待办
8	数据持久化	按 F5 刷新页面	待办数据不丢失
9	统计显示	查看底部统计信息	显示”共 X 项，已完成 Y 项”
10	响应式布局	缩小浏览器窗口至手机宽度	界面自适应，不出现横向滚动条

5.2 发现问题？用 Claude Code 修复

如果测试中发现不通过的项目，按以下步骤修复：

步骤 1：描述问题

回到 Claude Code 对话框，具体描述你遇到的问题，格式：做了什么 + 出现了什么 + 期望是什么。

描述示例：

问题描述：点击删除按钮后，待办没有从列表中消失，但是刷新页面后消失了。
期望效果：点击删除后立即从列表中消失，无需刷新。

步骤 2：等待 Claude Code 修复

Claude Code 会分析代码，定位问题，修改对应文件。

步骤 3：验证修复

在浏览器中重新执行刚才失败的操作，确认问题已解决。

描述问题的技巧：说清楚三件事——你做了什么操作 → 出现了什么现象 → 你期望的结果是什么。

第六章 · 回顾与下一步

6.1 本篇走过的完整流程

阶段	做了什么	核心技能
第一章	安装 VS Code、Node.js、Claude Code、CC Switch	环境搭建
第二章	在 VS Code 中安装和使用 Claude Code 插件	工具使用
第三章	编写 CLAUDE.md 给 AI 提供项目上下文	上下文管理
第四章	从需求到代码到运行，完整开发一个待办应用	Vibe Coding 全流程
第五章	逐项测试 + 用 AI 修复问题	测试与迭代

6.2 你已经掌握的核心能力

• 独立搭建一套完整的 Vibe Coding 开发环境
• 使用 CLAUDE.md 让 AI 准确理解项目需求
• 用自然语言描述需求，让 AI 生成可运行的项目代码
• 项目启动、测试、迭代修改的完整流程
• 使用 Git 保存项目版本

6.3 推荐练习

用同样的流程，再做一个小项目来巩固：

• 个人简历页面（纯静态页面，练习布局和样式）
• 天气查询应用（练习调用外部 API）
• Markdown 笔记应用（练习编辑器和文件操作）

每个项目都走一遍完整的流程：新建文件夹 → 写 CLAUDE.md → 提需求 → 生成 → 启动 → 测试 → 修改 → 提交。做得越多越熟练。

附录：常见问题汇总（FAQ）

Q：Claude Code 安装后输入 claude 没反应？
A：确认 Node.js 已正确安装（node -v 有版本号输出）。如果 Node.js 没问题，尝试关闭终端重新打开再试。

Q：CC Switch 配置好后 Claude Code 还是用不了？
A：确认 API Key 填写正确且账户有余额。可以在 CC Switch 中点击”测试连接”验证配置。

Q：npm install 报错怎么办？
A：将完整报错信息复制给 Claude Code 让它修复。常见原因：网络问题或 Node.js 版本过低。

Q：项目启动后浏览器显示空白？
A：按 F12 打开浏览器开发者工具，查看 Console 标签页中的报错信息，将报错内容复制给 Claude Code 修复。

Q：Claude Code 生成的代码跑不起来？
A：这是正常情况，AI 不可能一次完美。将报错信息反馈给 Claude Code，让它修复，通常 1-2 轮就能修好。

Q：修改代码后页面没有变化？
A：检查终端是否还在运行 npm run dev。如果服务已停止，重新运行启动项目。

Q：CLAUDE.md 需要每次都写吗？
A：是的，每个新项目都应该写一份。可以复用模板，但项目描述和要求需要针对当前项目修改。