前端项目组织结构

项目结构

按文件类型分组（Type-Based）

结构示例：

src/
├── components/
├── views/
├── utils/
├── api/
├── store/
├── router/
└── assets/
优点：
简单直观：适合新手和小型项目，快速上手。

一致性高：所有组件、工具函数等按类型集中存放。

缺点：
耦合度高：功能相关的代码分散在不同目录，修改时需要跨目录操作。

难以扩展：随着项目规模增大，目录会变得臃肿。

适用场景：
小型项目（如个人博客、静态页面）。

快速原型开发。

按功能模块分组（Feature-Based）

完整项目结构示例：

 src/
├── modules/                  # 功能模块目录
│   ├── User/                 # 用户模块
│   │   ├── components/       # 用户相关组件
│   │   │   ├── UserList.vue  # 用户列表组件
│   │   │   ├── UserForm.vue  # 用户表单组件
│   │   │   └── Profile/      # 用户资料相关子组件
│   │   ├── store/            # 用户模块的Vuex状态管理
│   │   │   ├── index.js      # 用户模块的store主文件
│   │   │   ├── actions.js    # 用户相关actions
│   │   │   ├── mutations.js  # 用户相关mutations
│   │   │   └── getters.js    # 用户相关getters
│   │   ├── api/              # 用户相关API调用
│   │   │   └── index.js      # 用户API封装
│   │   ├── views/            # 用户相关页面级组件
│   │   │   ├── Login.vue     # 登录页面
│   │   │   ├── Register.vue  # 注册页面
│   │   │   └── Profile.vue   # 用户资料页面
│   │   └── router.js         # 用户模块的路由配置
│   ├── Product/              # 产品模块
│   │   ├── components/       # 产品相关组件
│   │   ├── store/            # 产品状态管理
│   │   ├── api/              # 产品API
│   │   ├── views/            # 产品相关页面
│   │   └── router.js         # 产品模块路由
│   └── Order/                # 订单模块
│       ├── components/       # 订单相关组件
│       ├── store/            # 订单状态管理
│       ├── api/              # 订单API
│       ├── views/            # 订单相关页面
│       └── router.js         # 订单模块路由
├── core/                     # 全局共享代码
│   ├── components/           # 全局公共组件
│   │   ├── AppHeader.vue     # 顶部导航
│   │   ├── AppFooter.vue     # 底部信息
│   │   └── AppSidebar.vue    # 侧边栏
│   ├── directives/           # 全局指令
│   ├── filters/              # 全局过滤器
│   ├── mixins/               # 全局混入
│   ├── plugins/              # 全局插件
│   ├── utils/                # 工具函数
│   │   ├── auth.js           # 认证相关工具
│   │   ├── api.js            # 基础API配置
│   │   └── helpers.js        # 辅助函数
│   ├── assets/               # 全局静态资源
│   │   ├── styles/           # 全局样式
│   │   │   ├── _variables.scss # SCSS变量
│   │   │   ├── _mixins.scss    # SCSS混入
│   │   │   └── main.scss      # 主样式文件
│   │   └── images/           # 全局图片
│   ├── router/               # 全局路由配置
│   │   ├── index.js           # 路由主文件
│   │   └── routes.js          # 路由定义
│   └── store/                 # 全局Vuex store
│       ├── index.js           # store主文件
│       └── modules/           # 全局共享的store模块
├── App.vue                    # 根组件
└── main.js                    # 应用入口文件

优点： 高内聚低耦合：功能模块自包含所有代码（UI、状态、API）。

可维护性强：模块可独立开发、测试和复用。

适合团队协作：不同团队负责不同模块。

缺点： 初期复杂度高：需要设计模块边界和通信机制。

可能重复代码：不同模块间共享逻辑需抽离到 core/。

适用场景： 中大型应用（如 SaaS、ERP）。

长期迭代、多人协作项目。

领域驱动设计（DDD）

按功能模块分组时遇到了一个问题：
有一个代办任务模块和目标模块（每个目标都有关键结果）
代办任务又能够链接关键结果，实现任务完成后更新关键结果的值
此时，两个功能模块耦合了，需要在任务模块中使用目标模块中的服务

领域

DDD 架构图：

┌─────────────────────────────────────────┐
│           用户界面层 (UI Layer)              │
│  Vue组件、页面、表单验证等                    │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│         应用层 (Application Layer)        │  ← 应用服务层方式
│  应用服务、用例协调、事务管理                  │
│  TaskGoalApplicationService              │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│           领域层 (Domain Layer)           │  ← 事件总线方式
│  ┌─────────────┐    ┌─────────────┐      │
│  │ Task 聚合    │    │ Goal 聚合    │      │
│  │ - 任务实例   │    │ - 目标管理   │      │
│  │ - 任务模板   │    │ - 关键结果   │      │
│  └─────────────┘    └─────────────┘      │
│         │                  ↑             │
│         └──→ 领域事件 ──────┘             │
└─────────────────────────────────────────┘
                    ↓
