AI 编程工具 Claude Code 实战

AI 编程工具 Claude Code 实战
在这里插入图片描述

随着本人应用 AI 编程进行深度应用后,发现 Cursor 处理复杂问题时候还是很欠缺,同时由于 Cursor 更改了 Pro 用户的使用规则,导致每个月中开始就无法使用 Cursor 中的一些高级模型。

今天就来介绍一下最近特别火而且本人也在应用的 AI 编程工具 Claude Code。

Claude Code

Claude Code 是由 Anthropic 开发的可在本地运行的自动化 AI 编程命令行工具,他基于 Claude 4 系列模型获得强大的能力.

能理解您的代码库,执行命令,自动化管理Git仓库,调用您的 Model Context Protocol (MCP)。

能按照您的想法创造、修改项目,出色地完成撰写文档,转写语言等您平时十分繁重的工作。

它通过命令行界面(CLI)运行,允许开发者通过自然语言命令处理编码任务、Git 工作流和调试。

它更适合需要深度项目上下文和复杂任务的场景,例如跨前端和后端的集成增强或自动化重复任务。

Cursor、Trae 可都是调用的 Claude 4 的模型哦,Claude code 可以说是原厂出的 AI 编程工具,可以想象一下,Claude Code 会是一个多么强大的工具。

网络介绍已经很多很多了,这里就不再赘述了。老习惯,先上一些官方介绍和文档链接:

Claude Code: Best practices for agentic coding

Claude Code 安装

Claude Code,需要满足以下要求:

  1. 运行 macOS 10.15+、Ubuntu 20.04+/Debian 10+ 操作系统。
  2. Node.js 18+
  3. git 2.23+ (可选)
  4. ripgrep 用于增强文件搜索 (可选)

Windows 系统使用 Windows Subsystem for Linux (WSL) 2,安装教程:https://docs.microsoft.com/zh-cn/windows/wsl/install

node 和 npm 安装

Node.js 是一个跨平台的 JavaScript 运行环境,它构建在为了在服务器端运行 JavaScript 代码而设计的 Chrome JavaScript 上。它通常被用来构建后端应用,但是它也是非常流行的全栈和前端解决方案。
中文官网地址:https://nodejs.org/zh-cn

npm(node package manager)是 nodejs 的包管理器,用于 node 插件管理(包括安装、卸载、管理依赖等)

  1. 方式1:通过 apt-get 安装
    在命令行中输入:
$ sudoapt-get update $ sudoapt-getinstall nodejs npm -y 
  1. 方式2:手工安装
    在命令行中输入:
$ wget https://nodejs.org/dist/v18.12.1/node-v18.12.1-linux-x64.tar.xz $ tar xvf node-v18.12.1-linux-x64.tar.xz $ sudomkdir -p /usr/local/node $ sudomv node-v18.12.1-linux-x64/* /usr/local/node 
  1. 创建软链接:
$ sudoln -s /usr/local/node/bin/node /usr/bin/node $ sudoln -s /usr/local/node/bin/npm /usr/bin/npm 
  1. 安装完成后查看一下版本号,输入:
$ node -v $ npm -v 

node 更新

使用 apt-get 安装的版本可能不是最新版本的 Node.js,可以和官网上的最新正式版本对照一下。(我安装的时候最新版本为 v18.12.1)

非最新版本会在实际使用中遇到较多问题,所以先将 Nodejs 升级到最新版本,使用 node 升级神器 n。(n 不支持 windows 系统)

  1. 安装n,在命令行输入:
$ sudonpminstall -g n $ sudoln -s /usr/local/node/bin/n /usr/bin/n 
  1. 安装完成后查看n的版本号:
$ n -V 
  1. n 操作说明
  • sudo n 版本号 //安装指定 node版本
  • sudo n rm 版本号 //卸载指定 node版本
  • sudo n 版本号 //切换 node版本(不会删除已安装的其他版本)
  • sudo n latest // 使用或安装最新的官方发布
  • sudo n stable // 使用或安装稳定的正式版本
  • sudo n lts // 使用或安装最新的LTS正式版本
  1. 更新 node 到稳定的正式版本,输入:sudo n stable
    再次输入:node -v 确认版本号是否为 v24.3.0

Claude Code 安装

运行以下命令全局安装:

$ sudonpminstall -g @anthropic-ai/claude-code 

安装完成后确认安装是否成功:

$ claude --version 1.0.41 (Claude Code)

Claude Code 卸载

$ npm uninstall -g @anthropic-ai/claude-code 

启动 Claude Code

在命令行中输入 claude 即可启动 Claude Code:

$ claude 

