Claude Code实战：半天搭起Spring Boot+Vue前后端分离项目

先说结论：Claude Code 确实很猛，尤其是拿来干前后端分离这种“模式化程度极高”的活，效率不是开玩笑的。我自己最近拿它从零搭了一个 Spring Boot + Vue 的项目，包含用户登录、分页列表、增删改查和跨域联调，整个过程真就半天时间。这篇文章不打算给你讲虚的概念，我直接把安装、需求描述、代码生成、联调验证、遇到报错怎么排，一条线全写清楚，顺带把我踩过的坑也交代一遍。

先定位一下你：如果你会基本的命令行操作，以前写过或者接触过前后端分离项目，但不想再手动建几十个文件、配一遍又一遍的 CORS 和拦截器，那 Claude Code 是真的能帮你省下大把时间。即使你是刚入行的新人，只要愿意照着下面的流程走，也能在白盒理解的前提下跑通一个完整项目——前提是你得知道它为什么这么做，别只会按回车。

1. 先搞懂 Claude Code 到底是个啥

1.1 它和普通 AI 聊天框的本质区别

我们平时用的网页版 AI，本质是个“顾问”。你把报错信息复制给它，把需求描述给它，它给你答案，然后你再手动把代码粘回项目里，改完再跑，报错再复制，来回折腾。Claude Code 不一样，它跑在终端里，直接住在你的项目目录中。它可以读取当前目录下的文件，甚至整个仓库，然后自己去修改代码、创建新文件、执行构建命令，跑完测试之后还会根据报错继续补代码。

你真正体验过一次就会明白，这种感觉更像“有个实习生坐在你旁边，你说需求，他动手改，改完自己跑测试，跑挂了自动修”。比如你甩一句“帮我把 UserController 里的参数校验抽成一个通用方法”，它会直接打开文件改完，然后提示你编译验证一下。你在终端里确认一下 diff（代码改动差异），没问题直接让它继续。

我还想强调一个关键差异：它的上下文不是一次性的。Claude Code 能在一个会话里持续记住你前面的决策和项目结构，不会像网页聊天框那样，换个对话就失忆。这就让“从搭架子到联调”这种长链路任务变得可行，否则你每问一次都要重新解释一遍“这是一个 Spring Boot 项目，用的是 JPA，数据库是 H2”，沟通成本直接爆炸。

1.2 为什么前后端分离项目是它的最佳试验场

前后端分离项目的开发模式，说实话已经相当“模板化”了。从项目结构看，后端无非是 controller、service、repository、entity、配置类，前端无非是 views、api 封装、路由、组件。从联调看，无非是统一返回结构、处理跨域、对接字段。这类项目的难点往往不在于某个算法，而在于大量重复的胶水代码，以及前后端之间的“约定”。

这种场景正好是 Claude Code 的舒适区。它见多识广，对 Spring Boot、Vue 这一套成熟技术栈的模板结构非常熟悉，生成出来的代码风格也基本符合社区习惯。更关键的是，你可以用一段自然语言把前后端之间的接口契约描述清楚，比如“统一返回结构是 { code, message, data }，分页参数是 page 和 size”，它能同时在前端代码和后端代码里贯彻这个约定，两边对齐。

我用它干一次之后最大的体会是：以前搭项目，最烦的不是写某个接口，而是前端调不通、字段对不上、状态码解释不清。Claude Code 能把这套“约定”在两端同时落地，这种一致性维护能力，比人肉复制粘贴要稳得多。

1.3 和 Codex、Cursor 这类工具怎么选

最近 Codex 也很火，后台经常有人问“选 Codex 还是 Claude Code”。我不做拉踩，只说说实际使用中的差异。Cursor 本质是编辑器，靠 IDE 集成和交互式补全吃饭，适合日常开发场景，但你想让它一口气完成“从零搭全栈”这种多文件任务，操作路径反而绕。Codex 是 OpenAI 的编码代理，云沙箱模式下能执行命令，适合在独立环境里跑自动化任务，但如果你习惯本地开发，把全部流程迁到云端还是有个适应期。

Claude Code 的特点是“本地优先 + 终端原生的长任务执行”。它和 Cursor 不冲突，我实际工作是 VS Code 写代码，遇到需要批量改文件、搭项目骨架这种活，就切到终端里交给 Claude Code。它和 Codex 也不是替代关系，而是风格取向不一样：Claude Code 在长流程任务中的指令遵循度、上下文连贯性让我更放心。

