用 Cursor 工作区与 Rules 实现旧项目前后端一条龙开发 ​

旧项目往往前后端分离、多仓库或多目录，在 Cursor 里来回切项目、上下文容易丢，AI 也容易「只看当前文件」而忽略整体架构。用好 工作区（Workspace） 和 Rules（.cursor/rules），可以在一个 Cursor 窗口里把旧项目的前后端当成「一条龙」来开发和重构。本文分享一套可落地的配置思路。

一、目标：一个窗口搞定前后端 ​

• 前端：例如 web/、frontend/、admin-vue/ 等。
• 后端：例如 server/、api/、backend/ 等。
• 期望：在 Cursor 里一次打开「根目录」（包含前端+后端），通过规则告诉 AI 项目结构、技术栈、约定，让补全、重构、修 bug 都兼顾前后端上下文。

二、用多根工作区把前后端拉进一个窗口 ​

若前后端本身就在一个 monorepo 里，直接打开该仓库即可。若是多个独立仓库，用 VS Code/Cursor 的 多根工作区（Multi-root Workspace） 把几个目录合成一个「工作区」：

1. File → Add Folder to Workspace，把前端根目录、后端根目录都加进来。
2. 保存为一份 xxx.code-workspace 文件，例如：

{
  "folders": [
    { "name": "frontend", "path": "./web" },
    { "name": "backend",  "path": "./server" }
  ],
  "settings": {}
}

3. 以后用 File → Open Workspace from File 打开这份 .code-workspace，前后端就会同时出现在侧边栏，AI 能同时索引两个根目录下的文件。

这样，无论是「前端调接口」还是「后端改 API」，AI 都能看到两边代码，减少「只改一端、另一端忘改」的问题。

三、用 .cursor/rules 统一约束与上下文 ​

在工作区根目录（或每个 folder 的根目录）放 .cursor/rules（或项目根下的 .cursorrules），用自然语言和少量示例约定技术栈和习惯，AI 会优先参考这些规则。

1. 项目结构规则（告诉 AI 哪里是前端、哪里是后端） ​

在工作区根的规则里写清结构，例如：

## 项目结构
- frontend/：Vue3 + TypeScript + Vite，入口 main.ts，路由在 router/，接口在 api/
- backend/：Node.js + Express（或 Nest.js），入口 app.js 或 main.ts，接口在 src/controllers、src/routes
- 前后端通过 REST API 通信，基础 URL 见 frontend/.env 的 VITE_API_BASE

这样 AI 在改「登录接口」时，会同时想到前端的 api/auth 和后端的 auth 路由。

2. 技术栈与编码约定 ​

按你当前技术栈写清楚，避免 AI 乱用库或风格：

## 前端
- Vue 3 Composition API + <script setup>，用 TypeScript
- 状态用 Pinia，请求用 axios，封装在 api/*.ts
- 组件、页面命名：PascalCase，目录用小写 kebab-case

## 后端
- 使用 Express + TypeScript（或你实际用的框架）
- 控制器返回格式统一为 { code, data, message }
- 鉴权：JWT，放在 Authorization header

3. 接口约定（前后端对齐） ​

旧项目最容易前后端对不齐，在规则里写死一层「契约」能大幅减少沟通成本：

## API 约定
- 列表接口：GET /api/xxx?page=1&pageSize=10，返回 { list, total }
- 提交/更新：POST/PUT /api/xxx，body 为 JSON，返回 { id, ... }
- 错误：HTTP 4xx/5xx，body 中 { code, message }

AI 在生成或修改前端请求、后端控制器时，会倾向于遵守这些约定。

4. 旧项目特别说明（兼容性、别乱动） ​

旧项目常有「这里别动、那里有坑」的隐性约束，建议写进规则：

## 旧项目注意
- legacy/ 下为老代码，仅做兼容性修改，不重构
- 数据库迁移只用已有 migration 工具，不直接改表结构
- 某老接口 /old-api/ 仍被移动端使用，保持兼容

减少 AI 一次性「大改」导致线上事故。

四、实际使用流程示例 ​

1. 打开工作区：用 xxx.code-workspace 打开，确保前后端都在侧栏。
2. 问需求时带上下文：例如「在登录接口里加验证码校验」，AI 会同时改前端的登录表单与后端的验证逻辑；若只改一端，可在对话里指定「只改 backend 的 login 接口」。
3. 大范围重构：先让 AI 根据规则列一个「前后端改动清单」，再按文件逐个改，避免遗漏。
4. 修 bug：把报错信息、接口 URL、前后端相关文件一起贴进对话，便于 AI 做全链路排查。

五、小结 ​

旧项目不必拆成两个 Cursor 窗口来回切，用工作区 + 合理配置 Rules，就能把前后端当成一个整体，实现「一条龙」开发和维护。