首次运行会提示设置 style,可以根据自己的喜好设置

╭──────────────────────────╮ │ ✻ Welcome to Claude Code │ ╰──────────────────────────╯ Let's get started. Choose the text style that looks best with your terminal: To change this later, run /theme ❯ 1. Dark mode✔ 2. Light mode 3. Dark mode (colorblind-friendly)4. Light mode (colorblind-friendly)5. Dark mode (ANSI colors only)6. Light mode (ANSI colors only) Preview ╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮ │ 1functiongreet(){ │ │ 2 - console.log("Hello, World!"); │ │ 2 + console.log("Hello, Claude!"); │ │ 3} │ ╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯ 

登录

首次运行会提示登录,官方提供的两种方式:

  1. 账号登录:选择该方式后,会提示你登录到 claude.ai 网站登录账号验证
  2. 采用 API 方式。
╭──────────────────────────╮ │ ✻ Welcome to Claude Code │ ╰──────────────────────────╯ ██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗ ██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝ ██║ ██║ ███████║██║ ██║██║ ██║█████╗ ██║ ██║ ██╔══██║██║ ██║██║ ██║██╔══╝ ╚██████╗███████╗██║ ██║╚██████╔╝██████╔╝███████╗ ╚═════╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝ ██████╗ ██████╗ ██████╗ ███████╗ ██╔════╝██╔═══██╗██╔══██╗██╔════╝ ██║ ██║ ██║██║ ██║█████╗ ██║ ██║ ██║██║ ██║██╔══╝ ╚██████╗╚██████╔╝██████╔╝███████╗ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝ Claude Code can now be used with your Claude subscription or billed based on API usage through your Console account. Select login method: ❯ 1. Claude account with subscription Starting at $20/mo for Pro, $100/mo for Max - Best value, predictable pricing 2. Anthropic Console account API usage billing 

目前 claude 官方提供 3 种资费:

  1. $20 一个月的 pro 用户:每 5 个小时可以发送大约 10~40 个 Claude Code 提示
  2. $100 一个月的 max5x 用户:每 5 个小时可以发送大约 50~200 个 Claude Code 提示
  3. $200 一个月的 max20x 用户:每 5 个小时可以发送大约 200~800 个 Claude Code 提示

其中:max 用户可以使用 claude 4.0 sonnet 和 opus 模型,而 pro 用户只能使用 claude 4.0 sonnet 模型。cursor 普通用户、Trae 都是用的 claude 4.0 sonnet 模型。(我还没体验过 opus 模型的强大)

以上标价都是美元为单位的哦。

具体套餐怎么买看最后一个章节。

登录后也可以通过以下命令切换

$ /login # 切换账户 $ /logout # 从账户登出

快速恢复最近对话

由于 Claude Code 使用的是命令行,命令行经常会退出,如果需要在当前工程下再次使用 Claude Code,可以输入以下命令:

$ claude --continue 

这样就可以继续之前的对话,也可以通过上下箭头来查看之前的对话历史。

交互式对话选择

$ claude --resume 

使用该命令后,会显示一个交互式对话选择器,显示:

  • 对话开始时间
  • 初始提示或对话摘要
  • 消息数量

使用箭头键导航并按 Enter 选择对话,您可以使用这个方法选择上下文。

Claude Code 的第一个命令

Claude Code 通过项目目录下的 CLAUDE.md 文件来存储重要的项目信息、约定和常用命令,新项目建议先执行 /init 命令来创建一个 CLAUDE.md 文件。

$ /init 

使用 /init 命令后,Claude Code 会自动根据当前项目情况创建 CLAUDE.md 文件,当然也可以手工编辑改文件,包括:

  • 包括常用命令(构建、测试、lint)以避免重复搜索
  • 记录代码风格偏好和命名约定
  • 添加特定于您项目的重要架构模式
  • 团队协作规范和个人偏好设置

Claude Code 官方称 CLAUDE.md 文件为内存文件。Claude Code 提供三种内存位置,每种都有不同的用途:

类型位置用途使用案例示例
项目内存./CLAUDE.md项目的团队共享指令项目架构、编码标准、常见工作流程
用户内存~/.claude/CLAUDE.md所有项目的个人偏好设置代码样式偏好、个人工具快捷方式
项目内存(本地)./CLAUDE.local.md个人项目特定偏好设置(已弃用,见下文) 您的沙盒 URL、首选测试数据

所有内存文件在启动 Claude Code 时都会自动加载到上下文中。

注:CLAUDE.md 默认创建出来是英文的,你可以让 Claude Code 为你翻译成中文。并且让 Claude Code 后续交流都采用中文并将这个内容写入 CLAUDE.md 文件中。

