【AI辅助编程】【Claude Code】----秒杀 Cursor!Claude Code 保姆级教程,从安装到实战全过程,一篇文章给你透

【AI辅助编程】【Claude Code】----秒杀 Cursor!Claude Code 保姆级教程,从安装到实战全过程,一篇文章给你透

文章目录

前言

我以为cursor已经天下无敌了,cluade code 这是谁的部将?
作为cursor的老用户,最近使用了 cluade code 才发现,cursor已经out了!直接秒杀。详细入门到实战详细教程,直接白嫖大模型tokens。包含安装方式、配置步骤和完整实战项目案例。

一、基础概念解析,

1.1、什么是Claude Code?

概念核心定义核心用途
Claude CodeAnthropic 推出的 AI 代码助手(Claude 大模型的代码专项版本),支持代码生成/调试/重构/解释,兼容多语言。图形化/界面化使用 AI 写代码、查 Bug、优化逻辑,适合可视化操作的场景。
Claude Code CLIClaude Code 的命令行工具(Command Line Interface),无图形界面,纯终端交互。集成到开发流程(如脚本/CI/CD)、服务器/无界面环境使用,支持批量代码处理。

Claude Code CLI :

在这里插入图片描述

1.2、Claude Code能干嘛?

【核心能力】

  1. 需求转代码:自然语言描述功能,自动规划、编写并验证多文件代码,适配主流框架。
  2. 调试与修复:分析错误日志/代码库,定位根因并修复(含多文件协调修改),支持测试与构建系统联动。
  3. 代码库导航:全局理解项目结构与依赖,快速解答架构、调用链、接口设计等问题,可关联外部数据源。
  4. 自动化繁琐任务:批量修复 lint、解决 Git 冲突、生成文档/Release Notes,可集成 CI 自动执行。
  5. 工程级修改与重构:跨文件重构、性能优化、代码标准化,遵循团队规范并需显式授权才修改文件。
  6. 集成与协作:对接 GitHub/GitLab,从读取需求到提交 PR 全流程处理,支持 MCP 访问外部数据。
  7. 可以集成各种MCP,实现自动编写测试用例,自动执行测试用例,生成测试报告;git代码自动审核,等等
    【典型场景】
  • 新功能开发与 Bug 修复
  • 大型项目上手与代码评审
  • 重构老旧系统与批量规范整改
  • CI/CD 流程自动化与 PR 辅助

二、安装 Claude Code

2.1、(方式一)基于node.js环境

前提条件: 您需要安装 Node.js 18 或更新版本环境 安装教程 https://nodejs.org/en/download/ MacOS 用户请使用 nvm 方式安装 Nodejs,若直接安装包安装后续会遇到权限问题 Windows 用户还需安装 Git for Windows 进入命令行界面,安装 Claude Code npm install -g @anthropic-ai/claude-code 运行如下命令,查看安装结果,若显示版本号则表示安装成功 claude --version 
在这里插入图片描述
在这里插入图片描述

2.2、(方式二)不依赖node.js环境,原生版(推荐)

cmd命令行 执行 :winget install Anthropic.ClaudeCode

在这里插入图片描述


在这里插入图片描述


注意:安装完毕后,需要执行一下 claude 命令(它会初始化一些配置文件)

在这里插入图片描述

三、配置

cluade code 内置了大模型(收费),且 Anthropic 没有对国内用户开放。
教你如何配置国内大模型(免费)

在这里插入图片描述

智谱 GLM Coding 模型 Claude Code、Cline 等 20+ 大编程工具无缝支持,“码力”全开,
链接:https://www.bigmodel.cn/glm-coding?ic=IHCJHIBWEC
获取智谱模型链接

(智谱大模型在 12 月 8 日 - 1 月 31 日的跨年限时活动中,新用户注册可领取2000 万基础 token,完成实名认证后还能额外获得500 万 token,总计2500 万 token(含 2000 万入门级额度和 500 万企业级额度)。)

3.1配置大模型端点和密钥

1.注册账号 (通过上面提供的连接注册)

2.获取API Key

在这里插入图片描述
在这里插入图片描述

密钥:d4fd383aadfe4f7ca329cdffcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

3.配置cluade code 环境变量

-# 支持 MacOS & Linux & Windows, 注意不同系统配置文件路径不一样。注意需保证修改的 JSON 文件格式正确性(比如多或少,)。
-# 编辑或新增 settings.json 文件
-# MacOS & Linux 为 ~/.claude/settings.json
-# Windows 为用户目录/.claude/settings.json
-# 新增或修改里面的 env 字段
-# 注意替换里面的 your_zhipu_api_key 为您上一步获取到的 API Key

{"env":{"ANTHROPIC_AUTH_TOKEN":"your_zhipu_api_key_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","ANTHROPIC_BASE_URL":"https://open.bigmodel.cn/api/anthropic","API_TIMEOUT_MS":"3000000","CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC":1}}
在这里插入图片描述

-# 再编辑或新增 .claude.json 文件
-# MacOS & Linux 为 ~/.claude.json
-# Windows 为用户目录/.claude.json
-# 新增 hasCompletedOnboarding 参数

