Vue大型项目目录结构设计

大型Vue项目目录结构需清晰划分职责边界，下面梳理核心设计原则。

设计原则

按领域分层

目录结构应按业务领域和技术层双重划分：

• 技术层：基础设施代码（工具函数、HTTP封装、全局配置）
• 业务层：按功能模块组织（用户、订单、权限等）

核心目录结构

src/
├── api/              # HTTP接口层，按模块拆分
├── assets/           # 静态资源（图片、字体、样式）
├── components/       # 全局公共组件
│   ├── base/         # 基础组件（Button、Input等）
│   └── business/     # 业务通用组件
├── composables/      # 组合式函数（Composition API）
├── directives/       # 自定义指令
├── hooks/            # 业务Hook函数
├── layouts/          # 布局组件
├── plugins/          # 插件配置
├── router/           # 路由配置
│   ├── index.js      # 路由实例
│   ├── routes.js     # 路由表
│   └── guards.js     # 路由守卫
├── store/            # 状态管理
│   ├── modules/      # 模块化store
│   └── index.js      # store入口
├── styles/           # 全局样式
├── utils/            # 工具函数
├── views/            # 页面组件（按模块分文件夹）
│   ├── user/
│   ├── order/
│   └── dashboard/
├── App.vue
└── main.js

目录职责说明

views/ 页面目录

按业务模块划分子目录，每个模块包含：

views/user/
├── index.vue         # 列表页
├── detail.vue        # 详情页
├── edit.vue          # 编辑页
└── components/       # 页面私有组件

页面组件应保持薄设计，复杂逻辑下沉到composables或store。

components/ 公共组件

• base/: 无业务逻辑的UI组件，props驱动
• business/: 跨模块复用的业务组件

组件命名使用PascalCase，基础组件加Base前缀。

composables/ 组合式函数

封装可复用的状态逻辑：

// composables/usePermission.js
import { ref, computed } from 'vue'

export function usePermission() {
  const permissions = ref([])
  
  const hasPermission = (key) => {
    return computed(() => permissions.value.includes(key))
  }
  
  return { permissions, hasPermission }
}

大型项目扩展建议

要点总结

• 目录结构应按技术领域+业务模块双重划分
• views/按功能模块拆子目录，保持页面组件轻薄
• components/区分基础组件与业务组件
• composables/封装可复用逻辑，替代mixins
• 大型项目需预留扩展空间，避免后期重构

存放路径: articles/VUE/专家/大型项目架构分层设计/项目目录结构设计.md