典型的 Vue 3 项目目录结构详解
典型的 Vue 3 项目目录结构遵循模块化设计原则，旨在提升代码的可维护性和协作效率。以下基于主流脚手架（如 create-vue 或 Vite）生成的模板进行详解，结合核心文件和目录的功能说明：
📁 根目录结构
| 目录/文件 | 作用说明 | 引用来源 |
|---|---|---|
node_modules/ | 存储项目依赖的 npm 包，由包管理器自动生成，禁止手动修改。 | |
public/ | 存放无需构建的静态资源（如 index.html、favicon.ico），文件会直接复制到最终输出目录。 | |
src/ | 核心源代码目录，包含应用的所有业务逻辑和组件。 | |
.gitignore | 指定 Git 忽略的文件（如 node_modules/、构建产物）。 | |
package.json | 定义项目元数据、依赖项和脚本命令（如 npm run dev 启动开发服务器）。 | |
vite.config.js | Vite 构建工具的配置文件，支持路径别名、代理服务器等定制。 | |
tsconfig.json | TypeScript 项目的编译配置（如类型检查、模块解析规则）。 |
🖥️ src/ 目录详解
| 子目录/文件 | 功能说明 | 典型内容 |
|---|---|---|
assets/ | 存放需构建处理的静态资源（图片、字体、SCSS 文件），通过相对路径引用。 | logo.png, global.scss |
components/ | 可复用组件目录，按功能或模块分类（如 Common/Button.vue、Layout/Navbar.vue）。 | 通用 UI 组件、业务组件 |
views/ 或 pages/ | 页面级组件目录，每个路由对应一个视图（如 Home.vue、User/Profile.vue）。 | 路由映射的页面组件 |
router/ | 路由配置文件（index.js），定义路径与组件的映射关系。 | createRouter() 配置 |
store/ | 状态管理配置（Vuex 或 Pinia），集中管理全局状态（如用户登录信息）。 | defineStore()（Pinia）或 createStore()（Vuex） |
hooks/ | 存放 Composition API 的自定义 Hook（如 useFetch.js），封装可复用逻辑。 | 数据请求、表单验证等逻辑 |
utils/ | 工具函数库（如 request.js 封装 Axios 请求）。 | 日期格式化、权限校验等辅助函数 |
App.vue | 根组件，定义全局布局（如顶部导航栏），包含 <router-view> 渲染页面内容。 | 模板、样式及全局逻辑 |
main.js/main.ts | 应用入口文件，初始化 Vue 实例、挂载插件和全局配置。 | createApp(App).use(router).use(store).mount('#app') |
📄 核心文件详解
public/index.html- 作用：应用的主 HTML 模板，包含
<div id="app">作为 Vue 挂载点。 - 关键代码：
<body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body>
- 作用：应用的主 HTML 模板，包含
src/main.js- 作用：
- 创建 Vue 实例：
const app = createApp(App)。 - 注册全局插件（路由、状态管理、UI 库）。
- 挂载到 DOM：
app.mount('#app')。
- 创建 Vue 实例：
- 示例：
import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; const app = createApp(App); app.use(router).use(ElementPlus).mount('#app');
- 作用：
src/App.vue- 结构：
<template>：定义根组件布局（如<router-view>渲染页面）。<script>：编写组件逻辑（可选使用 Composition API）。<style>：全局或局部样式。
- 典型代码：
<template> <Header /> <router-view /> <Footer /> </template>
- 结构：
🔗 文件协作关系
- 启动流程：
index.html→ 加载main.js→ 初始化 Vue 实例 → 挂载App.vue→ 渲染子组件。 - 数据流：
- 路由：
router/index.js定义路径 →views/组件响应路由变化。 - 状态：
store/管理全局数据 → 组件通过useStore()访问或修改状态。
- 路由：
⚙️ 扩展配置
- 环境变量：根目录的
.env.development或.env.production配置环境参数。 - 测试目录：
tests/存放单元测试（如 Vitest 或 Jest）。 - 样式规范：
styles/存放全局样式、主题变量（如variables.scss）。
📌 命名规范建议
- 组件文件：PascalCase（如
UserCard.vue）。 - 工具函数：camelCase（如
formatDate.js）。 - 目录：kebab-case（如
user-management/）。
通过合理组织目录结构和遵循规范，可显著提升团队协作效率和项目的长期可维护性。实际开发中，可结合项目规模调整结构（如微前端场景拆分多入口）
。
Vue 3项目的基本结构遵循Vue CLI创建的项目结构，或者使用Vite创建的项目结构。
以下是一个典型的Vue 3项目结构的概述：
my-vue3-project/
├── node_modules/ # 项目依赖
├── public/ # 静态资源目录
│ ├── favicon.ico # 网站图标
│ └── index.html # 主HTML模板
├── src/ # 源代码目录
│ ├── assets/ # 静态资源目录
│ │ ├── images/ # 图片资源
│ │ └── styles/ # 样式文件
│ ├── components/ # 公共组件目录
│ │ └── MyComponent.vue # 示例组件
│ ├── views/ # 页面组件目录
│ │ └── Home.vue # 示例页面组件
│ ├── App.vue # 应用程序的根组件
│ ├── main.js # 应用程序的入口文件
│ └── router/ # 路由配置目录
│ └── index.js # 路由配置文件
├── tests/ # 测试目录
│ └── unit/ # 单元测试目录
│ ├── components/ # 组件单元测试
│ └── specs/ # 测试规范目录
├── .browserslistrc # 浏览器兼容性配置
├── .eslintrc.js # ESLint配置
├── .gitignore # Git忽略文件配置
├── package.json # 项目配置文件
├── README.md # 项目说明文件
├── vue.config.js # Vue CLI配置文件
└── yarn.lock # yarn锁定文件