{"hasCompletedOnboarding":true}
在这里插入图片描述

4.测试配置:

开始使用 Claude Code
配置完成后,进入一个您的代码工作目录,在终端中执行 claude 命令即可开始使用 Claude Code
若遇到「Do you want to use this API key」选择 Yes 即可
启动后选择信任 Claude Code 访问文件夹里的文件,如下:

在这里插入图片描述


配置错误会显示:

在这里插入图片描述


配置正确会显示:

在这里插入图片描述

5.切换模型(非必要,可跳过)

如何切换使用模型

在这里插入图片描述
{"env":{"ANTHROPIC_DEFAULT_HAIKU_MODEL":"glm-4.5-air","ANTHROPIC_DEFAULT_SONNET_MODEL":"glm-4.7","ANTHROPIC_DEFAULT_OPUS_MODEL":"glm-4.7"}}

启动一个新的命令行窗口,运行claude启动 Claude Code,在 Claude Code 中输入/status确认模型状态:

在这里插入图片描述

6.查看token用量

在这里插入图片描述

四、项目实战例

题外话:如何导入项目?不需要导入项目,在cmd黑窗口进入到项目目录执行cluade就行。

4.1、实战背景:

github多维表开源项目apitable,一共有5个服务,全部服务在docker里跑起来,系统是正常的,此时想对后台服务backend-server-1 停止掉,并在idea编辑器里运行,且二次开发,第一步就难住了,

在这里插入图片描述


出现一个奇怪的问题,项目正常启动,能连上room服务的Socket,操作数据的时候就会掉断开连接。

在这里插入图片描述

4.2、难点:

1、项目是陌生的项目。快速部署,快速上手。
2、该配置的都配置了,
3、奇怪的是docker跑起来,可以正常的用;本地编辑器能跑起来,功能用不了,
4、针对陌生项目,如何快速定位问题?

4.3、上Claude Code:

模拟对话过程:

