📘 前言
在正式开始学习 Vue 3 开发之前，了解并熟悉其项目目录结构是非常关键的第一步。一个清晰、规范的目录结构不仅有助于开发者高效地组织代码，还能显著提升项目的可读性和可维护性。
Vue 3 作为现代前端开发中广泛使用的主流框架之一，其工程结构的设计直接影响着开发流程与协作效率。无论是个人项目还是团队协作，掌握 Vue 3 的标准目录结构都将为你打下坚实的基础。
本文将围绕 Vue 3 标准项目的目录结构展开详细讲解，帮助你从整体上理解各个文件和文件夹的作用，并为后续组件开发、路由配置、状态管理等高级内容做好准备。
🎯 目标读者：适合刚接触 Vue 3 的新手开发者，也适合作为前端初学者理解项目结构的参考指南。
接下来，我们将逐步解析 Vue 3 工程的典型目录结构，并结合实际项目场景进行说明，助你快速入门 Vue 3 开发！Vue 3 项目结构详解（适合新手）
在学习 Vue 3 开发时，了解项目的目录结构是非常重要的一步。良好的结构不仅有助于团队协作，也能提升开发效率和维护性。本文将带你一步步了解 Vue 3 项目的典型目录结构及其作用。
🌱 一、Vue 项目的“起点”：从 index.html 到 App.vue
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 展开的。
📁 二、Vue 3 项目根目录结构解析
根目录是整个项目的顶层结构，通常包含以下核心文件和文件夹：
| 文件/目录 | 描述 |
|---|---|
package.json | 项目的元信息文件，包括名称、版本、依赖项、脚本命令等。 |
package-lock.json 或 yarn.lock | 锁定依赖版本，确保每次安装一致。 |
README.md | 项目说明文档，通常包括功能介绍、使用方法等。 |
.gitignore | Git 忽略配置文件，指定哪些文件不纳入版本控制。 |
public/ | 静态资源目录，如图片、字体、第三方库等，构建时不经过 Webpack 处理。 |
src/ | 源代码主目录，存放 Vue 组件、JS、CSS 等开发文件。 |
🧱 三、src/ 目录详解（项目开发的核心区域）
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，便于管理和查找。
🖼️ 四、public/ 目录说明
- 用于存放不需要 Webpack 编译处理的静态资源。
- 常见用途：
- favicon.ico
- robots.txt
- 第三方 JS/CSS 文件（如统计代码）
- 大型静态图片（如背景图）
访问方式：直接通过相对路径引用，例如：/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 应用是如何从
index.html启动并加载到App.vue的； src/是主要开发区域，其中各目录的作用；- 如何组织组件、页面、工具类等资源；
- 一些常见的配置文件及其用途。
对于刚入门的新手来说，熟悉这些结构不仅能帮助你快速上手项目，还能让你在阅读他人代码或参与团队开发时更加得心应手。
🌟 建议实践：尝试自己新建一个 Vue 项目，手动创建以上结构，并试着添加一个组件来测试是否能正常显示。
示例图：
如果创建工程使用ES，会有包含ES配置，如图：
