零基础 | AI编程工具 Claude Code 快速上手指南（Windows）

文章目录

[Claude Code 快速上手（Windows）](#Claude Code 快速上手（Windows）)
- [0. 准备条件](#0. 准备条件)
- [1. 安装 Node.js](#1. 安装 Node.js)
- - 方式一：官网下载（推荐）
  - 方式二：包管理器（可选）
  - [常见问题：npm.ps1 无法运行](#常见问题：npm.ps1 无法运行)
- [2. 安装 Claude Code](#2. 安装 Claude Code)
- [3. 配置（按需）](#3. 配置（按需）)
- [4. 提出你的第一个问题](#4. 提出你的第一个问题)
- [5. 进行你的第一次代码更改](#5. 进行你的第一次代码更改)
- [6. 使用 Git 配合 Claude 代码](#6. 使用 Git 配合 Claude 代码)
- [7. 测试其他常见工作流程](#7. 测试其他常见工作流程)
- [8. 基本命令](#8. 基本命令)
- [9. 接下来是什么？](#9. 接下来是什么？)
- - 翻译与整理
- [10. 高效提问模板（不绕弯）](#10. 高效提问模板（不绕弯）)
- [11. 常见排查](#11. 常见排查)
- [12. 总结](#12. 总结)
  
  文件信息
  创建时间：2026-01-15
  作者：zuozewei
  功能：Claude Code 快速上手指南（Windows）
  技术栈：Claude Code、Node.js、PowerShell

Claude Code 快速上手（Windows）

本文面向第一次使用 Claude Code 的 Windows 用户：从安装到跑通一次对话，10 分钟内完成。

0. 准备条件

Windows 10/11
PowerShell（推荐）
Node.js（推荐安装 LTS 版本）

先确认 Node.js 环境是否可用：

bash 复制代码

node -v
npm -v

效果如下：

如果能输出版本号，直接跳到「2. 安装 Claude Code」。

1. 安装 Node.js

方式一：官网下载（推荐）

打开 https://nodejs.org/
下载 LTS 版本（长期支持）
双击 .msi 安装包，按默认选项安装

效果如下：

安装后在 PowerShell 验证：

bash 复制代码

node -v
npm -v

方式二：包管理器（可选）

bash 复制代码

# Chocolatey
choco install nodejs

# Scoop
scoop install nodejs

常见问题：npm.ps1 无法运行

如果执行 npm -v 报错（系统禁止运行脚本），在 PowerShell 运行：

bash 复制代码

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

按提示输入 Y 确认后重开一个 PowerShell 窗口再试。

2. 安装 Claude Code

全局安装：

bash 复制代码

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

验证安装：

bash 复制代码

claude --version

效果如下：

3. 配置（按需）

Claude Code 默认连接官方服务。

如果你的网络环境需要走企业网关/中转服务，通常需要配置以下环境变量：

ANTHROPIC_BASE_URL：接口地址
ANTHROPIC_AUTH_TOKEN：API Key

方式一：当前窗口临时生效

bash 复制代码

$env:ANTHROPIC_BASE_URL = "https://example.com/api"
$env:ANTHROPIC_AUTH_TOKEN = "YOUR_API_KEY"

关闭 PowerShell 后会失效。

方式二：用户级永久生效（推荐）

bash 复制代码

[System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "https://example.com/api", [System.EnvironmentVariableTarget]::User)
[System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", "YOUR_API_KEY", [System.EnvironmentVariableTarget]::User)

验证是否写入成功：

bash 复制代码

[System.Environment]::GetEnvironmentVariable("ANTHROPIC_BASE_URL", [System.EnvironmentVariableTarget]::User)
[System.Environment]::GetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN", [System.EnvironmentVariableTarget]::User)

设置后需要重新打开 PowerShell 才能对新会话生效。

方式三：系统界面配置（可选）

打开「系统环境变量」界面，新增两条用户变量：

text 复制代码

ANTHROPIC_BASE_URL = https://example.com/api
ANTHROPIC_AUTH_TOKEN = YOUR_API_KEY

效果如下：

4. 提出你的第一个问题

这个项目是做什么的？

Claude 会分析你的文件并提供摘要。你也可以问更具体的问题：

效果如下：

bash 复制代码

> 这个项目是做什么的？

● 我来探索一下这个项目的结构，了解它的用途。

● Search(pattern: "*")
  ⎿  Found 10 files (ctrl+o to expand)

● Search(pattern: "**/*.{json,md,txt,py,js,ts}")
  ⎿  Found 6 files (ctrl+o to expand)

● Read(README.md)
  ⎿  Read 29 lines

● Read(实操复现指南.md)
  ⎿  Read 257 lines

● 这是一个 Vibe Coding 演示项目（Kiro Vibe Coding Demo）。

  项目内容

  这是一个智能待办事项应用，用于演示如何使用 AI 辅助编程（Vibe Coding 方式）来开发软件。

  主要功能

  1. 基本功能：添加任务、标记完成/未完成、删除任务、编辑任务
  2. 智能功能：
    - 自动检测任务优先级（根据"紧急"、"重要"等关键词）
    - 自动分类（工作、学习、生活等）
    - 数据持久化
  3. 用户体验：现代化界面、响应式布局、流畅动画

  技术栈

  - HTML + CSS + JavaScript（原生）
  - localStorage 数据存储

  项目目的

  这个项目主要作为教学演示，展示如何通过自然语言描述需求，让 AI 生成代码，然后进行测试和迭代优化。项目包含：

  - 实操复现指南.md - 详细的 Vibe Coding 教程
  - VIBE_CODING_GUIDE.md - Vibe Coding 指南
  - 入门练习/ - 练习材料
  - 实操检查清单.md - 学习检查清单

  简而言之，这是一个教人如何用 AI 辅助开发 Web 应用的教学项目。

这个项目使用了哪些技术？

效果如下：

bash 复制代码

> 这个项目使用了哪些技术？

● Read(index.html)
  ⎿  Read 55 lines

● Read(styles.css)
  ⎿  Read 297 lines

● Read(script.js)
  ⎿  Read 337 lines

● 根据代码分析，这个项目使用了以下技术：

  前端核心技术
  ┌────────────────────────┬─────────────────────────────┐
  │          技术          │            用途             │
  ├────────────────────────┼─────────────────────────────┤
  │ HTML5                  │ 页面结构 (index.html:1-55)  │
  ├────────────────────────┼─────────────────────────────┤
  │ CSS3                   │ 样式设计 (styles.css:1-297) │
  ├────────────────────────┼─────────────────────────────┤
  │ 原生 JavaScript (ES6+) │ 业务逻辑 (script.js:1-337)  │
  └────────────────────────┴─────────────────────────────┘
  CSS 特性

  - Flexbox - 布局系统 (styles.css:57, 105, 134)
  - CSS Grid - (未使用此项目)
  - 渐变背景 - linear-gradient (styles.css:11, 29, 79)
  - CSS 动画 - @keyframes slideIn (styles.css:279-292)
  - 过渡效果 - transition (styles.css:69, 85, 115)
  - 媒体查询 - 响应式设计 @media (styles.css:247-276)
  - 毛玻璃效果 - backdrop-filter (styles.css:23)

  JavaScript 特性

  - ES6 Class - 面向对象编程 (script.js:3-293)
  - 箭头函数 - (script.js:18, 24, 49)
  - 模板字符串 - (script.js:165)
  - 解构赋值 - (script.js:38)
  - 数组方法 - map, filter, some, forEach (script.js:63, 144, 165)
  - 事件监听 - addEventListener (script.js:18, 24)

  数据存储

  - localStorage - 本地持久化 (script.js:260, 264)

  外部资源

  - Font Awesome 6.0 - 图标库 (index.html:8)

  开发方式

  - Vibe Coding - AI 辅助编程开发模式

  ---
  这是一个纯前端项目，不依赖任何框架（React/Vue等），完全使用原生 Web 技术构建。

主要的入口在哪里？

效果如下：

bash 复制代码

> 主要的入口在哪里？

● Read(start.bat)
  ⎿  Read 18 lines

● 项目入口有两个：

  1. 主入口文件

  index.html - 应用主页面
  - 双击直接在浏览器中打开即可运行
  - 位置：C:\GitProject\ai-code\vibe_coding_demo\index.html

  2. 启动脚本

  start.bat - Windows 批处理启动脚本
  - 启动本地 HTTP 服务器（端口 8000）
  - 访问地址：http://localhost:8000

  启动方式
  ┌──────────┬──────────────────────────────────────────┐
  │   方式   │                   操作                   │
  ├──────────┼──────────────────────────────────────────┤
  │ 简单方式 │ 双击 index.html                          │
  ├──────────┼──────────────────────────────────────────┤
  │ 推荐方式 │ 双击 start.bat（需要 Python 或 Node.js） │
  └──────────┴──────────────────────────────────────────┘
  ---
  项目文件结构：
  vibe_coding_demo/
  ├── index.html      ← 主入口
  ├── styles.css      ← 样式
  ├── script.js       ← 逻辑
  ├── start.bat       ← 启动脚本
  └── 入门练习/       ← 练习材料

✻ Brewed for 3m 23s

你也可以询问 Claude 自身的功能：

Claude Code 能做什么？

效果如下：

bash 复制代码

 Claude Code 能做什么？

● Claude Code 能做什么

 Claude Code 是 Anthropic 官方的命令行界面（CLI）工具，让你在终端中直接使用 Claude 进行软件开发。

 核心能力
 ┌──────────┬─────────────────────────────────┐
 │   类别   │              功能               │
 ├──────────┼─────────────────────────────────┤
 │ 代码开发 │ 编写、修改、重构代码            │
 ├──────────┼─────────────────────────────────┤
 │ Bug 修复 │ 诊断和修复错误                  │
 ├──────────┼─────────────────────────────────┤
 │ 代码解释 │ 解释代码逻辑和工作原理          │
 ├──────────┼─────────────────────────────────┤
 │ 文件操作 │ 读取、编辑、搜索文件            │
 ├──────────┼─────────────────────────────────┤
 │ 命令执行 │ 运行 bash/git/npm/docker 等命令 │
 ├──────────┼─────────────────────────────────┤
 │ 项目管理 │ 搜索代码库、理解架构            │
 ├──────────┼─────────────────────────────────┤
 │ Git 操作 │ 提交、创建 PR、查看 diff        │
 └──────────┴─────────────────────────────────┘
 专用工具

 - Bash - 执行终端命令
 - Grep - 代码内容搜索
 - Glob - 文件模式匹配
 - Read/Edit/Write - 文件读写
 - Task - 启动专门的子代理处理复杂任务
 - WebSearch/WebFetch - 网络搜索和抓取

 子代理类型

 - Explore - 快速探索代码库结构
 - Plan - 设计实现方案
 - Bash - 命令执行专家
 - General-purpose - 通用研究和复杂任务
 - Claude Code Guide - 回答 Claude Code 相关问题

 特色功能

 - 上下文理解 - 记住整个对话历史
 - 多工具并行 - 同时执行多个独立任务
 - Todo 管理 - 跟踪任务进度
 - 计划模式 - 先设计方案，再实施

 使用场景

 # 示例
 "帮我修复登录功能的bug"
 "重构这个组件，使其更易维护"
 "解释这段代码的作用"
 "创建一个RESTful API"
 "搜索所有使用到useState的文件"

 简而言之，Claude Code = AI 编程助手，让你用自然语言完成软件开发工作。

✻ Cooked for 1m 52s

在"Claude Code"中，我该如何使用/命令呢？

效果如下：

bash 复制代码

● Claude Code 斜杠命令使用指南

 基本用法

 直接在提示符输入 / + 命令名即可：

 /help      # 查看帮助
 /clear     # 清空对话历史
 /cost      # 查看token使用统计
 /context   # 查看当前上下文使用情况
 /commit    # 创建git提交
 /review    # 请求代码审查
 /plan      # 进入计划模式
 /model     # 切换AI模型
 /stats     # 查看使用统计

 常用内置命令
 ┌──────────┬──────────────────┐
 │   命令   │       功能       │
 ├──────────┼──────────────────┤
 │ /help    │ 显示所有可用命令 │
 ├──────────┼──────────────────┤
 │ /clear   │ 清空对话         │
 ├──────────┼──────────────────┤
 │ /cost    │ Token使用统计    │
 ├──────────┼──────────────────┤
 │ /context │ 可视化上下文使用 │
 ├──────────┼──────────────────┤
 │ /commit  │ 创建Git提交      │
 ├──────────┼──────────────────┤
 │ /review  │ 代码审查         │
 ├──────────┼──────────────────┤
 │ /plan    │ 进入计划模式     │
 ├──────────┼──────────────────┤
 │ /config  │ 打开设置         │
 ├──────────┼──────────────────┤
 │ /model   │ 选择模型         │
 ├──────────┼──────────────────┤
 │ /todos   │ 列出待办事项     │
 └──────────┴──────────────────┘
 创建自定义命令

 项目级命令（团队共享）：
 mkdir -p .claude/commands
 echo "检查代码性能问题并优化" > .claude/commands/optimize.md

 个人级命令（跨项目使用）：
 mkdir -p ~/.claude/commands
 echo "审查安全漏洞" > ~/.claude/commands/security.md

 带参数的命令

 # .claude/commands/fix.md
 修复 issue #$ARGUMENTS，遵循编码规范

 # 使用
 /fix 123 high-priority

 命令前置元数据

 ---
 description: 创建git提交
 argument-hint: [message]
 allowed-tools: Bash(git add:*), Bash(git commit:*)
 ---

 基于以下变更创建提交：
 !`git status`

 MCP服务器命令

 /mcp__github__list_prs
 /mcp__github__pr_review 456

 ---
 更多命令详情可用 /help 查看。

"Claude Code"能使用 Docker 吗？

效果如下：

bash 复制代码

 是的，Claude Code 完全支持 Docker。

  使用方式

  通过 Bash 工具执行 Docker 命令：

  # 构建 Docker 镜像
  docker build -t myapp .

  # 运行容器
  docker run -p 3000:3000 myapp

  # 查看运行中的容器
  docker ps

  # 查看日志
  docker logs <container-id>

  # 进入容器
  docker exec -it <container-id> sh

  # 停止容器
  docker stop <container-id>

  # Docker Compose
  docker-compose up -d

  实际示例

  你想让我在这个项目中演示 Docker 的使用吗？比如：

  1. 创建 Dockerfile - 将待办事项应用容器化
  2. 创建 docker-compose.yml - 简化部署
  3. 构建并运行 - 完整的容器化流程

  需要我帮你实现吗？

5. 进行你的第一次代码更改

现在让我们让 Claude 代码真正写代码。试试一个简单的任务：

在主文件中添加一个"Hello World"函数

效果如下：

bash 复制代码

● 我来帮你在主文件中添加一个"Hello World"函数。首先让我查看项目结构,找到主文件。

● Search(pattern: "**/*.{js,ts,py,java,cpp,c,go,rs,cs}")
  ⎿  Found 0 files

● 让我查看项目中的所有文件:

● Bash(ls -la)
  ⎿  total 4
     drwxr-xr-x 1 123 197121 0  1月 13 17:45 .
     drwxr-xr-x 1 123 197121 0  1月 13 17:45 ..

● 目录是空的。请问你想使用哪种编程语言创建"Hello World"程序?


────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 [ ] 编程语言

你想使用哪种编程语言创建 Hello World 程序?

> 1. Python
     创建 main.py 文件
  2. JavaScript
     创建 main.js 文件
  3. TypeScript
     创建 main.ts 文件
  4. Java
     创建 Main.java 文件
  5. Type something.

选择Python回车键继续

效果如下：

bash 复制代码

● 好的,我来创建一个 Python 主文件并添加"Hello World"函数:

● Write(main.py)

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 Create file main.py
╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
 def hello_world():
     """A simple Hello World function"""
     return "Hello, World!"


 if __name__ == "__main__":
     print(hello_world())

╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
 Do you want to create main.py?
 > 1. Yes
   2. Yes, allow all edits during this session (shift+tab)
   3. Type here to tell Claude what to do differently

 Esc to cancel

选择yes，回车继续

bash 复制代码

● 已创建 main.py 文件,包含 hello_world() 函数。你可以运行它:

 python main.py

✻ Crunched for 56s

运行程序：

bash 复制代码

  python main.py

✻ Crunched for 56s

> python main.py

● Bash(python main.py)
  ⎿  Hello, World!

● 成功运行!程序输出了 Hello, World!

其它能做：

找到合适的文件
展示拟议的变更内容
请求你的认可
进行编辑

Claude Code 在修改文件前总是先征求许可。你可以批准单个更改，或启用会话的"全部接受"模式。

6. 使用 Git 配合 Claude 代码

Claude Code 使 Git 作变成对话式：

我修改了哪些文件？

效果如下：

bash 复制代码

> 我修改了哪些文件？

● 我来帮你查看修改了哪些文件。

● Bash(git status)
  ⎿  On branch main
     Your branch is up to date with 'origin/main'.
     ... +5 lines (ctrl+o to expand)

● 根据 git status 的结果显示：

  当前没有任何文件被修改（没有已修改或已暂存的文件）

  只有一个未跟踪的新文件：
  - 设计文档/自动播报机器人.md

  这是你新创建的文件，还没有被添加到 git 跟踪中。如果你之前修改过某些文件，那些修改可能已经被提交了，或者被撤销了。

✻ Baked for 3m 45s

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
>

附上一段描述性的信息来提交我的更改。

bash 复制代码

> 附上一段描述性的信息来提交我的更改

● 我先读取一下这个文件的内容，以便写出准确的提交信息：

● Read(设计文档\自动播报机器人.md)
  ⎿  Read 1 line

● 文件内容较少。让我添加这个文件并创建提交：

● Bash(git add "设计文档/自动播报机器人.md" && git commit -m "docs: 添加自动播报机器人设计文档...)
  ⎿  Running...

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 Bash command

   git add "设计文档/自动播报机器人.md" && git commit -m "docs: 添加自动播报机器人设计文档

   新增自动播报机器人的设计文档，用于记录相关功能设计和技术方案。

   Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
   添加文件并创建提交

 Do you want to proceed?
 > 1. Yes
   2. Yes, and don't ask again for git add and git commit commands in C:\GitProject\hssj\OpsTest Toolbox Web
   3. Type here to tell Claude what to do differently

 Esc to cancel

yes，确认下一步：

bash 复制代码

● 文件内容较少。让我添加这个文件并创建提交：

● Bash(git add "设计文档/自动播报机器人.md" && git commit -m "docs: 添加自动播报机器人设计文档...)
  ⎿  [main 276c280] docs: 添加自动播报机器人设计文档
      1 file changed, 0 insertions(+), 0 deletions(-)
      create mode 100644 设计文档/自动播报机器人.md

● Bash(git status)
  ⎿  On branch main
     Your branch is ahead of 'origin/main' by 1 commit.
       (use "git push" to publish your local commits)
     ... +7 lines (ctrl+o to expand)

● 已成功提交更改！

  提交信息：
  docs: 添加自动播报机器人设计文档

  新增自动播报机器人的设计文档，用于记录相关功能设计和技术方案。

  你的本地分支现在比远程分支 origin/main 超前 1 个提交。如果需要推送到远程仓库，可以运行：
  git push

✻ Brewed for 50s

git push

效果如下：

bash 复制代码

> git push

● Bash(git push)
  ⎿  remote: Powered by GITEE.COM [1.1.23]
     remote: Set trace flag 2e4d79b4
     To gitee.com:zuozewei/OpsTest-Toolbox-Web.git
        06d022c..276c280  main -> main

● 推送成功！

  你的提交已经上传到远程仓库 xxxx.com:zuozewei/xxxx-xxxx-Web.git，提交历史从 06d022c 更新到 276c280。

──────────────────────────────────────────

你也可以提示更复杂的 Git 作：

创建一个名为"feature/quickstart"的新分支

bash 复制代码

> 创建一个名为"feature/quickstart"的新分支

● Bash(git checkout -b feature/quickstart)
  ⎿  Switched to a new branch 'feature/quickstart'

● Bash(git branch)
  ⎿  * feature/quickstart
       main

● 已成功创建并切换到新分支 feature/quickstart！

  当前分支状态：
  - * feature/quickstart (当前所在分支)
  - main

  你现在在 feature/quickstart 分支上进行开发，与 main 分支的内容一致。

✻ Baked for 37s

请给我展示最近的 5 次提交记录

bash 复制代码

> 请给我展示最近的 5 次提交记录

● Bash(git log -5 --oneline)
  ⎿  276c280 docs: 添加自动播报机器人设计文档
     06d022c 解决报错问题
     9e5252f npm 命令未找到错误处理
     5c04739 静态文件目录错误处理
     cf2fd75 处理安装包报错问题

● 最近 5 次提交记录：

  276c280 docs: 添加自动播报机器人设计文档
  06d022c 解决报错问题
  9e5252f npm 命令未找到错误处理
  5c04739 静态文件目录错误处理
  cf2fd75 处理安装包报错问题

  如果需要查看更详细的信息（包括作者、日期等），我可以运行 git log -5 命令。

帮帮我解决合并冲突的问题。

bash 复制代码

● 我先检查一下当前的 git 状态，看看是否有合并冲突：

● Bash(git status)
  ⎿  On branch feature/quickstart
     Untracked files:
       (use "git add <file>..." to include in what will be committed)
     ... +8 lines (ctrl+o to expand)

● 当前 feature/quickstart 分支没有检测到合并冲突。

  请问：
  - 你是想将 main 分支合并到 feature/quickstart 吗？
  - 还是将 feature/quickstart 合并到 main？
  - 或者是其他分支之间的合并？

  请告诉我具体需要合并哪些分支，我可以帮你执行合并操作并解决可能出现的冲突。

修复一个漏洞或添加一个功能

Claude 擅长调试和功能实现。

用自然语言描述你想要的是什么：

在表单中添加输入验证功能

bash 复制代码

● 我来帮你在表单中添加输入验证功能。首先让我探索一下项目结构，找到表单相关的代码。

● Search(pattern: "**/*.{vue,js,jsx,ts,tsx}")
⎿  Found 100 files (ctrl+o to expand)

● Read(frontend\src\views\Settings.vue)
⎿  Read 18 lines

● Read(frontend\src\views\Tasks.vue)
⎿  Read 18 lines

● Read(frontend\src\views\Testing.vue)
⎿  Read 18 lines

● Read(frontend\src\views\Operations.vue)
⎿  Read 18 lines

● Read(frontend\src\views\Home.vue)
⎿  Read 136 lines

● Search(pattern: "frontend/src/components/**/*.vue")
⎿  Found 0 files

● 我查看了项目代码，发现这是一个 Vue 3 + Element Plus 项目。目前看到的表单相关组件有：

1. Home.vue - 有一个搜索输入框
2. Settings.vue、Tasks.vue、Testing.vue、Operations.vue - 都显示"开发中"

请告诉我：

1. 哪个表单需要添加输入验证？
  - Home.vue 的搜索框？
  - 还是其他页面的新建表单？
2. 需要什么验证规则？例如：
  - 必填验证
  - 长度限制
  - 格式验证（邮箱、手机号、URL等）
  - 自定义规则
3. 是否需要我为某个表单创建一个完整的表单验证示例？

✻ Churned for 1m 13s

● How is Claude doing this session? (optional)
1: Bad    2: Fine   3: Good   0: Dismiss

存在一个漏洞，即用户可以提交空表单------请修复这个问题。

效果如下：

bash 复制代码

● 现在让我验证修改是否正确：

● Read(app\schemas.py)
⎿  Read 187 lines

● 完成！我已经修复了空表单提交漏洞。让我提交这些更改：

● Bash(git add "app/schemas.py" && git commit -m "fix: 修复空表单提交漏洞...)
⎿  Running...

────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
Bash command

 git add "app/schemas.py" && git commit -m "fix: 修复空表单提交漏洞

 为所有 Pydantic 模型添加输入验证：
 - 添加 min_length=1 约束防止空字符串
 - 使用 field_validator 验证字段不为空白字符
 - ToolInstance 的 config 字段验证不为空字典
 - 自动 trim 前后空格

 修复的模型：
 - ToolBase (name, category)
 - ToolInstanceBase (name, config)
 - TaskBase (name)
 - ScheduledTaskBase (name)
 - UserSettingBase (user_name)

 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>"
 提交 schemas.py 的修复

Do you want to proceed?
> 1. Yes
 2. Yes, and don't ask again for git add and git commit commands in C:\GitProject\hssj\OpsTest Toolbox Web
 3. Type here to tell Claude what to do differently

Esc to cancel

修复完成：

bash 复制代码

● 已成功修复空表单提交漏洞！

修复内容

在 app/schemas.py 中为所有 Pydantic 模型添加了输入验证：

1. ToolBase - 工具名称和分类

- 添加 min_length=1 约束
- 验证不为空白字符
- 自动 trim 前后空格

2. ToolInstanceBase - 工具实例

- name 字段：验证非空字符串
- config 字段：验证字典不为空

3. TaskBase - 任务名称

- 验证任务名称不能为空字符串

4. ScheduledTaskBase - 定时任务名称

- 验证定时任务名称不能为空字符串

5. UserSettingBase - 用户名

- 验证用户名不能为空字符串

效果

现在如果用户尝试提交如下空表单：
{
  "name": "   ",
  "instance_id": 1
}

API 会返回 422 Unprocessable Entity 错误，提示 "不能为空字符串"，从而阻止无效数据的提交。

✻ Cogitated for 2m 41s

7. 测试其他常见工作流程

重构代码

对认证模块进行重构，改用异步/等待机制而非回调函数。

效果如下：

写测试

为登录写单元测试

效果如下：

接下来可以运行测试

bash 复制代码

pytest tests/test_auth_login.py --cov=app/api/auth --cov-report=html

效果如下：

更新文档

更新 README 文件，添加安装说明。

效果如下：

代码审查

审查我的修改并提出改进建议

效果如下：

8. 基本命令

以下是日常使用中最重要的命令：

命令	功能（或作用）	示例
claude	启动交互模式	claude
claude "task"	运行一次性任务	claude "fix the build error"
claude -p "query"	运行一次性查询，然后退出	claude -p "explain this function"
claude -c	在当前目录继续最近的对话	claude -c
claude -r	恢复之前的对话	claude -r
claude commit	创建Git提交	claude commit
/clear	清除对话历史	> /clear
/help	显示可用命令	> /help
exit or Ctrl+C	退出Claude Code	> exit

初学者的专业技巧

1.请具体表达你的要求

2.使用逐步说明

3.让Claude Code先去探索

4.通过快捷方式节省时间

9. 接下来是什么？

翻译与整理

常见工作流

常见任务的逐步指南（Step - by - step ）
CLI 参考

掌握所有命令和选项（
配置

为你的工作流自定义
其它

10. 高效提问模板（不绕弯）

让它先探索再动手

bash 复制代码

先扫描项目结构，告诉我相关代码在哪些文件；确认后再修改。

描述需求要给"验收标准"

bash 复制代码

修复一个漏洞：用户可以提交空表单。

验收标准：
1) 空字符串和只包含空格都算无效
2) 接口返回清晰的错误信息
3) 补一个对应的单元测试

要求输出可回滚的改动

bash 复制代码

请分步骤做：先给出修改计划，再给出最小改动的补丁。

11. 常见排查

claude 不是内部命令：关闭并重开终端；确认 npm prefix -g 的目录在 PATH；或重装。
npm 权限问题：用管理员 PowerShell 安装，或把全局安装目录切到用户目录。
网络相关错误：先确认是否需要配置 ANTHROPIC_BASE_URL / ANTHROPIC_AUTH_TOKEN。

12. 总结

Claude Code 是一个强大的命令行 AI 编程助手，它将自然语言交互带入了终端，让代码开发、调试和 Git 操作变得更加流畅和智能。

通过本指南，你已经掌握了：

环境搭建：在 Windows 上安装 Node.js 和 Claude Code，并配置必要的环境变量。
基础交互：如何启动 Claude Code 并进行项目探索和问答。
实战开发：从 Hello World 到实际代码修改，体验 AI 辅助编程的效率。
Git 集成：利用 AI 自动生成提交信息和管理分支，简化版本控制流程。

Claude Code 不仅仅是一个代码生成工具，更是一个能理解上下文、协助解决复杂问题的结对编程伙伴。随着你使用频率的增加，你会发现更多提升效率的高级用法。现在，开始你的 AI 编程之旅吧！