如果你只是想在编辑器里得到实时补全和问答，选 Cursor 完全没问题。如果你想体验“我给需求，它把整个项目搭起来”的自动化开发流程，那 Claude Code 值得认真试试。

2. 安装与准备：别在环境上浪费半天

2.1 前置条件与安装流程

Claude Code 的安装门槛很低，前提是你电脑上有 Node.js。我建议用 18 以上版本，我实际用的是 20 LTS，整体很稳。没有 Node.js 的话，先去官网下个 LTS 版本装好，这也是很多前端工具链的基础依赖。

安装本身就是一个命令的事：

bash复制npm install -g @anthropic-ai/claude-code

装完之后，在项目目录里输入 claude 就能启动。首次启动会让你登录授权，走的是 Claude 账号体系，网页版订阅用户可以直接用，或者你也可以选择 API Key 方式。这里有一个小提醒：很多人在这一步卡住是因为公司网络访问不了 npm，解决办法不是硬等，而是先切换成国内镜像源：

bash复制npm config set registry https://registry.npmmirror.com

切换完再执行安装命令，速度会快很多。这也是我第一次装的时候踩过的坑，干等了十分钟没反应，后来才想起来 registry 没换。

2.2 三个高频安装报错排查

我在好几个群看到的消息，基本都集中在下面这几个错误上。我把现象、原因、解决办法列成一张表，你可以直接对号入座。

关于 PowerShell 那个报错，我多说一句。很多人一看到“running scripts is disabled”就慌，其实它只是 Windows 的安全策略限制了脚本执行。改执行策略的时候注意别用 -Scope LocalMachine，用当前用户级别就够了，这样只影响当前账户，不会动系统的全局安全配置。

2.3 桌面版、VS Code 扩展和纯 CLI 怎么选

Claude Code 现在有几种形态：原生的 CLI、VS Code 扩展、还有桌面版客户端。我三个都试过，说下真实感受。

如果你不排斥终端，CLI 是主力，它最轻量，功能也最完整。VS Code 扩展适合想看到代码上下文、又不想离开编辑器的人，它把“确认文件修改”做成了图形界面，点一下接受或拒绝，对新手更友好。桌面版其实是个套壳客户端，适合嫌终端太硬核、想要一个“独立软件”感觉的人，但功能相对封闭，像一些快速命令、深度配置项可能没有 CLI 那么齐全。

我自己的组合是：日常需求直接命令行说，涉及批量改动时打开 VS Code 扩展，借助它查看 diff 和逐文件确认。另外，后台很多人问“claude code + cc switch + ollama”这种组合，cc switch 是个开源小工具，用来在一套 Claude Code 环境里切换不同的模型服务配置，适合那些想折腾本地模型、多家模型切换的玩家，后面进阶部分我会展开讲一下原理。

3. 半天产出前后端分离项目的完整实操

3.1 动手前先花 10 分钟把需求写清楚

这是我最想强调的一步：别一上来就敲 claude 然后甩一句“帮我做一个前后端分离项目”，那样神仙也救不了它。Claude Code 再强，也需要一个边界清晰的需求描述。什么是边界清晰？技术栈、目录结构、核心功能、接口格式、联调方式，这五样至少要讲明白。

我实际发给 Claude Code 的 prompt 长这样：

text复制请在当前目录下创建一个前后端分离项目：

1. backend 目录：Spring Boot 3.2 + Maven + Java 17 + H2 数据库 + Spring Data JPA
   - 提供用户管理相关接口：分页查询、新增、修改、删除
   - 实体字段：id、username、password、email、createdAt
   - 统一返回结构为 { code, message, data }
   - 写一个简单的全局异常处理，返回同样结构

2. frontend 目录：Vue 3 + Vite + Element Plus + Axios + Vue Router
   - 页面包括：登录页、用户列表页
   - 用户列表页支持分页、新增弹窗、编辑弹窗、删除确认

3. 前端 Vite 配置：/api 开头的请求转发到 http://localhost:8080

4. 后端开启 CORS，允许 http://localhost:5173 访问

5. 全部完成后，分别启动后端和前端，验证接口打通。

这条 prompt 看起来很长，但每一句都有明确目的。技术栈写清楚，它就知道依赖怎么配、目录怎么建；统一返回结构写清楚，它就明白 controller 的封装怎么写、前端 axios 拦截器怎么解析；代理和后端端口写清楚，就省掉了联调时最常见的地狱级跨域问题。