【我】: room-server-1 backend-server-1 imageproxy-server-1 databus-server-1 minio 1、这5个服务都启动在docker上,页面启动在我的idea编辑器起里,他是正常的, 2、如果我的backend-server-1 在docker停掉,我在我的编辑器里启动backend-server-1, 连接url: ${SOCKET_URL:http://localhost:3002}第一次连接是正常的,后面就连接失败,为什么?我应该怎么改 【Claude】: 可能是连接时间不够,从3秒改到5秒,需要我帮你改吗? YES?NO? ----------------------------------- 【我】:YES ,还是不行,再帮我看看 【Claude】:可能是网络的问题,需要我帮你看看网络吗? YES?NO? ----------------------------------- 【我】:YES 【Claude】:开始检查网络(包括端口,防火墙,域名...等等)网络没有问题,可能是socket 客户端和服务端版本不一一致,需要我帮你检测一下吗? ----------------------------------- 【我】:YES 【Claude】:找到了!版本不一致,需要我帮你改了吗? ----------------------------------- 【我】:YES ,还是不行! 【Claude】:我帮你看看room服务的日志,稍等,日志没有报错。需要我帮你看看room源代码吗? ----------------------------------- 【我】:YES , 【Claude】:找到了!room服务socket通讯用的是docker容器名,不是ip。需要帮你改吗? ----------------------------------- 【我】:YES ,可以了!真棒! 

下面是完整对话过程:

在这里插入图片描述


在这里插入图片描述
在这里插入图片描述


在这里插入图片描述

问题:

在这里插入图片描述


已解决:

在这里插入图片描述

五、集成到编辑器内

5.1 idea插件式

打开 Jetbrains IDE(如 IntelliJ IDEA、PyCharm 等),进入插件市场,搜索「Claude Code」插件并进行安装。

在这里插入图片描述

安装完成后,重启 IDE 即可使用 Claude Code 功能。

在这里插入图片描述

5.2 Vscode

Claude Code Vscode 插件支持在 Vscode 及基于 Vscode 的 IDE(如 Cursor、Trae 等)中使用。
打开 Vscode,进入扩展市场,搜索并安装「Claude Code」插件进行安装。

在这里插入图片描述

安装完成后,点击如下图中的右上角 Claude Code 图标,即进入 Claude Code 页面,在登录页面等待几秒待其初始化完成后即可使用。

在这里插入图片描述


成功进入 Claude Code 对话框后,在对话框输入 /config 进入设置,勾选 Disable Login Prompt 配置来关闭登录页面。

在这里插入图片描述


完毕!现在就可以在 IDE 中正常使用 Claude Code 进行开发了。

5.3 Cursor

在 Cursor 中使用 GLM Coding Plan 的方法
将 GLM-4.7 模型通过 OpenAI 协议在 Cursor 中自定义配置模型接入使用。
注意:由于 Cursor 的限制,只有订阅了 Cursor 高级会员及以上的用户才支持自定义配置模型。
注意:若非 Cursor 高级会员,配置后会报错 The model GLM does not work with your current plan or api key.

  1. 安装 Cursor
    访问 Cursor 官网下载并安装适合您的操作系统的版本。
  2. 保存并切换模型
    配置完成后,保存设置并在主页上选择您刚创建的 GLM-4.7 Provider。

开始使用
通过该设置,您可以开始使用 GLM-4.7 模型进行代码生成、调试、任务分析等工作。

在这里插入图片描述

创建新 Provider/Model
在 Cursor 中,打开 “Models” 部分,并点击 “Add Custom Model” 按钮。

在这里插入图片描述

选择 OpenAI 协议。
配置 OpenAI API Key(从智谱开放平台获取)。
在 Override OpenAI Base URL 中,将默认 URL 替换为 GLM-4.7 的接口地址:https://open.bigmodel.cn/api/coding/paas/v4。
输入您希望使用的模型,如 GLM-4.7, GLM-4.6 或 GLM-4.5-air。
注意: 在 Cursor 中,需要输入模型的大写名称不能小写名称,如 GLM-4.7。

在这里插入图片描述

六、常用命令

/clear:清理上下文
/compact:压缩上下文
@xxx:指定文件
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

上下文管理:

核心用 /clear(重置)、
/compact(压缩),
辅助用 /ls(查看已加载文件)。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
文件操作:

@文件名(指定文件)是高频简写,
/load//unload 用于精准管理文件加载。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
代码核心操作:

/run(执行)、
/fix(修复)、
/refactor(重构)是写代码时最常用的功能命令。

Read more

一文了解Blob文件格式,前端必备技能之一

一文了解Blob文件格式,前端必备技能之一

文章目录 * 前言 * 一、什么是Blob? * 二、Blob的基本特性 * 三、Blob的构造函数 * 四、常见使用场景 * 1. 文件下载 * 2. 图片预览 * 3. 大文件分片上传 * 四、Blob与其他API的关系 * 1. File API * 2. FileReader * 3. URL.createObjectURL() * 4. Response * 五、性能与内存管理 * 六、实际案例:导出Word文档 * 七、浏览器兼容性 * 八、总结 前言 最近在项目中需要导出文档时,我首次接触到了 Blob 文件格式。作为一个前端开发者,虽然经常听到 "Blob" 这个术语,但对其具体原理和应用场景并不十分了解。经过一番研究和实践,

iterm2-snazzy主题自定义教程:如何根据个人喜好调整终端色彩

iterm2-snazzy主题自定义教程:如何根据个人喜好调整终端色彩 【免费下载链接】iterm2-snazzyElegant iTerm2 theme with bright colors 项目地址: https://gitcode.com/gh_mirrors/it/iterm2-snazzy iterm2-snazzy是一款拥有明亮色彩的优雅iTerm2主题,能让你的终端界面更加美观舒适。本教程将带你了解如何安装该主题并根据个人喜好调整终端色彩,打造专属于你的个性化终端体验。 一、快速安装iterm2-snazzy主题 1.1 克隆项目仓库 首先,打开终端,执行以下命令克隆项目仓库: git clone https://gitcode.com/gh_mirrors/it/iterm2-snazzy 1.2 导入主题文件 进入克隆好的项目目录,找到Snazzy.itermcolors文件。打开iTerm2,依次点击iTerm2->Preferences->Profiles-&

AI 直接生成前端代码:我的软件原型设计流,从此告别重复画图

AI 直接生成前端代码:我的软件原型设计流,从此告别重复画图

近年来,AI 辅助开发越来越成熟,尤其是在快速原型设计方面。今天分享一下我如何借助 Cursor、Trace solo、ChatGPT、Qoder 等 AI 工具,高效完成软件原型的自动绘制与代码生成。 📌 核心流程三步走 1️⃣ 用 AI 输出需求文档(非技术描述) 首先,我会让 AI 根据产品思路或功能描述,生成一份清晰、无技术细节的需求文档。这一步不写代码,只聚焦逻辑与用户流程。 2️⃣ AI 生成 HTML 原型代码 基于上一步的需求文档,直接让 AI 生成对应的 HTML 代码,快速搭建出可交互的前端原型。支持实时预览,直观看到界面效果。 3️⃣ 反复微调,直至满意 生成的原型往往需要多次调整。通过自然语言描述修改方向,AI 可快速迭代代码,直至达到想要的交互与视觉效果。

前端可访问性:别让你的网站对某些人关闭大门

前端可访问性:别让你的网站对某些人关闭大门 毒舌时刻 这网站做的跟迷宫似的,正常人都找不到路,更别说有障碍的人了。 各位前端同行,咱们今天聊聊前端可访问性。别告诉我你还在忽略可访问性,那感觉就像在公共建筑里不建无障碍通道——能进,但不是所有人都能进。 为什么你需要关注可访问性 最近看到一个项目,按钮没有焦点状态,表单没有标签,屏幕阅读器根本无法正常工作。我就想问:你是在做网站还是在做密室逃脱? 反面教材 // 反面教材:忽略可访问性 function App() { return ( <div> <h1>我的网站</h1> <div> <input type="text" placeholder="用户名" /> <