Cursor 里开发一个“一个后端 + 多个前端”项目的时候，推荐的项目目录结构组织方式。

如果你是在 Cursor 里开发一个"一个后端 + 多个前端"的项目，比较推荐采用 Monorepo（单仓库） 结构。

这样对于 AI 辅助编码、跨项目联调、共享类型定义、统一脚本管理都会非常友好。

对于后端是Python的FastAPI，前端包含可能包含多个BS（vue3）、H5(Vue3)等情况下，一个比较成熟、长期可维护的目录组织方式如下：

project-root/
│
├── apps/ # 所有可运行应用
│ │
│ ├── backend/ # 唯一后端
│ │ ├── app/
│ │ ├── api/
│ │ ├── models/
│ │ ├── services/
│ │ ├── main.py
│ │ └── requirements.txt
│ │
│ ├── admin-web/ # 管理后台(Vue3)
│ │ ├── src/
│ │ └── package.json
│ │
│ ├── mobile-h5/ # H5移动端
│ │ ├── src/
│ │ └── package.json
│ │
│ ├── desktop-web/ # PC业务端
│ │ ├── src/
│ │ └── package.json
│ │
│ └── miniapp/ # 小程序(可选)
│
├── packages/ # 共享代码
│ │
│ ├── api-types/ # 前后端共享类型定义
│ │
│ ├── ui-components/ # 公共组件
│ │
│ ├── utils/ # 公共工具
│ │
│ ├── request/ # axios/fetch统一封装
│ │
│ └── constants/ # 常量定义
│
├── docs/
│
├── scripts/
│
├── docker/
│
├── .cursor/
│ ├── rules/
│ └── prompts/
│
├── pnpm-workspace.yaml
├── package.json
└── README.md

为什么这种结构适合 Cursor

Cursor 最大的问题之一是：

AI 容易"看不清项目边界"

如果目录混乱：

• 前端接口定义各写各的
• DTO 到处复制
• axios 封装重复
• 多个 Vue 项目结构不统一

Cursor 很容易：

• 改错项目
• 引错文件
• 生成重复代码
• 类型不一致

而 Monorepo 能明显改善。

推荐重点

1. apps 放"可运行项目"

所有真正独立运行的项目放这里：

apps/
    backend
    admin-web
    mobile-h5

这样 Cursor 很容易理解：

"这是多个应用"

2. packages 放共享代码（非常重要）

这是整个结构最关键的。

例如：

packages/api-types

里面：

export interface LoginRequest {
    username: string
    password: string
}

然后：

• backend 用
• admin-web 用
• mobile-h5 用

这样：

• 类型永远同步
• Cursor 不会乱生成字段
• AI 更容易理解接口结构

这对你这种：

• FastAPI
• Vue3
• TypeScript

组合尤其重要。

3. 后端不要放根目录

很多人会：

backend/
frontend1/
frontend2/

后期会越来越乱。

推荐：

apps/backend

因为未来你可能还会有：

• websocket 服务
• gateway
• ai-service
• scheduler

例如：

apps/
    backend
    ai-service
    gateway

扩展性更强。

4. 每个前端结构尽量一致

例如：

src/
    api/
    views/
    components/
    composables/
    stores/
    router/

这样 Cursor：

• 更容易复用代码
• 更容易跨项目生成
• 不会把 Pinia 写成 Vuex
• 不会把旧项目风格混进去

5. packages/request 非常推荐

很多项目：

• admin-web 一套 axios
• mobile-h5 一套 axios

最后：

• token 不统一
• 错误处理不统一
• 上传逻辑不统一

推荐：

packages/request

统一：

createRequestClient()

不同前端只配置：

baseURL
platform

即可。

6. Cursor Rules 非常关键

你可以专门为不同项目写规则：

.cursor/rules/
    backend.mdc
    vue3.mdc
    mobile.mdc
    api.mdc

例如：

backend.mdc

• 使用 FastAPI
• 使用 SQLAlchemy Async
• 所有接口返回 Result[T]
• 禁止直接返回 dict

vue3.mdc

• 使用 Composition API
• 使用 TypeScript
• 使用 Pinia
• API 调用统一使用 requestClient

Cursor 效果会明显提升。