你可能会担心“我描述得不够专业怎么办”。没关系，Claude Code 会问你。它拿到需求后如果发现信息不完整，会列出几个问题，比如“数据库表结构有没有初始化要求”“删除是物理删除还是逻辑删除”，这时候你按实际场景回答就行。这个过程本身就是一次很好的需求澄清练习。

3.2 后端：Spring Boot 脚手架与接口生成

Claude Code 拿到这个需求之后，会先自己规划文件结构，然后逐文件生成。我当时的后端文件清单大概是这样的：

• backend/pom.xml：依赖管理，包含 Web、JPA、H2 等
• backend/src/main/java/.../Application.java：启动类
• backend/src/main/java/.../entity/User.java：用户实体
• backend/src/main/java/.../repository/UserRepository.java：JPA 数据访问层
• backend/src/main/java/.../controller/UserController.java：接口层
• backend/src/main/java/.../common/Result.java：统一返回结构
• backend/src/main/java/.../exception/GlobalExceptionHandler.java：全局异常处理
• backend/src/main/resources/application.properties：数据源、端口等配置

整个生成过程它会一步步来，每创建一个文件都给我看一下改动内容，我确认后它再继续。这里有个明智的选择：我没有让它直接全量生成几十个文件，而是分批推进，每批之间我可以检查一遍。

生成完代码之后，我让它执行 mvn spring-boot:run 启动后端。这一步很关键，因为编译报错是逃不掉的，Claude Code 会自动读报错信息，改代码，再重新启动。我当时遇到一个常见的坑：H2 的依赖版本和 Java 17 不兼容，启动直接报错，它自己就把 pom.xml 里的版本替换成了兼容版本，重新跑通了。

启动完成后，我直接用 curl 验证接口：

bash复制curl http://localhost:8080/api/users?page=1&size=10

看到返回的 { code: 0, message: "success", data: {...} } 结构，我才确认后端部分真正可用。这里我建议你也养成这个习惯：不要只看“启动成功”，要实际请求一下接口，有的报错是在运行时才暴露的。

3.3 前端：Vue 页面与接口对接

后端跑通之后，我切到前端。Claude Code 先通过 Vite 创建了 Vue 项目，然后安装依赖：element-plus、axios、vue-router。Vite 的好处是依赖安装完就能直接跑开发服务器，不需要额外配置 Webpack。

前端部分的重点是页面和接口对接。它替我生成了登录页和用户列表页，登录页负责调一个简单登录接口，列表页负责渲染表格、处理分页、弹窗表单。Route 也提前配好了，登录页和列表页之间的跳转逻辑能跑通。这个过程中我额外关注了一下 axios 的封装，它默认做了两件事：请求时自动携带 token 或者把参数序列化，响应时统一剥掉 result 的外层结构，只把 data 返回给页面。

前端启动之后，Vite 的端口默认是 5173，它自动把 /api 前缀的请求转发到后端的 8080 端口。相关配置长这样：

javascript复制// frontend/vite.config.js
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
});

我特意检查了一下这个配置，因为跨域是前后端分离项目里最容易爆炸的地方。很多新手喜欢在后端加一堆 CORS 配置，又在 Nginx 里改转发规则，搞得焦头烂额。实际上本地开发阶段用 Vite 的 proxy 转发就够了，请求是从前端服务器发出去，浏览器端根本感知不到跨域。

3.4 联调：前端页面真实调用后端接口

前后端都跑起来之后，就是联调环节。我在浏览器里打开 http://localhost:5173，F12 打开开发者工具看 Network。这一步必须有，因为“看起来页面没报错”和“数据真的从后端拿到”是两码事。

我第一次联调时就遇到一个典型问题：列表页始终拿不到数据，Network 里请求是 200，但返回内容不是期望的格式，而是 Spring Data JPA 默认的 Page 对象结构，嵌套层级很深。原因是我需求里写了统一返回结构，但某些分页接口实际返回的是 Page 对象直接包在外层，导致前端的 response.data.data 拿不到真正的列表。

我把这个报错信息原样贴给 Claude Code，它看了之后说“这是返回结构没包对”，然后自动改了 Controller 里分页方法的返回逻辑，把 Page 拆开，重新包装成约定的 { code, message, data } 结构，连分页总数字段都一并加上了。前端那边它也跟着调整了类型解析，把分页数据的读取逻辑改对了。整个过程我没写一行业务代码，就是“发现问题、描述问题、确认修改”。

