【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

【Java Web学习 | 第四篇】CSS(3) -背景

【Java Web学习 | 第四篇】CSS(3) -背景

🌈个人主页: Hygge_Code🔥热门专栏:从0开始学习Java | Linux学习| 计算机网络💫个人格言: “既然选择了远方,便不顾风雨兼程” 文章目录 * CSS背景样式全解析🥝 * 4.1 背景颜色 (`background-color`) * 4.2 背景图片 (`background-image`) * 4.3 背景平铺 (`background-repeat`) * 4.4 背景图片位置 (`background-position`) * 4.5 背景图像固定 (`background-attachment`) * 4.6 背景属性复合写法 * 4.7 背景色半透明 (`rgba`) * 综合代码演示 * 学习资源推荐🐦‍🔥 CSS背景样式全解析🥝 在网页设计中,背景样式是塑造页面视觉效果的关键元素之一。通过CSS的背景属性,我们可以为页面添加丰富的视觉效果,包括背景颜色、背景图片、平铺方式、定位以及固定等。

uni-app——uni-app 小程序 之 【按钮失效问题排查(前端+后端)】

一、问题背景 在某业务流程系统中,当业务单据进入特定待处理状态后,用户需要在对应操作页面完成核心操作,点击页面中的两个关键操作按钮(提交类、完结类)以推进流程流转。 然而实际操作时,两个按钮均出现报错提示,无法正常触发流程跳转,业务无法继续推进。 二、问题复现 操作步骤: 1. 登录系统账号(具备对应操作权限) 2. 进入业务单据列表,找到一条处于特定待处理状态的单据 3. 点击进入该单据的操作详情页面 4. 填写页面所需基础信息、上传相关附件 5. 点击页面中的提交类或完结类按钮 6. 结果:按钮点击后报错,流程无法流转到下一节点,操作失败。 三、问题分析 经过多轮排查,发现问题并非单一环节导致,而是涉及前端和后端两层,属于接口调用、参数传递及数据校验的联动异常,具体分析如下: 1. 前端:页面加载时未获取核心业务数据 操作详情页面进入后,未先调用查询接口获取单据关联的核心数据,直接使用空值的关键标识调用操作接口,导致后端无法查询到对应业务记录,接口调用失败。

前端代码质量保证:让你的代码更可靠

前端代码质量保证:让你的代码更可靠 毒舌时刻 代码质量?听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便写几个测试就能保证代码质量?别做梦了!到时候你会发现,测试代码比业务代码还多,维护起来比业务代码还麻烦。 你以为ESLint能解决所有问题?别天真了!ESLint只能检查代码风格,无法检查逻辑错误。还有那些所谓的代码质量工具,看起来高大上,用起来却各种问题。 为什么你需要这个 1. 减少错误:代码质量保证可以帮助你发现和修复代码中的错误,减少生产环境中的问题。 2. 提高可维护性:高质量的代码更容易理解和维护,减少后期的维护成本。 3. 促进团队协作:统一的代码质量标准可以便于团队成员之间的协作,减少沟通成本。 4. 提高开发效率:高质量的代码可以减少调试和修复错误的时间,提高开发效率。 5. 提升代码安全性:代码质量保证可以帮助你发现和修复安全漏洞,提升代码的安全性。 反面教材 // 这是一个典型的代码质量问题示例 // 1. 代码风格不一致 function getUser(id) { return fetch(`/api/

AI大模型驱动的软件开发全流程变革:从需求分析到智能运维的技术演进与未来展望

AI大模型驱动的软件开发全流程变革:从需求分析到智能运维的技术演进与未来展望

目录 * 引言:当软件开发遇上"工业革命4.0" * 一、需求分析:从用户故事到智能需求工程 * 1.1 智能需求解析器 * 1.2 需求验证闭环 * 二、设计阶段:AI架构师的诞生 * 2.1 微服务自动设计 * 2.2 技术选型决策树 * 三、编码阶段:从辅助到主导 * 3.1 多语言代码生成 * 3.2 代码审查革命 * 四、测试阶段:质量保证的范式转移 * 4.1 智能测试用例生成 * 4.2 缺陷预测模型 * 五、部署与运维:自愈式系统的崛起 * 5.1 智能容量规划 * 5.