如果我的是Vue3+ElementPlus+typeScript前端（多个），加上C#+sqlsugar+Mysql的后端，如何组织目录?

结合技术栈, 如下分析：

多个前端：

• Vue.js
• Element Plus
• TypeScript

单后端：

• C#
• SqlSugar
• MySQL

会非常推荐你采用：

"前后端分层 + Monorepo + Shared Packages"

这种结构对：

• Cursor
• Claude Code
• Copilot
• 多前端复用
• ERP 类业务

都特别友好。

推荐目录结构（企业项目版）

project-root/
│
├── apps/
│   │
│   ├── backend/                        # C# 后端
│   │   │
│   │   ├── src/
│   │   │   │
│   │   │   ├── Api/                   # WebAPI入口
│   │   │   ├── Application/           # 应用服务层
│   │   │   ├── Domain/                # 实体/领域模型
│   │   │   ├── Infrastructure/        # SqlSugar/仓储
│   │   │   ├── Contracts/             # DTO/接口定义
│   │   │   ├── Shared/                # 通用类
│   │   │   └── BackgroundJobs/        # 定时任务(可选)
│   │   │
│   │   ├── sql/
│   │   ├── logs/
│   │   └── ERP.sln
│   │
│   ├── admin-web/                     # 管理后台
│   │   ├── src/
│   │   ├── public/
│   │   └── package.json
│   │
│   ├── customer-web/                  # 客户端门户
│   │   ├── src/
│   │   └── package.json
│   │
│   ├── mobile-h5/                     # H5
│   │   ├── src/
│   │   └── package.json
│   │
│   └── supplier-web/                  # 供应商端(可选)
│
├── packages/                          # 共享模块
│   │
│   ├── api-client/                    # axios封装
│   │
│   ├── api-types/                     # TS接口定义
│   │
│   ├── ui-components/                 # 公共组件
│   │
│   ├── business-components/           # 业务组件
│   │
│   ├── constants/                     # 常量
│   │
│   ├── utils/                         # 工具库
│   │
│   ├── hooks/                         # composables
│   │
│   └── permission/                    # 权限封装
│
├── docs/
│
├── scripts/
│
├── docker/
│
├── .cursor/
│   ├── rules/
│   └── prompts/
│
├── pnpm-workspace.yaml
├── package.json
└── README.md

最终推荐的技术目录架构如下：

apps/
    backend
    admin-web
    customer-web
    mobile-h5

packages/
    api-client
    api-types
    business-components
    ui-components
    utils

.cursor/

这是目前：

• Cursor
• 企业 ERP
• Vue3
• 多端
• C#
• SqlSugar

综合下来维护成本最低的一种结构。

扩展性与未来升级

1. 新增项目

• 未来增加 supplier-web 或 desktop-app
• 直接放 apps/ 下即可
• 复用 packages 里的组件和类型

2. 微服务 / AI 服务

• 可以增加 apps/ai-service/ 或 apps/websocket-service/
• 仍然复用 packages 公共模块

完成后的项目，package.json里面如下代码，它可以在一个控制台的根目录入口上，选择那个项目运行、编译即可：

{
  "scripts": {
    "dev:web": "pnpm --filter @qrcode/web dev",
    "dev:admin": "pnpm --filter @qrcode/admin dev",
    "dev:h5": "pnpm --filter @qrcode/h5 dev",

    "build:web": "pnpm --filter @qrcode/web build",
    "build:admin": "pnpm --filter @qrcode/admin build",

    "dev": "pnpm dev:web"
  }
}

其中我们还会看到pnpm-workspace.yaml：

如果想同时启动多个项目，在package.json中修改增加一个命令行：

{
  "scripts": {
    "dev:all": "pnpm -r --parallel dev"
  }
}

运行下面命令，所有前端同时启动：

pnpm dev:all

或只启动所有 web：

{
  "scripts": {
    "dev:webs": "pnpm --filter './apps/*' dev"
  }
}

通过整合多个前端和后端在一个Cursor窗口中进行联动开发，效率提高不说，而且AI的精准度也会根据上下文的内容更好的提高了。

避免了在多个项目窗口中切换和编译运行，在同一个项目窗口的根目录上编译不同的项目或者运行不同的项目，更添几许优雅和从容。