修改 CLAUDE.md

可以手动向 CLAUDE.md 添加内容,或按 # 键给 Claude Code 一个指令,它会自动将其纳入相关的 CLAUDE.md中。

许多工程师在编码时频繁使用 # 来记录命令、文件和风格指南,然后在提交中包含 CLAUDE.md 的更改,以便团队成员也能受益。

也在会话期间使用 /memory 斜杠命令在系统编辑器中打开任何内存文件进行修改。

常用命令

官方内置了很多命令,可以查看官方文档:https://docs.anthropic.com/zh-CN/docs/claude-code/slash-commands

Claude Code 常见的斜杠命令:

命令用途
/bug报告错误(将对话发送给技术支持)
/clear清除对话历史
/compact [instructions]压缩对话,可选择焦点说明
/config查看/修改配置
/cost显示令牌使用统计
/doctor检查 Claude Code 安装的健康状况
/help获取使用帮助
/init使用 CLAUDE.md 指南初始化项目
/memory编辑 CLAUDE.md 记忆文件
/pr_comments查看拉取请求评论
/review请求代码审查
/status查看账户和系统状态
/terminal-setup安装 Shift+Enter 换行键绑定(仅限 iTerm2 和 VSCode)
/vim进入 vim 模式以切换插入和命令模式

下面介绍几个我常用的命令:

/model 模型切换

如果使用的是 claude max 套餐,就可以通过以下指令来切换模型:

$ /model Select Model Switch between Claude models. Applies to this session and future Claude Code sessions. For custom model names, specify with --model. 1. Default (recommended) Opus 4for up to 50% of usage limits, then use Sonnet 4 ❯ 2. Opus Opus 4for complex tasks · Reaches usage limits ~5x faster✔ 3. Sonnet Sonnet 4for daily use 

max 可以在 Claude 4 Sonnet 和 Claude 4 Opus 之间切换,Pro 只能使用 Sonnet。

如果使用 Opus 被显示了,Claude Code 会有如下提示:

 Approaching Opus usage limit · /model to use best available model 

/clear 清除上下文

使用 /clear 保持上下文聚焦。

在长时间会话期间,Claude Code 的上下文窗口可能会充满不相关的对话、文件内容和命令。这可能会降低性能,有时会分散 Claude 的注意力。在任务间频繁使用 /clear 命令来重置上下文窗口。

/compact 压缩对话

使用 /compact 压缩对话,可以减少上下文窗口中的信息量,只显示焦点信息。

图片和文件

我们经常需要将图片和文件发送给Claude Code,以便它能够理解我们遇到的问题。

Claude Code 可以处理图像信息和文件,可以使用以下任何方法:

  • 将图像拖放到 Claude Code 窗口中
  • 复制图像并使用 Ctrl+v 粘贴到 CLI 中
  • 提供图像路径
  • 使用 @ 符号引用文件,在空格之后输入 @ 符号,Claude Code 会弹出当前目录下的路径可以供我们使用(这也是我最常用的方式没,非常好用)。

深度思考

Claude Code 可以通过自然语言要求其进行深度思考,在使用复杂问题的时候使用这一功能,这也会消耗大量的额度点数。

官方提供使用示例:

  • “深入思考OAuth2身份验证系统的最佳实现方法”
  • “仔细分析这个架构设计的潜在问题和优化方案”
  • “深度思考这个算法的时间复杂度优化可能性”

进入深度思考模式后,Claude Code 提示词里面会有 Thinking... 提示词,表示正在深度思考中。

自动编辑模式

使用场景:不需要每次创建文件、编辑文件操作都需要你的确认。

使用方式:shift+tab 按一次,就可以进入该模式。

⏵ auto-accept edits on (shift+tab to cycle)

MCP

MCP 是目前 AI 大模型上面最强大的功能,所有 AI 编程工具都会支持。 Claude Code 官方文档可以查看: https://docs.anthropic.com/zh-CN/docs/claude-code/mcp

基本语法

claude mcp add <名称> <命令> [参数…]

很多开发者觉得CLI向导太繁琐,特别是输错了要重来。直接编辑配置文件更高效(推荐高级用户)。

配置文件位于 ~/.claude.json

MCP服务器作用域详解

  1. Local作用域(默认)
    只在当前目录可用
    配置存储在 ~/.claude.json 的 projects 部分
    适合:个人项目特定工具
  2. User作用域(全局)
    在所有项目中都可用
    使用 -s user 标志添加
    适合:常用工具如文件系统、数据库客户端
  3. Project作用域(团队共享)
    通过 .mcp.json 文件共享
    使用 -s project 标志添加
    适合:团队共享的项目特定工具

