Vue目录结构

一、Vue2目录结构

Vue2 的目录结构基于 Webpack 构建，核心目录如下（以 vue-cli 脚手架生成的典型项目为例）：

├── public/              # 静态资源（不参与打包）[1,4](@ref)
│   ├── index.html       # 入口HTML文件
│   └── favicon.ico      # 网站图标
├── src/                 # 源码核心目录
│   ├── api/             # 接口模块（与后端接口一一对应）[1](@ref)
│   ├── assets/          # 静态资源（图片、字体、SCSS等）[1,5](@ref)
│   ├── components/      # 公共组件（如按钮、表格等）
│   ├── router/          # 路由配置（支持拆分模块化路由）[1,4](@ref)
│   ├── store/           # Vuex状态管理（含模块化拆分）[1,4](@ref)
│   ├── utils/           # 工具函数（如axios封装、日期处理）[2](@ref)
│   ├── views/           # 页面级组件（与路由一一对应）[1,3](@ref)
│   ├── App.vue          # 根组件（入口布局）
│   └── main.js          # 入口文件（初始化Vue实例）[4](@ref)
├── .gitignore           # Git忽略配置
├── package.json         # 项目依赖与脚本配置
└── vue.config.js        # Webpack自定义配置[3](@ref)

关键特性：

1. 接口与目录一致性：api 目录下的文件与后端接口路径对应，如 /api/user/list 对应 src/api/user.js 中的 userList 方法
2. 页面规范：每个 views 下的页面需有唯一顶层 class 名（如 user-list ），遵循 BEM 规范，便于样式隔离
3. 状态管理模块化：store 目录支持拆分为子模块（如 user.js ），通过 namespaced: true 免命名冲突。
4. 静态资源分类：public 存放无需编译的静态文件（如 jQuery 插件），assets 存放需编译的资源（如 SCSS ）

二、Vue3目录结构

Vue3 的目录结构更灵活，支持 Vite 等现代构建工具，典型结构如下：

├── public/              # 静态资源（同Vue2）
├── src/
│   ├── assets/          # 静态资源（图片、全局CSS）
│   ├── components/      # 公共组件（推荐使用`<script setup>`语法）
│   ├── router/          # 路由配置（支持动态导入）
│   ├── stores/          # Pinia状态管理（替代Vuex，模块化更简洁）[6](@ref)
│   ├── composables/     # 组合式函数（如useFetch）
│   ├── views/           # 页面级组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件（使用createApp初始化）[7](@ref)
├── .env                 # 环境变量配置
├── vite.config.js       # Vite构建配置（替代vue.config.js）[6](@ref)
└── tsconfig.json        # TypeScript配置（可选）

关键特性：

1. 组合式API：通过 composables 目录封装可复用的逻辑（如网络请求），提升代码复用性
2. Pinia替代Vuex：状态管理更轻量，支持 TypeScript 且无需复杂模块声明
3. TypeScript集成：原生支持 TS，可通过 tsconfig.json 配置类型检查
4. 按需加载优化：Vite 构建工具实现快速冷启动和动态导入，提升开发体验

三、Vue2与Vue3目录对比

特性	Vue2	Vue3
状态管理	使用 Vuex（需手动模块化）	推荐 Pinia（自动模块化，TypeScript 友好）
构建工具	Webpack（配置复杂）	Vite（开发效率高，支持ESM）
入口文件	main.js（基于Vue构造函数）	main.js（基于 createApp 工厂函数）
API组织	Options API	Composition API（逻辑更聚合）
类型支持	需额外配置 TS	原生支持 TypeScript