# Claude Code 快速入门
TIP
接下来项目开发我们就使用当前全球编程领域最强的模型 Claude Sonnet 4.5 / Claude Opus 4.5
# 一、前置知识
TIP
- 掌握终端的基本操作（打开、文件导航、命令执行）
- 学会常用的开发命令（pnpm、npm、node 等）及其用途
- 理解环境变量和 PATH 的作用及配置方法
- 掌握终端快捷键和常用操作技巧
- 学会命令报错的系统化排查流程
# 1、Terminal 终端入门
TIP
- 什么是 终端
终端（Terminal）是输入命令行指令的界面。Windows 上有 CMD、PowerShell、Git Bash，Mac 上有 Terminal、iTerm2。
- 什么是 Shell
Shell 是命令解释器，读取你输入的命令并执行。常见的 Shell 有 bash、zsh（Mac 默认）、PowerShell（Windows）。
- 什么是 命令行
命令行（CLI）是通过文本指令操作计算机的方式，相比图形界面更高效、更精确。
终端是开发者的主要工作界面。理解终端的基本操作：
# 2、常用的终端
TIP
Mac：
- 按
Command + Space，输入 "Terminal" - 或在 Finder → 应用程序 → 实用工具 → 终端
Windows：
- 按
Win + R，输入cmd或powershell - 或右键文件夹 → "在终端中打开"
VS Code 内置终端：
- 点击菜单：终端 → 新建终端
- 推荐：在项目目录直接打开
# 2.1、基本文件操作
这些命令在 Mac、Linux、Windows 上都是通用的：
# 查看当前目录
pwd
# 列出文件
ls
# 切换目录
cd folder-name
cd .. # 返回上一级
cd ~ # 返回用户主目录（Mac/Linux）
# 创建目录
mkdir folder-name
# 2.2、常用开发命令
# 运行开发服务器
pnpm dev
npm run dev
# 安装依赖
pnpm install
npm install
# 构建项目
pnpm build
npm run build
# 查看版本
node -v
pnpm -v
nvm version
# 2.3、停止运行中的程序
TIP
当你在终端运行 pnpm dev 或其他命令时，程序会持续运行直到你主动停止。
停止当前程序：
- 按
Ctrl + C即可停止
什么时候需要停止程序 ？以下情况需要手动停止运行的程序：
- 完成测试：开发服务器不需要一直开着
- 释放端口：同一端口不能被多个程序占用
- 程序卡死：命令没有响应，需要强制终止
- 关闭电脑：下班前停止所有后台服务
停止后可以随时重新运行 pnpm dev 启动。
这是开发者最常用的操作之一——启动开发服务器 → 测试 → 停止服务器。
# 2.4、环境变量与 PATH
TIP
什么是 环境变量
环境变量是操作系统存储的配置信息，程序可以通过它们获取系统设置。比如 PATH 就是一个环境变量，告诉系统去哪些目录查找可执行程序。
当你输入
node、pnpm、claude这样的命令时，系统是如何找到它们的
# 2.5、输入 pnpm 时发生了什么
TIP
你输入 pnpm 后，Shell 在 PATH 中查找可执行文件并启动。如果提示 command not found，说明 pnpm 没有安装或 npm 全局目录不在 PATH 中。
# 检查方法
npm prefix -g # 查看 npm 全局安装路径
echo $PATH # 确认该路径在 PATH 中
PATH 的工作原理
- 输入
pnpm - Shell 在 PATH 列出的目录中逐个查找名为
pnpm的文件 - 找到后执行该文件
- 如果所有目录都找不到，显示
command not found
# 2.6、将程序添加到 PATH
TIP
当你安装了新软件（如 Git）后，如果输入命令提示"不存在"，需要将其路径添加到 PATH。
什么时候需要配置 PATH，出现以下情况时，说明需要配置 PATH：
- 新安装的工具：输入命令提示
command not found - 全局安装失败：
npm install -g后命令无法使用 - 切换 Shell 后：从 bash 切换到 zsh 后旧命令失效
配置一次后永久生效，不需要每次都设置。
# 2.7、Mac / Linux 环境变量配置
编辑 shell 配置文件。不同 Shell 使用不同的配置文件：
| Shell | 配置文件 | 说明 |
|---|---|---|
| zsh | ~/.zshrc | Mac 默认 Shell |
| bash | ~/.bashrc | Linux 常用 Shell |
如何查看当前 Shell：
echo $SHELL
# 输出 /bin/zsh 表示使用 zsh
# 输出 /bin/bash 表示使用 bash
添加到 PATH（以 zsh 为例）：
# 1. 编辑配置文件
nano ~/.zshrc
# 2. 在文件末尾添加（将 /path/to/bin 替换为实际路径）
export PATH="/path/to/bin:$PATH"
# 3. 保存后重新加载配置
source ~/.zshrc
# 2.8、Windows 环境变量配置
TIP
- 鼠标右键"此电脑" → 属性 → 高级系统设置 → 环境变量
- 在"用户变量"中找到
Path，点击编辑 - 点击"新建"，添加程序路径
- 确定并重启终端
# 2.9、终端快捷键
| 快捷键 | Mac/Linux | Windows | 作用 |
|---|---|---|---|
| 中断 | Ctrl + C | Ctrl + C | 停止当前命令 |
| 清屏 | Cmd + K | Ctrl + L | 清空屏幕 |
| 历史 | ↑ / ↓ | ↑ / ↓ | 浏览历史命令 |
| 光标 | Ctrl + A | Home | 跳到行首 |
| 光标 | Ctrl + E | End | 跳到行尾 |
# 3、运行环境 与 工具
TIP
AI 编程工具（如 Cursor、Claude Code、GitHub Copilot CLI 等）之所以依赖 Node.js 和 Git，是因为它们分别扮演了工具的“运行引擎”和“代码管家”的角色。
# 3.1、为什么需要 NodeJS（运行环境 与 生态）
TIP
大多数 AI 编程工具（尤其是 VS Code 插件或命令行工具）在底层都是用 TypeScript/JavaScript 编写的。
- 跨平台运行： Node.js 允许开发者编写一次代码，就能在 Windows、macOS 和 Linux 上运行。AI 工具需要处理大量文本、网络请求（连接 LLM）和文件系统操作，Node.js 在这些方面非常高效。
- VS Code 的原生支持： 绝大多数 AI 编程助手是作为 VS Code 的扩展存在的。VS Code 本身就是基于 Electron（底层是 Node.js）构建的，因此插件也必须在 Node.js 环境下运行。
- 语言协议支持： 现代编辑器通过 LSP (Language Server Protocol) 来理解代码结构。这些 Language Servers 很多都是用 Node.js 实现的。AI 需要理解你的代码逻辑才能给出建议，因此需要 Node.js 来运行这些背后的解析器。
# 3.2、为什么需要 Git（数据上下文与安全性）
TIP
Git 不仅仅是一个版本控制工具，对于 AI 来说，它是理解项目上下文的关键。
- 精确定位变更： 当你让 AI “修复这个 bug”或“解释刚才的改动”时，AI 会调用
git diff来查看你最近修改了哪些行。没有 Git，它就很难知道哪些是新写的代码。 - 上下文检索（Embedding）： 像 Cursor 这样的工具会扫描你的本地库来建立索引。Git 能够告诉 AI 哪些文件是属于项目的核心，哪些是被
.gitignore忽略的临时文件（如依赖包、缓存），从而避免 AI 读取无关数据。 - 回滚与安全（代码审计）： AI 生成的代码并不总是完美的。Git 提供了“撤销”的能力。如果 AI 删除了重要的逻辑，你可以通过 Git 轻松找回。这种“容错机制”是 AI 辅助编程的心理安全防线。
# 3.3、两者结合的工作流
| 工具 | 核心职责 | AI 利用它的方式 |
|---|---|---|
| Node.js | 执行层 | 运行 AI 插件逻辑、处理 API 请求、格式化生成的代码。 |
| Git | 信息层 | 提供历史背景、识别变动文件、在多文件修改时管理代码提交。 |
注：
Node.js 是 AI 工具的“骨架”，支撑其运行；Git 是 AI 工具的“眼睛”，帮它看清项目的现状和历史。 如果没有这两个工具，AI 编程助手将失去执行能力，也无法准确感知你的项目状态。
# 4、Node.js 环境与包管理
TIP
- 掌握使用 nvm 安装和管理多个 Node.js 版本的方法
- 学会配置并使用 pnpm 包管理器进行依赖管理
- 理解 nvm 和 pnpm 的优势及应用场景
- 了解 package.json、pnpm-lock.yaml 等核心配置文件的作用
# 4.1、核心概念
TIP
- 什么是 Node.js
Node.js 是 JavaScript 的运行时环境，让 JavaScript 能在服务器端运行。现代前端开发的构建工具都依赖 Node.js。
- 什么是 LTS
LTS（Long Term Support）是长期支持版本，比 Current（最新版）更稳定，推荐用于开发。
- 什么是 nvm
nvm（Node Version Manager）是 Node.js 版本管理器，让你在同一台电脑上安装和切换多个 Node.js 版本。
- 什么是 pnpm
pnpm 是 Node.js 的包管理器，用于安装项目依赖（第三方代码包）。相比 npm，它更快、更节省磁盘空间。
# 4.2、下载 nvm-windows 安装
TIP
- nvm-windows 安装包：https://nvm.uihtm.com/nvm-1.2.2-setup.zip (opens new window)
- 下载后解压，运行
.exe安装程序。下一步 安装即可 - 如果无法下载：访问 nvm 中文官网 (https://nvm.uihtm.com/doc/download-nvm.html (opens new window)) 获取最新安装指南。
安装完成后打开终端：
# 安装最新 LTS 版本（当前为 24.x）
nvm install lts
nvm use lts
# 验证
node -v
# 配置 npm 国内源并安装 pnpm
npm config set registry https://registry.npmmirror.com/
npm install -g pnpm
# 配置 pnpm
pnpm setup
# 配置 pnpm 国内源
pnpm config set registry https://registry.npmmirror.com/
# 验证
pnpm -v
# 4.3、pnpm 常用命令
# 初始化项目
pnpm init
# 安装所有依赖
pnpm install
# 安装特定包
pnpm add react
# 安装开发依赖
pnpm add -D typescript
# 卸载包
pnpm remove react
# 运行脚本
pnpm dev # 等同于 pnpm run dev
pnpm build
add 和 add -D 的区别
- pnpm add xxx：安装生产依赖，项目运行时需要（如 React、Next.js）
- pnpm add -D xxx：安装开发依赖，仅开发时需要（如 TypeScript、ESLint）
不确定的话，让 AI 决定用哪个。
什么是 pnpm-lock.yaml
pnpm-lock.yaml 是 pnpm 自动生成的锁文件，记录项目每个依赖的精确版本。
为什么需要 lock 文件：
| 场景 | 没有 lock 文件 | 有 lock 文件 |
|---|---|---|
| 你安装 | React 18.3.1 | React 18.3.1 |
| 同事安装 | React 18.3.2（可能不一致） | React 18.3.1（完全一致） |
lock 文件确保所有人安装的依赖版本完全一致，避免"在我电脑上能跑，在你电脑上报错"的问题。
注意事项
- 自动生成，不要手动修改
- 必须提交到 Git
- 删除后运行
pnpm install会重新生成
nvm 常用命令详解
安装完成后，你可以通过以下命令管理 Node.js 版本：
| 命令 | 说明 |
|---|---|
nvm install <version> | 安装指定版本（如 nvm install 16.20.0） |
nvm install lts | 安装最新的 LTS（长期支持）版本 |
nvm uninstall <version> | 卸载指定版本 |
nvm use <version> | 切换到指定版本（最常用） |
nvm ls | 查看本地已安装的所有版本 |
nvm ls-remote | 查看官方所有可用的版本（Linux/Mac） |
nvm list available | 查看官方所有可用的版本（Windows） |
nvm current | 查看当前正在使用的版本 |
# 4.4、为什么需要 nvm
TIP
不同项目可能需要不同版本的 Node.js，nvm 让你可以轻松切换，以下情况需要使用 nvm 切换版本
- 老项目维护：项目依赖旧版本 Node.js（如 18.x、20.x）
- 新项目开发：使用最新的 LTS 版本（当前为 24.x）
- 兼容性测试：需要测试不同版本下的运行情况
不使用 nvm 的话，不同版本的项目无法在同一台电脑上同时开发。
# 4.5、为什么选择 pnpm
| 特性 | npm | pnpm |
|---|---|---|
| 速度 | 基准 | 快 2-3 倍 |
| 磁盘空间（10 项目） | ~5GB | ~1.5GB |
| 严格模式 | ❌ | ✅ |
将 npm 项目迁移到 pnpm
# 删除旧的依赖和锁文件
rm -rf node_modules package-lock.json
# 使用 pnpm 安装
pnpm install
pnpm 完全兼容 npm 的
package.json，迁移后无需修改任何代码。
什么是硬链接
硬链接是文件系统的一种机制，让同一个文件内容可以被多个文件名指向。
| 方式 | 每个项目都有一份 | 所有项目共享一份 |
|---|---|---|
| npm | 复制文件 → 浪费空间 | ❌ |
| pnpm | ❌ | 硬链接 → 节省空间 |
npm 每个项目都复制一份依赖，10 个项目 = 10 份重复。pnpm 用硬链接让所有项目指向同一份文件，删除硬链接不影响原始文件。
# 4.6、nvm 解决版本冲突，pnpm 提升安装效率
选择这套工具组合的原因：
- ✅ 多项目可以使用不同 Node.js 版本
- ✅ pnpm 复用依赖，安装快速、节省空间
- ✅ pnpm 严格模式，避免"幽灵依赖"
# 5、Git
TIP
安装 Git（必装）
没有 Git，无法进行版本控制，无法提交代码。 AI 编程工具依赖 Git 来跟踪代码变更、创建提交、管理分支。请确保在开始开发前安装。
# 6、MarkDown
TIP
在 AI 时代，Markdown 是人类自然语言与机器编程语言之间的“桥梁”。它学习成本极低，但收益却是永久性的。
在 AI 开发领域，Markdown 已经从一种简单的文档格式，演变成了开发者与 AI 沟通的“通用协议”。学习 AI 开发如果不掌握 Markdown，就像在编程时不使用缩进一样，会极大地降低沟通效率。
# 6.1、提升 AI 的“理解力”
TIP
大语言模型（LLM）是在包含海量 Markdown 内容的数据集（如 GitHub、Stack Overflow）上训练出来的。它们天然对 Markdown 语法极其敏感。
- 结构化输入： 使用
#（标题）、-（列表）和**（加粗）可以清晰地告诉 AI 哪些是指令（Task）、哪些是上下文（Context）、哪些是变量（Variables）。 - 消除歧义： 一大堆纯文本会让 AI 感到“困惑”，而 Markdown 的层级结构能像代码一样建立逻辑树，显著提高 AI 任务的执行准确率（研究表明，Markdown 格式的提示词准确率比纯文本高 10% 以上）。
# 6.2、节省“Token”即节省成本
TIP
在 AI 开发中，输入和输出的字符（Token）都是要付钱的，且有长度限制。
- 对比 HTML/JSON： 与 XML 或 HTML 这种臃肿的标记语言相比，Markdown 极其精简。同样表示一个标题，HTML 需要
<h1>标题</h1>（13 字符），而 Markdown 只需要# 标题（4 字符）。 - 效率： 这种高压缩比让你能在同样的上下文窗口（Context Window）里塞进更多的有效信息，同时也让 AI 的生成速度更快。
# 6.3、它是 AI 智能体 (Agent) 的指令语言
TIP
现在的 AI 开发不仅仅是聊天，更多是开发 AI Agent（如 Claude Code, OpenCode）。
- 规则定义： 开发者通常在
.md文件中编写 AI 的“运行说明书”（System Instructions）。AI 会读取这些文件来理解它在项目中的角色。 - 代码交互： AI 在生成代码时，必须使用 Markdown 的 代码块 (Code Blocks) 语法（如 ```python```）来包裹代码。如果你不熟悉这个语法，就无法正确解析和提取 AI 生成的代码。
# 6.4、现代编程生态的“标准配置”
TIP
- 文档标准： 几乎所有 AI 相关项目的 README、技术文档和 API 说明都是用 Markdown 写的。
- 工具联动： 你刚才提到的 GitHub Copilot、Cursor、JetBrains AI，它们的 Chat 窗口和文档引用功能全是基于 Markdown 渲染的。
# 6.5、快速对比：纯文本 vs Markdown
| 方式 | 示例 | AI 的感受 |
|---|---|---|
| 纯文本 | 帮我写个登录页面，要求有邮箱和密码，背景是蓝色的。 | AI 可能会忽略某些细节，或者生成的格式很乱。 |
| Markdown | ## 任务 写一个登录页面 ### 要求 - 字段：邮箱、密码 - 风格：**蓝色背景** | 清晰明确。AI 会按步骤分块处理，产出质量极高。 |
MarkDown 从入门 到 精通，完整版图文教程：https://www.arryblog.com/guide/html5/markdown.html (opens new window)
# 二、Claude Code 工具
TIP
Claude 是 Anthropic 公司的模型名称，Claude Code CLI 工具，这个工具专门为我们编程而独立优化的一个工具，他可以使用 Claude 模型，也可以使用其他的
为什么推荐 Claude Code ？
- Claude Code 是 Anthropic 官方的 AI 原生 CLI 工具，发布在 npm 仓库，全球开发者都可以使用。
- Claude Code 也是 Anthropic 公司专门为程序员设计的命令行工具（CLI Agent），针对编程任务进行过深度优化的版本或能力集，为编程而生。
核心优势：
- 公开可用：发布在 npm 仓库，任何人都可以
npm install安装 - 多模型支持：不强制使用 Claude，可接入国内模型（GLM、DeepSeek 等）
- 工作流强大：文件操作、代码搜索、Git 集成、子代理协作
- 成本可控：可使用国内模型 API，价格远低于官方 Claude
关于地域限制：
- Anthropic 的 Claude Web 服务 对中国有访问限制
- Claude Code CLI 工具 发布在 npm 仓库，无地域限制
# 1、Claude 和 Claude Code 有什么区别
TIP
- Claude 是一个通用的人工智能聊天机器人，是通用的大语言模型家族的品牌名称。就像 OpenAI 的 "GPT" 一样，"Claude" 代表了 Anthropic 开发的一系列功能强大的基础模型。这些模型被设计用来处理各种任务，包括但不限于：文本摘要、创意写作、信息提取、对话聊天以及编码。
- Claude Code 是一个专门为程序员设计的命令行工具（CLI Agent），专门针对编程任务进行过深度优化的版本或能力集。可以理解为 Claude 模型在编程和代码处理能力上的一个特定体现或增强版本。
如果把 Claude 比作一位博学且擅长写作的“创意教授”，那么 Claude Code 就是一个能直接进入你的电脑、帮你写代码并运行程序的“全能程序员助手”。
| 特性 | Claude (网页端/App) | Claude Code (命令行工具) |
|---|---|---|
| 产品定位 | 通用型 AI 助手 | 终端 (CLI) 代理型编程工具，专为编程而生 |
| 主要目标用户 | 全行业人员（写作、总结、咨询） | 专业软件工程师 |
| 交互界面 | 网页浏览器、手机 App、API。 | 终端 (Terminal)，通过命令行操作。 |
| 主要用途 | 聊天、写作、总结文档、回答通用问题。 | 工程化编程：直接在本地代码库工作。 |
| 操作权限 | 只能生成代码片段，你手动复制粘贴。文件仅限于用户手动上传 | 拥有系统权限：全库感知读写本地整个项目文件夹，能读取/修改文件、运行测试、执行 shell 命令、提交 Git。 |
| 执行能力 | 仅生成文本和代码建议 | 自主执行：能运行测试、修复 Bug、提交 Git |
| 理解深度 | 受限于你复制给它的上下文 | 全库感知：能理解整个项目的结构和多文件依赖。 |
| 工作模式 | 对话式（问答） | 代理式 (Agentic)：你下指令，它自主完成一连串任务 |
| 对应网址 | claude.ai (opens new window) | code.claude.com (opens new window) |
# 2、Claude Code 安装
TIP
Claude Code 安装 及 模型的获取
# 2.1、前提条件：验证安装 NodeJS 和 Git
需要安装 Node.js 18 或 更高的版本
# 执行以下命令验证版本
node -v
安装 Git 后验证
# 执行以下命令验证版本
git -v
【此步骤在 Windows PowerShell】卸载已安装的 Claude Code（未安装请跳过）
npm uninstall -g @anthropic-ai/claude-code
【此步骤在 Windows PowerShell】安装官方原版包，Claude Code 官方文档，快速入门 (opens new window)
# 全局安装 Claude Code
npm install -g @anthropic-ai/claude-code
启动 Claude Code
注：
文件夹地址栏输“cmd”进入命令行的方式使用 Claude code，更方便，更便捷。
# 2.2、Claude 模型的获取
TIP
在国内做项目开发，长时间使用原生的 Claude Sonnet4.5 或 Claude Opus 4.5 最新的模型，一般都会使用中转站。稳定 且 靠谱 ！
这是我给大家找的供应商（我个人也一直用），Claude 的价格，可以作参考
注：
需要可用于企业生产稳定且靠谱的模型，可联系老师 ...
目前全球公认 AI 编程最强模型 Claude Sonnet 4.5 和 Claude Opus 4.5 均可使用。
# 2.3、Wins 环境变量配置
TIP
当获取到 Claude 模型的 API 和 token（API Key）后，直接在环境变量中配置 即可使用
【此步骤在控制面板】设置 Windows 系统环境变量
ANTHROPIC_BASE_URL="http://vip.xxx.cn:30000/api/"
ANTHROPIC_AUTH_TOKEN="你的API_KEY"
【此步骤在 Windows PowerShell】重启 Windows PowerShell，验证安装结果
终端中输入 claude 命令，就可以看到 Claude Code 和 对应的模型
也可以问模型
重启 Windows PowerShell 后运行以下命令，确认安装成功
claude -v
# 3、Claude Code 斜杠命令
TIP
因为 CC 是在命令行界面（CLI）工作，它跟我们经常使用的图形用户界面（GUI）还不太一样。
全程靠键盘操作，不怎么需要鼠标。新手用户一开始可能还不太习惯，但请你相信我，熟悉后你一定对它爱不释手。
我们来简单认识一下它的“/”斜杠命令。
一共 45 个斜杠命令，分别是：
/add-dir #添加新的工作目录
/agents #管理智能体（Agent）配置
/chrome #Chrome中的Claude设置
/clear #清空对话历史并释放上下文
/compact #清空对话历史但保留摘要至上下文（可选：/compact [摘要指示]）
/config #打开配置面板
/context #以彩色网格形式可视化当前上下文使用情况
/cost #显示当前会话的总费用与时长
/doctor #诊断并验证你的Claude Code 安装与设置
/exit #退出REPL
/export #将当前对话导出到文件或剪贴板
/help #显示帮助与可用命令
/hooks #管理工具事件的钩子（hook）配置
/ide #管理IDE集成并显示状态
/init #初始化新的CLAUDE.md 文件，包含代码库文档
/install-github-app #为仓库设置Claude GitHub Actions
/install-slack-app #安装Claude Slack 应用
/login #使用你的Anthropic账户登录
/logout #从Anthropic账户登出
/mcp #管理MCP服务器
/memory #编辑Claude记忆文件
/mobile #显示二维码以下载Claude 移动应用
/model #设置Claude Code使用的AI模型
/output-style #直接或从选择菜单设置输出样式
/permissions #管理允许与拒绝工具权限规则
/plan #查看或打开当前会话的计划
/plugin #管理Claude Code插件
/pr-comments #从GitHub拉取请求获取评论
/release-notes #查看版本发布说明
/resume #恢复某个对话
/review #审查拉取请求
/rewind #回滚版本
/security-review #对当前分支的待定更改进行安全审查
/skills #列出可用技能
/stats #显示你的Claude Code使用统计与活动
/status #显示Claude Code状态（包括版本、模型、账户、API 连接性与工具状态）
/statusline #设置Claude Code的状态栏界面
/stickers #订购Claude Code贴纸/tasks #列出并管理后台任务
/terminal-setup #安装Shift+Enter键绑定以输入换行
/theme #更换主题
/todos #列出当前待办事项
/upgrade #升级至Max版本以获得更高频率限制和更多Opus功能
/usage #显示计划使用限制
/vim #在Vim与普通编辑模式之间切换
这里面，我自己经常用到的斜杠命令有：
/clear #开启新的任务，记得一定要clear。
/compact #清理对话历史但保留摘要至上下文，在一些长任务上会用到。
/context #可视化展示当前上下文占用（token 网格）。
/model #随时切换模型（第三方模型一般默认在第4个，可选不多）。
/export #把当前会话导出、保存，便于复盘。
/add-dir #把新文件夹拉进任务的工作区。
/doctor #一键诊断本地安装环境是否正常。
/status #检查账号、模型、版本等系统状态。
/mcp #连接GitHub、数据库等MCP服务器，扩展外部能力。
/cost #长对话记得监控费用，必要时/compact或/clear控制token消耗。
当然，还有最重要的Esc 键，按下 Esc 键，随时退出设置界面。
以及Tab 键（最新版是Alt+t），按一下模型会默认开启 thinking 模式（V2.0.72 版本已默认开启）。
# 4、CC 常用技巧
...... 持续更新中 ......
# 三、MCP 服务
TIP
MCP（Model Context Protocol），你可以理解是“AI 的拓展接口”。
通过添加 MCP server，可以拓展 Claude Code 获取外部工具、资源、服务的能力。安装方式也很简单，输入这句指令即可。
claude mcp add 你的mcp地址
# 1、Chrome DevTools MCP
比如之前很火的 Chrome DevTools MCP，在 Github 上已经狂揽 20.2k Star
Github 地址：https://github.com/ChromeDevTools/chrome-devtools-mcp (opens new window)
这个 MCP 内置了 26 个工具，可以完成很多浏览器自动化的事情，比如输入自动化、导航自动化、自动测试以及数据自动抓取等等。
这么好的工具，必须给它接入到 CC 里，那你只需要输入这句指令：
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
这行命令的意思是，在 CC 里添加一个叫 chrome-devtools 的 MCP 服务，这个服务通过 npx 命令来启动最新版的 chrome-devtools-mcp 包。
安装好后，启动 Claude Code，输入/mcp 查看。如果在 mcp server 里有看到“chrome-devtools”，那就代表已安装成功。
# 2、数据统计实践
跑一个案例测试：做数据分析（经常看到一些网站的数据想要做一个统计，大部分只能人工统计）
如果是人工来统计，非常的耗时耗力。现在，可以直接让 CC+chrome devtools mcp 来完成了。
只需要在 CC 里输入这段 Prompt
用 Chrome 浏览器打开这个链接：https://www.douyin.com/user/MS4wLjABAAAACD3Am9Xi6rQ-gZoauDcFkT-m3E2G-74RF8YE0nmgtrex1gverQBbLGw6wimQWmFV?from_tab_name=main
然后，通过chrome devtools mcp完成：获取页面中详细的数据，并保存到 Excel 表格中。
大概 5 分钟，这样一份详细的数据就统计好了
# 3、浏览器 bug 解析调试
用Chrome 浏览器打开 https://code.claude.com/docs/en/quickstart#npm 通过 Chrome devtools mcp 查看该页面有哪些报错，并给出优化建议
CC 自己调用 Chrome 浏览器开始工作了
用法有很多，根据自己需求，但凡人能在浏览器完成的操作 CC 都能搞定，打开思路发出指令即可
# 4、更多 Claude Code 使用技巧
Claude Code 开发者关系和社区负责人 Ado 分享教程：http://adocomplete.com/advent-of-claude-2025/ (opens new window)
Claude 创始人 Boris 分享实战教程：https://x.com/bcherny/status/2007179832300581177 (opens new window)
Claude Code 开发工程师实用技巧：https://x.com/trq212/status/2005315275026260309 (opens new window)
# 四、Vibe Coding 个人博客开发
TIP
使用 AskUserOuestionTool 工具让 Claude 模型对我们进行提问，不断完善需求 和 开发规范，最终形成完整的 需求技术开发文档。再进行需求拆分逐步完成开发 和 服务器部署。
# 1、开始提示词
我目前已经写好了 Markdown 学习笔记，在 ./docs 文件夹中
我需要使用 vitepress 开发一个属于自己的个人博客
需求：
1、根据文档内容定制合理简洁大气 的首页
2、设计合理的文档内容排版，一切以用户体验为中心
3、博客要符合 SEO 搜索引擎优化的最佳实践，确保在 百度 Google Bing 能够有更好的排名
Git 提交：
在 Vibe Coding 过程中，每次完成一个功能点后立即提交
向我提问以梳理产品需求、技术要求、工程原理和硬性约束等。
注：
核心关键在最后一句 “向我提问以梳理产品需求、技术要求、工程原理和硬性约束等”
# 2、Git 提交的重要性
TIP
在 Vibe Coding 过程中，建议每次完成一个功能点后立即提交
为什么频繁提交很重要 ？
- ✅ 保护工作成果，避免代码丢失
- ✅ 出问题时可以快速回滚到上一个可用版本
- ✅ 清晰记录功能开发历程
- ✅ 方便协作和代码审查
# 3、AI 反向引导开发者
AI 会主动反问引导完善需求（如下效果），我们只需要选择适合自己的即可
# 4、根据 AI 提示，完善需求 和 技术方案
TIP
首页内容结构优化提示词：
头部导航，banner 区域（大标题：人人都能学会 AI 编程，小标题：不写代码，也能做产品 从零基础到全栈开发，只需要发挥你的天才创意）+ 适合当前博客的 logo；
提炼 6 个博客特色 + 描述（如：零基础友好、AI 驱动开发、MVP 思维、现代技术栈、安全意识、渐进式学习）；
学习路径总结，适合谁学习 每个版块都需要简洁提炼即可不要长篇大论，符合整体设计风格；
AI 会根据我们确认的内容，总结生成 《产品实施方案总结》
📋 产品实施方案总结
基于您的需求和现有文档结构,我已经为您梳理了完整的实施方案。以下是详细说明:
🎯 产品定位与特色
定位: 个人成长型博客 - AI 编程学习社区
核心价值: 从零基础到全栈开发的完整学习路径
目标用户: 文科生、设计师、产品经理等非技术背景的学习者
📐 技术架构
VitePress (核心框架)
├── Vue 3 (组件系统)
├── Markdown (内容管理)
├── TypeScript (类型安全)
├── UnoCSS/Tailwind (样式定制)
└── 插件生态
├── 搜索功能 (内置/Algolia)
├── 评论系统 (Giscus)
├── SEO 优化 (sitemap/robots)
└── 国际化 (i18n)
🏠 首页设计方案
1. 顶部导航栏
Logo + 博客名称
中文/英文 切换按钮
基础篇 / 进阶篇 导航
搜索框
深色/浅色主题切换
2. Hero Banner 区域
┌────────────────────────────────────────┐
│ [Logo] Vibe Coding │
│ │
│ 人人都能学会 AI 编程 │
│ 不写代码,也能做产品 │
│ 从零基础到全栈开发,只需要发挥 │
│ 你的天才创意 │
│ │
│ [开始学习] [查看目录] │
└────────────────────────────────────────┘
3. 6 大特色卡片
零基础友好 - 专为非技术背景设计
AI 驱动开发 - Claude/Cursor 实战
MVP 思维 - 最小可行产品方法论
现代技术栈 - Next.js + Prisma + Docker
安全意识 - 从小白的视角讲解安全
渐进式学习 - 从心法到实战的完整路径
4. 学习路径指南
基础篇 (Basic) 进阶篇 (Advanced)
↓ ↓
觉醒 → 心法 → 技术 环境搭建 → 项目实战
↘ 从 0 到 1 ↙ ↘ 部署上线 ↙
实战项目 全栈技能
5. 适合人群
文科生/设计师 - 想做产品但不会代码
产品经理 - 需要技术理解力
职场人 - 想提升效率/自动化
创业者 - 快速验证想法
🔍 功能模块实现
1. 搜索功能
方案: VitePress 内置搜索 (推荐,无需第三方服务)
配置: 在 .vitepress/config.ts 中启用
特点:
客户端全文搜索
支持中文分词
即时结果显示
2. 评论系统
方案: Giscus (基于 GitHub Discussions)
优势:
免费、无需数据库
支持 Markdown
自动同步到 GitHub
支持深色模式
配置: 需要 GitHub 仓库和 Discussions
3. 阅读进度 & 时间预估
方案: 自定义 Vue 组件 + VitePress 插件
功能:
侧边阅读进度条
文章字数统计
预计阅读时间 (按 300 字/分钟 计算)
🌍 中英文双语方案
目录结构
docs/
├── zh/ # 中文内容
│ ├── Basic/
│ └── Advanced/
├── en/ # 英文内容
│ ├── Basic/
│ └── Advanced/
└── public/ # 公共资源
配置要点
使用 VitePress 内置 i18n
互译 URL 结构 (/zh/Basic/ vs /en/Basic/)
语言切换自动保存偏好
默认中文 (SEO 针对国内)
🎨 样式定制 (轻度定制)
基于默认主题调整
配色方案:
主色: #3B82F6 (蓝色 - 科技感)
辅色: #10B981 (绿色 - 成长)
深色: #1F2937 (深灰 - 护眼)
字体: 系统字体栈 (无需加载外部字体)
组件: 覆盖 VitePress CSS 变量
动画: 添加页面过渡和微交互
🔍 SEO 最佳实践
1. 元数据配置
每个页面配置:
title: "页面标题"
description: "页面描述(150 字以内)"
head:
- [meta, { name: "keywords", content: "关键词 1,关键词 2" }]
- [meta, { property: "og:title", content: "分享标题" }]
- [meta, { property: "og:description", content: "分享描述" }]
- [meta, { property: "og:image", content: "分享图片" }]
2. 站点地图生成
使用 vitepress-plugin-sitemap 自动生成
提交到 Google Search Console
提交到百度站长平台
3. 结构化数据
添加 BreadcrumbList (面包屑)
添加 Article (文章信息)
添加 WebSite (站点信息)
4. 性能优化
图片懒加载
代码分割
预渲染关键路径
CDN 加速静态资源
5. 内容优化
H1-H6 标题层级清晰
图片 alt 属性完整
内部链接丰富
外部链接添加 rel="nofollow"
📁 文档结构优化建议
保持现有结构,添加:
docs/
├── .vitepress/ # VitePress 配置
│ ├── config.ts # 主配置
│ ├── config/zh.ts # 中文配置
│ ├── config/en.ts # 英文配置
│ ├── components/ # 自定义组件
│ │ ├── ReadingTime.vue
│ │ └── ProgressBar.vue
│ └── theme/ # 主题定制
│ └── styles/
│ └── custom.css
├── zh/ # 中文内容 (现有 Basic/Advanced 移至此)
├── en/ # 英文内容
└── public/ # 静态资源
├── images/
└── favicon.ico
⚡ 性能目标
Lighthouse 性能分数 > 90
首屏加载时间 < 2s
LCP (最大内容绘制) < 2.5s
支持 HTTP/2 和 Gzip/Brotli 压缩
🚀 部署方案 (自己服务器)
1. 构建流程
pnpm build # 构建静态文件
# 生成 .vitepress/dist/ 目录
2. 部署到 Nginx
listen 80;
server_name yourdomain.com;
root /var/www/vibecoding/dist;
index.html;
# SPA 路由支持
location / {
try_files $uri $uri/ /index.html;
}
# Gzip 压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript;
3. CI/CD (可选)
GitHub Actions 自动构建
SSH 自动部署到服务器
构建失败通知
✅ 硬性约束清单
浏览器支持: Chrome/Firefox/Safari/Edge 最新两个版本
移动端适配: 响应式设计,iOS/Android 完美兼容
SEO 优先: 所有页面必须包含元数据
无障碍访问: 语义化 HTML,键盘导航支持
内容安全: CSP (内容安全策略) 防护
📊 实施优先级
第一阶段 (核心功能)
✅ 初始化 VitePress 项目
✅ 设计并实现首页
✅ 配置侧边栏和导航
✅ 迁移现有文档内容
第二阶段 (体验优化)
✅ 添加搜索功能
✅ 优化文档排版
✅ 添加阅读进度
第三阶段 (扩展功能)
✅ 集成评论系统
✅ 配置中英文双语
✅ SEO 完整优化
❓ 确认问题
在开始实施前,我需要您确认几个关键点:
评论系统选择: 您有 GitHub 账号吗?是否可以使用 GitHub Discussions 作为评论后端?
双语内容: 英文版内容是否需要我协助翻译,还是您后续自己补充?
Logo 设计: 您是否有现成的 Logo,还是需要我用文字/图标临时替代?
域名备案: 如果部署在国内服务器,是否已完成 ICP 备案?
GitHub 仓库: 是否需要创建公开仓库来管理代码和评论?
请确认以上方案是否符合您的预期,我将立即开始实施! 🚀
提示，最后确认问题（输入）
有 Github 账号（icodingedu）、只完成中文版即可，logo 你根据内容和定位帮我绘制一个，域名自己有，Github 仓库地址。该仓库仅用来存储评论信息，博客代码不开源
# 5、确认，开始 Vibe Coding
TIP
- 过程中需要根据 AI 提示，协作开发
- 一边开发一边测试，如果有不满意的地方，告诉 AI 继续优化，直到满意为止
- 细节优化改进
- 项目部署同样也可以使用 AI 协助部署完成
# 6、开发完成后的项目效果
# 五、根据 UI 设计稿开发项目
..... 待新中 .....
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X