Vue前端篇——项目目录结构介绍

在正式开始学习 Vue 3 开发之前，了解并熟悉其项目目录结构是非常关键的第一步。一个清晰、规范的目录结构不仅有助于开发者高效地组织代码，还能显著提升项目的可读性和可维护性。

Vue 3 作为现代前端开发中广泛使用的主流框架之一，其工程结构的设计直接影响着开发流程与协作效率。无论是个人项目还是团队协作，掌握 Vue 3 的标准目录结构都将为你打下坚实的基础。

本文将围绕 Vue 3 标准项目的目录结构展开详细讲解，帮助你从整体上理解各个文件和文件夹的作用，并为后续组件开发、路由配置、状态管理等高级内容做好准备。

🎯 目标读者：适合刚接触 Vue 3 的新手开发者，也适合作为前端初学者理解项目结构的参考指南。

接下来，我们将逐步解析 Vue 3 工程的典型目录结构，并结合实际项目场景进行说明，助你快速入门 Vue 3 开发！Vue 3 项目结构详解（适合新手）

在学习 Vue 3 开发时，了解项目的目录结构是非常重要的一步。良好的结构不仅有助于团队协作，也能提升开发效率和维护性。本文将带你一步步了解 Vue 3 项目的典型目录结构及其作用。

Vue 项目的运行流程可以形象地理解为：

"花（App.vue）种在花盆（createApp(App)）里，再把花盆放在房间（index.html 中的 #app 容器）中。"

具体流程如下：

入口文件：index.html
- 所有网页应用的起点。
- 页面中通常包含一个 <div id="app"></div>，作为 Vue 应用的挂载点。
main.ts / main.js
- Vue 应用的入口逻辑文件。
- 使用 createApp(App) 创建根 Vue 实例，并通过 .mount('#app') 挂载到 HTML 中。
App.vue
- 根组件，所有其他组件都嵌套在其内部。
- 可以看作是整个 Vue 应用的"总容器"。

后续所有的组件开发、页面展示，都是基于 App.vue 展开的。

根目录是整个项目的顶层结构，通常包含以下核心文件和文件夹：

文件/目录	描述
`package.json`	项目的元信息文件，包括名称、版本、依赖项、脚本命令等。
`package-lock.json` 或 `yarn.lock`	锁定依赖版本，确保每次安装一致。
`README.md`	项目说明文档，通常包括功能介绍、使用方法等。
`.gitignore`	Git 忽略配置文件，指定哪些文件不纳入版本控制。
`public/`	静态资源目录，如图片、字体、第三方库等，构建时不经过 Webpack 处理。
`src/`	源代码主目录，存放 Vue 组件、JS、CSS 等开发文件。

src/ 是我们日常开发的主要工作区，以下是其常见结构及用途：

文件/目录	描述
`main.ts` 或 `main.js`	入口文件，创建 Vue 应用实例并挂载到 DOM。
`App.vue`	根组件，是整个 Vue 应用的"外壳"，其他组件都在它里面嵌套。
`components/`	存放通用组件，例如按钮、表单控件、导航栏等。
`views/` 或 `pages/`	页面级组件，通常与路由一一对应，如首页、详情页等。
`router/`	路由配置目录，使用 Vue Router 进行页面跳转管理。
`store/`	状态管理模块，使用 Vuex 或 Pinia 来集中管理全局状态。
`assets/`	放置本地静态资源（如图标、图片、字体），会被 Webpack 处理优化。
`utils/` 或 `helpers/`	工具函数或公共函数库，如格式化时间、请求封装等。
`styles/` 或 `scss/`	全局样式文件，如 `global.css` 或主题变量文件等。

✅ 小贴士 ：建议将组件按功能划分，比如 /components/Header.vue、/components/Footer.vue，便于管理和查找。

访问方式：直接通过相对路径引用，例如：/favicon.ico

文件名	描述
`vue.config.js`	Vue CLI 自定义配置文件，用于修改 Webpack、代理设置、打包输出路径等。
`babel.config.js`	Babel 配置文件，用于编译 ES6+ 语法，兼容旧浏览器。
`tsconfig.json`	TypeScript 配置文件（若项目使用 TS）。
`.eslintrc.js`	ESLint 配置文件，用于规范代码风格和检查错误。
`.prettierrc`	Prettier 配置文件，用于自动格式化代码。

掌握 Vue 3 的项目结构是迈向实际开发的第一步。通过本文的讲解，你应该已经了解：

对于刚入门的新手来说，熟悉这些结构不仅能帮助你快速上手项目，还能让你在阅读他人代码或参与团队开发时更加得心应手。

🌟 建议实践：尝试自己新建一个 Vue 项目，手动创建以上结构，并试着添加一个组件来测试是否能正常显示。

示例图：

如果创建工程使用ES，会有包含ES配置，如图：