mcp 工具列表

本人非专业人士,没有使用太多的 MCP,目前使用了以下 MCP 工具。

  1. Sequential Thinking(思维链)
claude mcp add thinking -s user -- npx -y @modelcontextprotocol/server-sequential-thinking 

用途:复杂问题分步骤思考。

目前查询和实际使用中发现,Cluade Code 会在复杂问题时候自动调用 Sequential Thinking。

  1. context7
$ claude mcp add --transport sse context7 https://mcp.context7.com/sse 

用途:能直接从信息源提取最新的、特定版本的文档和代码示例。

据说在提示词中加入 @context7 标记,Claude Code 会自动从 context7 中提取最新文档和代码示例(未真实测试)。

查看当前安装的 MCP 工具

可通过 claude mcp list 查看当前安装的 MCP 工具。

$ claude mcp list thinking: npx -y @modelcontextprotocol/server-sequential-thinking context7: https://mcp.context7.com/sse (SSE)

在 Claude Code 中,输入 /mcp list 也可以查看当前安装的 MCP 工具。

/mcp Manage MCP servers ❯ 1. context7 ✔ connected · Enter to view details 2. thinking ✔ connected · Enter to view details 

给大家抄作业的时候到了

本人最近一个月都在使用 Claude Code,发现 Claude Code 在实际使用中比 Cursor 强大很多,比较少存在 AI 偷懒的行为,特别是多文件,批量操作的场景下,Claude Code 的效率比 Cursor 高很多。

我也尝试过多个套餐,现在将相关套餐的购买方式分享给大家,可以让大家少走弯路。

由于 Claude Code 会对使用地区有限制,使用不当会导致封号,大家需要特别当心。

购买方式

  1. 官网充值购买,有 3 种资费,分别为 Pro、Max5x、Max20x

这里非常不推荐买 Pro,Pro 每 5 个小时可以发送大约 10~40 个 Claude Code 提示,在实际使用中,根据问题的复杂程度,一般只能交互 2-4 次(也不知道怎么计算的额),然后会告诉你被现实了,下一次几点可以使用。(本人真实使用过),

  1. 国内镜像站:本人真实购买过 1 天体验套餐,不推荐

由于上述原因,这里就引入了国内镜像站,淘宝上大家卖的 Claude Code 都是这类,在淘宝上购买 Claude Code 套餐一点要先问清楚是直连还是镜像。

套餐价格大概如下:(请自行 taobao 确认)

  • 9.8 RMB:1 天体验
  • 299 RMB: 月卡
  • 699 RMB: 大额月卡

如果是镜像站点的 Claude Code 安装的也不是官方的 CLI 工具,是镜像站修改过的工具(具体不知道怎么修改的)。

镜像站使用的是点数(也不知道怎么计算的),有个网页里面可以看到点数在消耗,消耗起来也挺快的,本人 9.8 体验套餐,也只是玩了 3-4 次对话就没有了。

个人推测镜像站的原理,就是有很多个号,在他们服务器上轮流使用,中转,镜像站也要赚钱,使用效果肯定不如直连官网。

  1. 强烈推荐 和其他人拼单购买直通官网的 Max20x 套餐,本人目前使用的就是这个。

200 美金的 Max20x 套餐目前来说还是比较贵的(土豪除外,看到群里面有人同时买了 3 个 Max20x 在用),现在淘宝上卖 1899 左右。

现在有一种模式是几个人拼单,然后一起使用。一般是 4 人/ 5人 拼单,每个人价格是 400/500 左右,卖家通过拼单赚差价,卖家来保证网络问题。

本人现在用的是 5 人拼单的,每月 399 人民币,体验了 1 周下来,基本上没怎么遇到流量消耗过多而无法使用的情况,不能说没有,1-2次,但是等个几十分钟,就又可以继续使用了,还可以享受到 Opus 模型的能力。

如果有网友想一起拼单,可以联系本人,可以推荐。

关于 opus 模型

如果你的项目很复杂,就果断进入 claude 4.0 opus 模式,然后让 claude 进入深度思考模式,全局性的分析问题,给出系统性的解决方案和修复建议。

Claude 4.0 opus + 深度思考很费 token,所以要谨慎使用,不要滥用。

不要听国内镜像站的人和你说 opus 和 sonnet 是一样的这种话。

本人实际测试过,同样的一个问题,我让 sonnet 分析修复了 2 次,都没有修复,切换到 Opus 让它再次全局分析后就修复问题了。

总结

本人非 AI 专业人士,使用 AI 编程工具,主要是为了提高工作效率,减少重复劳动,让 AI 做一些重复性的工作,解放自己的双手。

