Vue3项目目录结构规范建议

以下是一个推荐的 Vue 3 项目目录结构规范，适用于中大型项目并遵循最佳实践：

---

基础目录结构

bash

src/
├─ assets/               # 静态资源
│  ├─ images/           # 图片文件
│  ├─ fonts/            # 字体文件
│  └─ styles/           # 全局样式
│     ├─ variables.scss # SCSS 变量
│     └─ global.scss    # 全局样式入口
│
├─ components/          # 公共组件
│  ├─ common/           # 基础通用组件（如按钮、输入框）
│  └─ ui/               # 业务无关的 UI 组件
│
├─ router/              # 路由配置
│  └─ index.ts          # 路由入口文件
│
├─ store/               # 状态管理（Pinia）
│  ├─ modules/          # Pinia 模块化存储
│  └─ index.ts          # Pinia 初始化
│
├─ views/               # 页面级组件（路由页面）
│
├─ composables/         # Composition API 逻辑复用
│  ├─ useFetch.ts       # 示例：数据请求逻辑
│  └─ useEventListener.ts
│
├─ services/            # API 请求封装
│  ├─ api.ts            # Axios 实例配置
│  └─ user.service.ts   # 用户相关接口
│
├─ types/               # TypeScript 类型定义
│  └─ user.d.ts         # 用户相关类型
│
├─ utils/               # 工具函数
│  ├─ validators.ts     # 表单校验工具
│  └─ helpers.ts        # 通用辅助函数
│
├─ App.vue              # 根组件
└─ main.ts              # 应用入口

---

可选目录（根据项目规模）

bash

public/                # 纯静态文件（直接拷贝到 dist）
├─ favicon.ico
└─ robots.txttests/                 # 测试文件
├─ unit/               # 单元测试
└─ e2e/                # E2E 测试plugins/               # Vue 插件
├─ i18n.ts             # 国际化插件
└─ directives.ts       # 自定义指令config/               # 构建/环境配置
├─ env.ts             # 环境变量处理
└─ vite/              # Vite 相关配置

---

中大型项目推荐结构

对于复杂项目，可采用 模块化组织：

bash

src/
└─ modules/            # 功能模块├─ auth/            # 认证模块│  ├─ components/   # 模块私有组件│  ├─ store/        # 模块专属 Pinia│  ├─ types/        # 模块类型定义│  └─ hooks/        # 模块专属逻辑│└─ dashboard/       # 另一个功能模块├─ api/          # 模块接口└─ utils/        # 模块工具

---

核心规范建议

1. 命名规范

   • 组件：PascalCase（如 UserProfile.vue）

   • 组合式函数：useXxx 前缀（如 usePagination）

   • 类型定义：T 前缀（如 TUser）

2. 代码组织原则

   • 按功能而非类型组织代码

   • 单一组件不超过 500 行

   • 公共组件保持纯 UI 展示

3. 静态资源管理

   • 小图标优先使用 SVG Sprite

   • 全局样式变量通过 SCSS/Less 管理

   • 第三方字体通过 @font-face 引入

4. 请求层规范

   typescript

   // services/api.ts
   export const http = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 10000
   })

5. 类型安全

   typescript

   // types/user.d.ts
   interface TUser {id: numbername: stringemail: string
   }

---

示例结构解析

bash

my-vue-app/
├─ .env.development    # 开发环境变量
├─ .eslintrc           # ESLint 配置
├─ tsconfig.json       # TypeScript 配置
├─ vite.config.ts      # Vite 配置
│
└─ src/├─ main.ts          # 初始化 Vue 实例├─ App.vue          # 根组件│└─ features/        # 功能模块（替代 views）├─ product/      # 商品模块│  ├─ components/│  ├─ api/│  └─ store/│└─ order/        # 订单模块

---

注意事项

1. 避免过度设计，小型项目保持简单结构

2. 使用 alias 简化导入路径：

   javascript

   // vite.config.js
   resolve: {alias: {'@': path.resolve(__dirname, 'src')}
   }

3. 测试文件建议与组件同级：

   bash

   components/
   ├─ Button.vue
   └─ Button.spec.ts

根据实际项目需求灵活调整，保持目录结构的可扩展性和可维护性是核心目标。