模块化不是简单的文件拆分，而是构建可维护、可扩展应用架构的艺术。在Vue生态中，合理的模块化设计能让项目从"能跑"进化到"好维护"。

Vue 2 项目目录结构

小型项目（传统分层）

bash
vue2-small/
├── src/
│   ├── api/                  # 所有接口
│   │   ├── user.js
│   │   └── order.js
│   ├── components/           # 公共组件
│   │   ├── Header.vue
│   │   └── Modal.vue
│   ├── views/                # 页面组件
│   │   ├── Home.vue
│   │   ├── User.vue
│   │   └── Order.vue
│   ├── utils/                # 工具函数
│   │   ├── request.js
│   │   └── validate.js
│   ├── router/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   ├── App.vue
│   └── main.js
├── public/
└── package.json

中型项目（业务模块）

bash
vue2-medium/
├── src/
│   ├── common/               # 公共沉淀
│   │   ├── components/
│   │   ├── utils/
│   │   └── styles/
│   ├── modules/              # 业务模块
│   │   ├── user/
│   │   │   ├── components/   # 模块私有组件
│   │   │   ├── api/          # 模块接口
│   │   │   ├── views/        # 模块页面
│   │   │   └── store.js      # 模块状态
│   │   └── order/
│   │       ├── components/
│   │       ├── api/
│   │       ├── views/
│   │       └── store.js
│   ├── router/
│   ├── store/                # 全局状态
│   ├── utils/                # 全局工具
│   ├── App.vue
│   └── main.js
├── public/
└── package.json

大型项目（领域驱动）

bash
vue2-large/
├── src/
│   ├── domains/              # 领域层
│   │   ├── user/
│   │   │   ├── components/
│   │   │   ├── api/
│   │   │   ├── store/
│   │   │   ├── types/
│   │   │   └── index.js
│   │   └── order/
│   │       ├── components/
│   │       ├── api/
│   │       ├── store/
│   │       ├── types/
│   │       └── index.js
│   ├── infrastructure/       # 基础设施层
│   │   ├── http/
│   │   ├── auth/
│   │   └── config/
│   ├── shared/               # 共享层
│   │   ├── components/
│   │   ├── utils/
│   │   └── hooks/
│   ├── app/                  # 应用层
│   │   ├── router/
│   │   ├── store/
│   │   └── main.js
│   └── App.vue
├── tests/
├── docs/
└── package.json

---

Vue 3 项目目录结构

小型项目（Vite 默认）

bash
vue3-small/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   ├── Home.vue
│   │   └── About.vue
│   ├── composables/          # 组合式函数
│   │   └── useCounter.js
│   ├── router/
│   ├── stores/               # Pinia
│   ├── App.vue
│   └── main.js
├── public/
├── index.html
└── package.json

中型项目（组合式功能）

bash
vue3-medium/
├── src/
│   ├── features/             # 功能模块
│   │   ├── user/
│   │   │   ├── components/
│   │   │   ├── api/
│   │   │   ├── composables/  # 模块逻辑
│   │   │   ├── views/
│   │   │   └── types.ts
│   │   └── order/
│   │       ├── components/
│   │       ├── api/
│   │       ├── composables/
│   │       ├── views/
│   │       └── types.ts
│   ├── shared/               # 共享资源
│   │   ├── components/
│   │   ├── composables/      # 全局组合式函数
│   │   ├── utils/
│   │   └── styles/
│   ├── stores/               # Pinia stores
│   ├── router/
│   ├── types/                # 全局类型
│   ├── App.vue
│   └── main.ts
├── public/
├── index.html
└── package.json

大型项目（Monorepo + TS）

bash
vue3-large/
├── apps/
│   ├── web/                  # Web 应用
│   │   ├── src/
│   │   │   ├── features/
│   │   │   ├── shared/
│   │   │   ├── stores/
│   │   │   └── main.ts
│   │   └── package.json
│   └── admin/                # 管理后台
│       ├── src/
│       └── package.json
├── packages/
│   ├── ui/                   # UI 组件库
│   │   ├── src/
│   │   ├── package.json
│   │   └── tsconfig.json
│   ├── utils/                # 工具包
│   │   ├── src/
│   │   └── package.json
│   ├── types/                # 类型定义
│   │   ├── src/
│   │   └── package.json
│   └── api-client/           # API 客户端
│       ├── src/
│       └── package.json
├── domains/                  # 领域层 (可选)
│   ├── user/
│   └── order/
├── pnpm-workspace.yaml
├── turbo.json
├── tsconfig.json
└── package.json

---

关键差异对比

维度	Vue 2	Vue 3
逻辑组织	按选项类型分散 (data/methods)	按功能集中 (composables)
类型支持	弱 (props/$emit 难推断)	强 (原生 TS，defineProps)
状态管理	Vuex (单一 store 或多 module)	Pinia (多 store，更轻量)
构建工具	Webpack 为主	Vite 为主
大型项目	配置复杂，构建慢	Monorepo 友好，构建快