如果你受困于 Cursor 的慢,受困于 Cursor 显示使用 Claude 4.0 模型,赶紧加入使用 Claude Code 吧,我相信你使用一段时间后,就再也无法忍受 Cursor 慢吞吞的干活节奏了。

Read more

Face Analysis WebUI入门必看:cache目录清理策略与磁盘空间自动管理

Face Analysis WebUI入门必看:cache目录清理策略与磁盘空间自动管理 1. 为什么你得关心cache目录? 刚跑通Face Analysis WebUI,上传几张照片,点下“开始分析”,结果框里跳出漂亮的人脸关键点和年龄预测——这感觉真不错。但过几天再打开系统,发现磁盘空间告急,/root/build/cache/目录悄悄涨到了12GB,而你明明只传了不到50张图。 这不是个例。很多用户在部署完这个基于InsightFace的智能人脸分析系统后,都遇到同一个隐形问题:cache目录像雪球一样越滚越大,没人管它,它就自己长大。 它不报错,不崩溃,只是默默吃掉你的磁盘空间,直到某天df -h显示/dev/sda1 99%,WebUI突然卡住、图片上传失败、甚至模型加载超时——这时候才想起翻日志,发现是OSError: No space left on device。 这篇文章不讲怎么安装、不讲API调用,就专注解决一个最实际、最容易被忽略的问题:如何让cache目录保持健康,

Chrome 开发者工具(DevTools)快速入门——前端必备技能

Chrome 开发者工具(DevTools)快速入门——前端必备技能

在前端开发中,Chrome 开发者工具(DevTools) 是我们排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求,还是调试 JavaScript 逻辑,DevTools 都能提供直观高效的方式帮助我们“看清代码背后发生了什么”。 这篇笔记将带你快速入门,从最基本的面板功能到常用调试技巧,让你能在实战中灵活运用它,提升开发效率与问题解决能力。 1. 打开方式与放大缩小 1. 快捷键: * Windows/Linux:F12 或 Ctrl + Shift + I * macOS:Command + Option + I 1. 右键打开:在页面任意元素上右键 → “检查 (Inspect)” 2. 菜单打开:点击右上角 ⋮ → “更多工具” → “开发者工具” 在使用 Chrome 开发者工具时,可以通过 鼠标滚轮 快速调整界面缩放。

如何解决前端Axios请求报Net::ERR_CONNECTION_REFUSED连接拒绝问题

如何解决前端Axios请求报Net::ERR_CONNECTION_REFUSED连接拒绝问题

Net::ERR_CONNECTION_REFUSED是前端使用Axios发起HTTP请求时,最常见的网络层错误之一,该错误的出现与Axios语法、接口请求参数无关,也并非前端代码逻辑问题,核心是前端客户端无法与目标服务端建立基础的TCP连接,服务端对客户端发起的连接请求做出了拒绝响应。这类问题的排查需跳出前端代码本身,从「服务端运行状态」「前端请求配置」「网络链路通畅性」「端口/防火墙限制」四个核心维度逐步验证,本地开发环境还需额外检查代理转发配置,以下是从易到难的完整排查流程和针对性解决方案,覆盖本地、局域网、线上生产所有开发场景。 文章目录 * 一、核心认知:错误本质与核心诱因 * 1.1 错误的核心本质 * 1.2 触发错误的四大核心诱因 * 1.3 关键区分:避免与其他错误混淆 * 二、从易到难:分步排查与针对性解决方案 * 步骤1:验证目标服务端是否正常运行,有无进程监听指定端口 * 具体验证方法 * 针对性解决方案 * 步骤2:检查前端Axios请求配置,确保地址/端口/协议完全正确

【前端】Vue3+elementui+ts,给标签设置样式属性style时,提示type check failed for prop,再次请出DeepSeek来解答

【前端】Vue3+elementui+ts,给标签设置样式属性style时,提示type check failed for prop,再次请出DeepSeek来解答

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!🌹 目录 * 前言 * 警告信息 * DeepSeek解答 * 问题原因 * 解决方案 * 关于 !important * 最终建议写法 * Vue小技巧 * Vue 3 实用代码小技巧 * 1. 组合式 API 技巧 * 2. 组件通信技巧 * 3. 模板技巧 * 4. 性能优化技巧 * 5. 组合式函数技巧 * 6. 生命周期技巧 * 7. 路由技巧 (Vue Router) * 8. 状态管理 (Pinia) 技巧 * 9. 调试技巧 * 文章推荐 前言 翻看了下上一篇写前端文章还是一年前,