联调通过的标准我定为三条：页面能登录、列表能分页、新增和删除操作后能刷新数据。每一条我都实际操作一遍，确认没问题才算这个项目跑通。

3.5 半天时间具体花哪了

很多人听到“半天搞定一个项目”会觉得夸张，我把自己实际的时间分配列出来，你心里就有谱了：

加起来刚好一个下午的量。当然，这个时间是建立在“你对 Spring Boot 和 Vue 的基本结构有概念”的前提上。如果完全不懂，时间会多出一些，因为你需要多看几眼它生成的东西，但依然比手写快很多。

项目跑通之后，后续如果要上线，方向也很常规：后端打成 jar 包，前端 npm run build 生成静态文件，用 Nginx 托管并反代后端接口，这就是阿里云这类服务器上最常见的部署套路，和传统前后端分离项目没有任何本质区别。

4. 实操中的避坑与心得

4.1 上下文管理：别把整个项目一次喂进去

Claude Code 能读整个仓库，但不代表你该让它“全读完”。项目文件一多，上下文窗口塞满了，它反而容易糊涂，生成到后面甚至忘记最初的约定。我的做法是先在项目根目录写一个 CLAUDE.md，把技术栈、目录结构、返回值约定、禁用事项都写清楚，然后告诉它“所有任务都遵循 CLAUDE.md 的规范”。这样每次会话开始，它都能快速进入状态，不需要反复解释。

对于特别大的仓库，我还会补一句“本次任务只关注 backend 下的 user 模块”，主动缩小它的操作范围。上下文这种东西和内存一样，不是越多越好，够用就行。

4.2 Token 消耗与省 Token 的实操技巧

Token 消耗是很多人关心的问题，尤其是不想频繁开订阅套餐的朋友。我实际用下来，掌握几个技巧可以省不少：

• 尽量用 --continue 或 --resume 接着上次的会话聊，而不是每次都新开会话。新会话意味着它要重新加载项目背景，重新理解上下文，等于多花很多 token。
• 让它先 /grep 定位文件再动手。比如你怀疑某个接口写错了，先让它搜索关键词，只把相关文件的代码贴给它，而不是直接让它“看看整个项目”。
• 输出格式设为纯文本。在启动时加 --output-format text，能减少 Markdown 渲染带来的额外输出，看起来也更清爽。
• 大改动一定分批下指令。一次只让它改一个模块，确认没问题再改下一个。这样做的好处是即便出错，回滚的范围也小，而且每轮对话的输入输出都更精炼。

4.3 几个具体报错和排查记录

除了安装阶段的报错，运行阶段和账号阶段也有一批高频问题。我整理成了表：

这里我要特别提醒“Your organization has disabled”这个报错，它是企业版账号的策略限制，不是软件本身坏了。如果你在用公司统一配的 Claude 账号，大概率会撞上这一条。别慌，换个自己的订阅账号，或者直接配置 API Key 就能绕过去。

4.4 别让它放飞自我：如何做好甲方

Claude Code 是工具，但工具太强也意味着它可能会“自作主张”。比如它看到返回值结构不对，可能自己追加一个字段；看到某个方法名不统一，可能顺手把其他文件也重构了。这种主动性在多数时候是好事，但也有可能改掉你没打算改的东西。

我的规矩很简单：每轮改动必须看 diff，重要文件改动必须经过我确认。实现上我会在项目里提前 git init，每次让 Claude Code 动代码之前先提交一次，它改完我再检查 diff，发现问题直接 git checkout 回滚，这段经历让我深刻体会到“版本管理不是后端专利，AI 协作时代尤其重要”。

另外一个底线是：密钥、密码、云厂商凭证这些敏感信息，绝对不要让它处理。它生成一个随机的数据库密码我可以接受，但生产环境的密钥我永远是手动配置，绝不让 AI 经手，这个习惯希望大家也养成。

5. 进阶：让 Claude Code 更好用的几个配置

5.1 CLAUDE.md：给项目写一本“给 AI 看的说明书”

前面提过 CLAUDE.md，这里展开讲讲。它本质上是项目里的一个说明文件，Claude Code 每次运行时会自动读取，相当于一本书的“序言”，告诉 AI 这个项目是谁、怎么组织、有什么忌讳。

我实际项目里的一个精简版长这样：

markdown复制# CLAUDE.md