┌─────────────────────────────────────────┐
│        基础设施层 (Infrastructure)        │
│  数据持久化、外部服务、技术实现              │
└─────────────────────────────────────────┘

结构示例：

src/
├── main/                          # Electron主进程(主领域逻辑)
│   ├── events/                    # 主进程领域事件处理
│   ├── modules/                   # 主进程领域模块
│   │   ├── task/                  # 任务领域
│   │   │   ├── application/       # 任务应用服务
│   │   │   ├── domain/            # 任务聚合根/实体
│   │   │   └── infrastructure/    # 任务仓储实现
│   │   └── goal/                  # 目标领域(同任务结构)
│   └── electron-main.ts           # 主进程入口
│
├── renderer/                      # Vue3渲染进程（DDD核心）
│   ├── core/                      # 跨领域共享内容
│   │   ├── shared/                # 通用组件/工具
│   │   └── infrastructure/        # 基础设施（HTTP客户端等）
│   │
│   ├── modules/                   # 业务领域模块（核心）
│   │   ├── user/                  # 用户领域
│   │   │   ├── application/       # 应用层
│   │   │   │   ├── commands/      # CQRS命令
│   │   │   │   └── queries/       # 查询服务
│   │   │   ├── domain/            # 领域层
│   │   │   │   ├── entities/      # 用户实体/值对象
│   │   │   │   ├── events/        # 用户领域事件
│   │   │   │   └── services/      # 领域服务
│   │   │   ├── infrastructure/   # 基础设施
│   │   │   │   └── repositories/ # 用户仓储实现
│   │   │   └── interfaces/       # 用户接口层
│   │   │       ├── components/    # 领域组件
│   │   │       └── views/         # 领域视图
│   │   │
│   │   └── payment/               # 支付领域（同结构）
│   │
│   ├── App.vue                    # 根组件
│   └── main.ts                    # 渲染进程入口
│
└── preload/                       # Electron预加载脚本
    └── electron-api.ts            # 暴露Electron API给渲染进程

优点： 业务逻辑清晰：严格分层，核心业务与 UI/基础设施解耦。

高度可测试：领域层不依赖外部框架。

缺点： 过度设计：对简单项目来说过于复杂。

学习成本高：需理解 DDD 概念（实体、值对象、聚合根）。

适用场景： 复杂业务系统（如金融、电商平台）。

需要长期维护和演进的业务核心项目。

### Atomic Design（原子设计）

结构示例： Copy src/ ├── atoms/ # 基础原子组件（按钮、输入框） ├── molecules/ # 分子组件（搜索框 = 输入框 + 按钮） ├── organisms/ # 有机体组件（导航栏、表单） ├── templates/ # 页面骨架 └── pages/ # 完整页面 优点： UI 高度复用：从原子到页面逐级组合，减少重复代码。

设计一致性：强制遵循统一的 UI 规范。

缺点： 灵活性低：复杂业务组件可能难以归类。

不适合业务逻辑：仅解决 UI 分层，需结合其他结构管理状态和 API。

适用场景： UI 密集型应用（如设计工具、门户网站）。

需要与设计团队紧密协作的项目。

### Monorepo（多包管理）

结构示例： Copy project/ ├── apps/ │ ├── web/ # 主应用 │ └── electron/ # Electron 壳 ├── packages/ │ ├── shared/ # 通用工具和类型 │ └── ui-kit/ # 独立 UI 组件库 └── package.json # Workspace 配置 优点： 代码共享便捷：多个应用共享公共包。

依赖统一管理：避免版本冲突。

缺点： 构建复杂：需配置 Turborepo、Nx 等工具。

仓库体积大：所有代码集中在一个仓库。

适用场景： 多端应用（Web + Electron + Mobile）。

需要维护多个独立组件库或微前端模块。

### Electron 专属结构

结构示例：

src/ ├── main/ # Electron 主进程 │ ├── ipc/ │ └── windows/ ├── renderer/ # Vue 渲染进程 │ ├── modules/ │ └── core/ ├── shared/ # 共享代码（类型、工具） └── resources/ # 静态资源（图标、配置文件） 关键点： 进程隔离：严格分离主进程（Node.js）和渲染进程（Vue）。

IPC 规范化：通过预加载脚本安全通信。

适用场景： 跨平台桌面应用（如 IDE、数据管理工具）。

### 微前端架构

结构示例：

project/ ├── app-shell/ # 基座应用（路由、全局状态） ├── app-dashboard/ # 子应用（独立仓库或模块） └── app-admin/ # 子应用（可独立部署） 优点： 独立部署：子应用可单独开发、测试和上线。

技术栈无关：不同子应用可用不同框架。

缺点： 通信复杂：需处理跨应用状态共享和路由同步。

性能开销：资源重复加载。

适用场景： 巨型企业级应用（如阿里云控制台）。 ss 整合遗留系统。

## Related notes

- [[frontend-engineering-moc|前端工程化MOC]]

- [[frontend-basics-moc|前端基础MOC]]

- [[css-moc|CSS MOC]]

- [[ecmascript-moc|ECMAScript MOC]]