Vue 大型项目的结构和组件划分

问题

在大型 Vue 项目中，如何合理划分项目结构和组件？

解答

划分原则

清晰的项目结构能显著提高开发效率。划分时需要遵循以下原则：

1. 文件夹和文件的语义一致性

按路由模块划分的文件夹（如 pages）应该只包含路由模块，不应该混入其他类型的文件。这样可以一眼看出项目有哪些路由。

2. 单一入口/出口

每个模块应该有唯一的入口文件，外部只通过这个入口引入。

// ❌ 错误：直接引入模块内部文件
import sellerReducer from 'src/pages/seller/reducer'

// ✅ 正确：通过入口文件引入
import seller from 'src/pages/seller'

这样做的好处是实现了模块隔离，内部重构时不影响外部引用。

3. 就近原则，紧耦合文件用相对路径

模块内部的文件应该放在一起，使用相对路径引用，保证模块的独立性。

// ✅ 正确：使用相对路径
import styles from './index.module.scss'

// ❌ 错误：使用绝对路径
import styles from 'src/pages/seller/index.module.scss'

当需要移动整个模块时，使用相对路径可以直接拖动文件夹，无需修改内部引用。

4. 公共文件用绝对路径

多个模块共用的文件（如公共组件）应该放在 src/components 下，使用绝对路径引用。

// ❌ 错误：使用相对路径
import Input from '../../components/input'

// ✅ 正确：使用绝对路径
import Input from 'src/components/input'

使用绝对路径便于全局搜索替换，且语义更清晰。

5. 不引入 /src 外的文件

src 文件夹存放所有项目资源，外部只放配置、依赖等文件，方便区分代码和配置。

目录结构示例

单页面应用结构：

project
├─ public
│  ├─ favicon.ico
│  └─ index.html
├─ src
│  ├─ components          # 公共组件
│  │  └─ input
│  │     ├─ index.js
│  │     └─ index.module.scss
│  ├─ pages              # 路由页面
│  │  └─ seller
│  │     └─ components   # 页面私有组件
│  │        └─ input
│  │           └─ index.js
│  ├─ utils              # 工具函数
│  ├─ store              # 状态管理
│  ├─ router             # 路由配置
│  └─ App.vue
├─ .eslintrc.js
├─ babel.config.js
├─ package.json
└─ vue.config.js

多页面应用结构：

project
├─ public
├─ src
│  ├─ components         # 全局公共组件
│  ├─ pages
│  │  ├─ page1           # 页面1
│  │  │  ├─ main.js
│  │  │  ├─ App.vue
│  │  │  └─ components
│  │  └─ page2           # 页面2
│  │     ├─ main.js
│  │     ├─ App.vue
│  │     └─ components
│  └─ shared             # 跨页面共享资源
├─ package.json
└─ vue.config.js

关键点

• 按语义划分文件夹，路由模块、公共组件、工具函数等分类清晰
• 模块内部使用相对路径，公共资源使用绝对路径
• 每个模块提供单一入口文件，实现模块隔离
• 紧耦合的文件放在一起，便于整体移动和维护
• 代码文件统一放在 src 目录下，与配置文件分离