一、 前言

Claude Code 是 Anthropic 推出的 AI 编程助手，能够理解自然语言指令并直接操作代码。结合现代前端技术栈（React + TS + Vite），可以实现"对话即开发"的流畅体验。本文通过一个待办事项应用的完整开发流程，带你掌握 Claude Code 的核心用法。

---

二、 环境准备

# 1. 确保安装 Node.js 18+ 和 npm
node -v  # v18.0.0+
npm -v   # 9.0.0+
​
# 2. 安装 Claude Code CLI（如尚未安装）
npm install -g @anthropic-ai/claude-code
​
# 3. 配置环境变量（可选，国内用户建议）
export HF_ENDPOINT=https://hf-mirror.com

---

三、实战案例：待办应用开发全流程

Step 1：快速原型验证（原生 HTML）

# 让 Claude 创建基础 HTML 待办应用
claude "给我做一个待办软件，使用HTML实现，包含添加、完成、删除功能"
​
# 生成的 index.html 可直接在浏览器打开验证
open index.html

优势：快速验证交互逻辑，无需构建工具，5 分钟出原型。

Step 2：重构为 React + TypeScript + Vite 项目

# 向 Claude 发送重构指令：
"将当前的待办应用重构为使用 React + Typescript + Vite 的项目，保留所有现有功能，且 UI 风格保持一致"
​
# Claude 会自动执行：
npm create vite@latest todo-app -- --template react-ts
cd todo-app
npm install
# 迁移逻辑代码、组件拆分、类型定义...

Step 3：开发调试技巧

# 启动开发服务器
npm run dev
​
# 访问应用：http://localhost:5173
# 🔑 快捷操作：
# - 按 `k` 可关闭服务（建议不关，实现热更新实时预览）
# - 按 `Ctrl+b` 将服务放入后台（tmux/screen 用户必备），避免阻挡聊天窗口

💡 最佳实践：保持 npm run dev 后台运行，修改代码后浏览器自动刷新，实现"写代码 - 看效果"的无缝循环。

---

四、Claude Code 核心命令详解

/rewind - 代码回滚神器

# 方式1：直接输入命令
/rewind
​
# 方式2：快捷键操作
按两下 ESC → 选择回滚点 → 选第一项（代码和会话都回滚）
​
# 适用场景：
# - 重构后发现逻辑错误
# - 误删重要代码
# - 想尝试不同实现方案

/task - 查看后台任务

/task
# 输出示例：
# [✓] 创建组件结构
# [✓] 添加类型定义  
# [⟳] 实现本地存储功能
# [ ] 添加动画效果

适合管理多步骤开发任务，避免遗漏关键功能。

/resume - 恢复对话上下文

# 方式1：在 Claude 会话中输入
/resume
​
# 方式2：终端命令重新进入
claude -c
​
# 作用：恢复上一次中断的对话，继续未完成的任务

MCP 集成：连接 Figma 设计稿

# 添加 Figma MCP 服务
claude mcp add --transport http figma https://mcp.figma.com/mcp
​
# 使用示例：
"参考 Figma 中的设计稿，优化待办应用的卡片样式和交互动效"

✨ 价值：实现"设计稿 → 代码"的半自动转化，减少手动还原成本。

---

五、高效开发技巧合集

VSCode 深度集成（Ctrl+g）

# 操作流程：
1. 在 Claude 对话中按 `Ctrl+g` 
2. 自动打开 VSCode 并聚焦编辑器
3. 输入 prompt 让 Claude 生成/修改代码
4. 保存（Ctrl+s）→ 关闭（Ctrl+w）→ 自动返回 Claude 对话
​
# 优势：无需手动切换窗口，代码编辑与对话无缝衔接

终端多任务管理（Ctrl+b）

# 前提：使用 tmux 或 screen
# 操作：
Ctrl+b → d  # 分离当前会话（服务后台运行）
tmux attach # 重新连接会话
​
# 或简单使用：
Ctrl+z      # 挂起进程
bg          # 后台运行
fg          # 恢复前台

危险模式：--dangerously-skip-permissions

# 启动命令
claude --dangerously-skip-permissions
​
# 作用：允许 Claude 自动执行文件修改、包安装、命令运行等操作，无需手动确认
​
# ✅ 适用场景：
# - 信任的自动化任务
# - 沙箱/测试环境
# - 已备份的重要项目
​
# ❌ 严禁使用场景：
# - 生产服务器
# - 包含敏感数据的项目
# - 未验证的第三方代码
​
# 🔐 安全建议：
# 1. 优先使用默认权限模式
# 2. 危险模式操作前执行 git commit
# 3. 定期审计 Claude 执行的命令历史

---

六、常见问题 & 解决方案

问题	可能原因	解决方案
npm run dev 启动失败	端口占用	lsof -i :5173 查进程，kill -9 <pid> 释放
TypeScript 类型报错	依赖未安装	npm install 或检查 package.json
Claude 响应慢	网络/配额限制	检查 API Key 有效性，切换网络环境
MCP 连接 Figma 失败	地址错误	确认 URL 为 https://mcp.figma.com/mcp（注意原文有拼写错误）
热更新不生效	Vite 配置问题	检查 vite.config.ts 中 server.watch 配置

排查技巧：在 Claude 对话中直接粘贴错误日志，让 AI 辅助分析。

---

七、完整工作流示例

# 1. 初始化项目
mkdir todo-app && cd todo-app
claude "创建 React+TS+Vite 待办应用，支持本地存储和暗色模式"
​
# 2. 开发中
# - 按 Ctrl+g 快速编辑组件
# - 用 /task 跟踪功能进度
# - 不满意？/rewind 回退重试
​
# 3. 设计联动
claude mcp add --transport http figma https://mcp.figma.com/mcp
"根据 Figma 链接优化按钮样式和交互动效"
​
# 4. 调试运行
npm run dev  # 后台运行：Ctrl+b, d
# 浏览器访问 http://localhost:5173 实时预览
​
# 5. 版本管理
git add . && git commit -m "feat: 完成基础待办功能"
# 后续修改可随时 /rewind 回到此节点