## 项目概述
这是一个用户管理系统，前后端分离。
后端目录 backend，Spring Boot 3.2 + Maven + Java 17 + H2 + Spring Data JPA。
前端目录 frontend，Vue 3 + Vite + Element Plus + Axios。

## 代码规范
- 后端统一返回结构：{ code, message, data }，code 为 0 表示成功。
- 所有接口路径以 /api 开头。
- 前端统一通过 src/api 目录下的模块调用接口。

## 注意事项
- 不要修改 pom.xml 中的 main 类配置。
- 不要删除 H2 相关依赖。
- 前端请求使用 axios 实例，不要直接在页面里写 fetch。

有了这份文件，每次和它展开新任务，它都会先读一遍，大幅减少重复沟通。建立规范文件的成本不到十分钟，带来的收益却是长久的。特别是让多个开发者共用同一个项目时，这份说明能保证 AI 生成的代码风格稳定。

5.2 Skills：把常用操作封装成可复用的技能

Claude Code 还支持 Skills 机制，简单说就是“预置的指令集”。比如你可以把“生成一个符合本项目规范的新 Controller”封装成技能，包含文件位置、代码风格、必须引入的依赖、统一返回结构的写法。之后只要说“用 Controller 技能给 User 增加一个导出接口”，它就会照着技能里的标准流程走，不需要重新解释一堆东西。

这个机制类似于给团队写“代码生成模板”，适合那些经常要生成相似模块的人。我在接内部管理系统时，会把“用户管理模块生成”“字典管理模块生成”这种重复需求做成技能，以后每次新项目都能直接复用，相当于把自己的经验沉淀成了 AI 可调用的能力。

5.3 接入第三方模型与本地模型的正确姿势

很多人问“能不能把 Claude Code 接进 DeepSeek 或本地 Ollama”，答案是可以的，原理是通过环境变量指定模型服务的地址和密钥。Claude Code 本身通过一套 HTTP 协议与模型服务通信，只要目标服务兼容 Anthropic 的接口协议，就能换模型。

常见的配置方式是设置环境变量：

bash复制export ANTHROPIC_BASE_URL="http://你的模型服务地址"
export ANTHROPIC_AUTH_TOKEN="你的密钥"
claude

比如你想接 DeepSeek 提供的兼容接口，就把 ANTHROPIC_BASE_URL 指向对应的服务端点，ANTHROPIC_AUTH_TOKEN 换成 DeepSeek 的 API Key。想用本地 Ollama 跑大模型，也可以把地址指向本地模型服务端口，但说实话本地小模型的能力差距很明显，跑点简单任务还行，让它理解一个完整的前后端项目，效果远不如官方模型稳定。

这里要提醒两点：一是不要随意把 ANTHROPIC_BASE_URL 指向来路不明的第三方服务，可能存在数据泄露风险；二是非官方模型的指令遵循和长文本理解能力参差不齐，如果你在用 Claude Code 干正事，默认建议还是官方模型，折腾本地模型更适合学习和离线实验。

5.4 保存对话历史与恢复会话

Claude Code 的会话历史是自动保存的。默认情况下，它会记录你启动过的项目目录和对应的会话，你可以用 /resume 命令在历史会话列表中选择一个继续。这个功能对我这种“下班关终端，第二天接着干”的人来说非常实用，不用每次重新描述项目背景。

我自己的习惯是：重大项目按模块拆分会话，比如“搭后端”“写前端”“修联调问题”分别开三个会话，不要所有任务都堆在同一个会话里。这样既避免上下文过长，也让 /resume 恢复时更精确。历史会话文件存在 ~/.claude 目录下，如果你担心隐私问题，可以定期清理对应目录。

跑通这个项目之后，我最大的感受是：以后做原型验证、接新业务、搭内部管理系统，我会默认把 Claude Code 当第一生产力工具，而不是再用“我先搭个架子再说”的方式硬写。半天搞定一个前后端分离项目并不夸张，但前提是你得先把自己当成一个合格的甲方，需求描述越清晰，它交付得越快。

最后再分享一个小经验：拿到生成结果先别急着夸它，也别急着改，先顺着它的代码把关键链路读一遍。我第一次就是没细看就往下推，后面在联调阶段绕了不少弯路。现在我会花十分钟扫一遍 controller、路由和接口封装，确认大方向没问题再放手让它继续改。AI 能帮你把代码写出来，但“这代码是不是适合当前项目”这件事，还是得靠你把关。