Vue 通用项目结构

Vue 3

├── src
│   ├── api                     # API 接口相关代码
│   │   └── ...
│   ├── App.vue                 # Vue 根组件，定义应用的全局结构和入口
│   ├── assets                  # 静态资源目录
│   │   ├── fonts                   # 字体文件（如自定义字体或图标字体）
│   │   ├── icons                   # 图标文件（可能包含 PNG、SVG 等格式的图标）
│   │   ├── img                     # 图片资源（如背景图、Logo 等）
│   │   ├── styles                  # 全局 CSS/SCSS 样式文件（如变量、主题、公共样式）
│   │   └── svg                     # SVG 图标资源（通常用于矢量图标）
│   ├── components              # 组件目录
│   │   └── ...
│   ├── composables             # Vue 3 Composable 函数，封装可复用的逻辑
│   │   └── useXxx.ts
│   ├── config                  # 项目配置目录
│   │   └── ...
│   ├── directives              # Vue 自定义指令
│   │   └── ...
│   ├── enums                   # 枚举定义
│   │   └── ...
│   ├── env.d.ts                # TypeScript 环境声明文件（如 Vite 环境变量类型）
│   ├── locales                 # 国际化（i18n）资源
│   │   ├── index.ts                # 国际化入口文件，配置 i18n 插件
│   │   └── langs                   # 多语言文件（如 en.json、zh.json）
│   ├── main.ts                 # 项目主入口文件，初始化 Vue 应用、路由、状态管理等
│   ├── mock                    # Mock 数据目录，用于开发或测试环境
│   │   └── ...
│   ├── router                  # Vue Router 路由相关代码
│   │   ├── guards                  # 路由守卫（如认证、权限控制）
│   │   ├── index.ts                # 路由主入口，初始化路由器
│   │   ├── routes
│   │   └── utils                   # 路由工具函数（如动态路由注册、菜单转换）
│   ├── store                   # Pinia 状态管理
│   │   ├── index.ts                # Pinia 存储入口，初始化 store
│   │   └── modules                 # 分模块的状态管理（如 user、settings）
│   ├── types                   # TypeScript 类型定义
│   │   └── ...
│   ├── utils                   # 工具函数目录
│   │   └── ...
│   └── views                   # 页面组件目录
│       └── ...
├── tsconfig.json               # TypeScript 配置文件，定义编译选项
└── vite.config.ts              # Vite 配置文件，定义构建、开发服务器、插件等