Vue 大型项目的结构和组件划分
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 目录下，与配置文件分离
目录