Vue3 目录结构
上一章节中我们使用了 npm 安装项目(Vue-cli 和 Vite)，我们在 IDE（Vscode、Atom 等） 中打开该目录，结构如下所示：
命令行工具 vue-cli（runoob-vue3-test）：
Vite（runoob-vue3-test2）
一个标准的 Vue 3 项目，通常可以拆成三层：
项目根目录：构建工具与工程配置
public 目录：不参与构建的静态资源
src 目录：几乎所有业务代码都在这里，平时开发基本在这个目录里面。
典型的 Vue 项目结构：
vue-project/
├── public/ # 静态资源，直接复制到构建输出目录
│ └── favicon.ico # 网站图标
├── src/
│ ├── assets/ # 静态资源（如图片、字体、CSS）
│ │ └── logo.png
│ ├── components/ # 可复用的通用组件
│ │ └── CommonHeader.vue
│ ├── composables/ # 可复用的 Composition API 逻辑（可选）
│ │ └── useFetch.js
│ ├── router/ # 路由配置
│ │ └── index.js
│ ├── stores/ # Pinia 状态管理（或 store/ 用于 Vuex）
│ │ └── index.js
│ ├── utils/ # 工具函数（如请求封装、格式化）
│ │ └── request.js
│ ├── views/ # 页面级组件（对应路由页面）
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 入口文件（创建 Vue 应用）
├── index.html # HTML 入口模板
├── vite.config.js # Vite 配置文件
├── package.json # 项目依赖与脚本
├── .gitignore # Git 忽略文件
├── .env # 环境变量（开发）
├── .env.production # 环境变量（生产）
└── README.md # 项目说明
目录解析
路径
描述
public/
存放不会被构建工具处理的静态资源，直接复制到 dist 目录，常用于 favicon、robots.txt 等
public/favicon.ico
网站图标（favicon）
src/
项目源代码主目录，所有开发代码放在这里
src/assets/
存放图片、字体、全局 CSS 等静态资源，会被 Vite 处理（支持导入）
src/components/
存放可复用的通用组件（如按钮、卡片、布局组件）
src/composables/
存放可复用的 Composition API 逻辑函数（Vue 3 推荐的代码复用方式）
src/router/
Vue Router 配置目录，通常包含 index.js 定义路由表
src/stores/
Pinia 状态管理目录（Vue 3 官方推荐），存放各个 store 模块
src/utils/
存放工具函数，如 axios 封装、时间格式化、常量等
src/views/
存放页面级组件，通常与路由一一对应（路由页面）
src/App.vue
Vue 应用的根组件，包含
src/main.js
项目入口文件，创建 Vue 应用实例、挂载插件（router、pinia 等）并挂载到 #app
index.html
HTML 模板文件，包含
挂载点vite.config.js
Vite 构建工具配置文件，可自定义插件、别名、代理等
package.json
项目依赖、脚本命令（如 dev、build、preview）
.gitignore
Git 忽略文件，通常忽略 node_modules、dist、.env 等
.env / .env.production
环境变量文件，用于不同环境配置 API 地址等（Vite 以 VITE_ 开头变量）
README.md
项目说明文档
随着项目变大，还可能需要添加这些文件夹：
src/layouts/：不同页面布局（如 AdminLayout.vue、GuestLayout.vue）。
src/plugins/：自定义 Vue 插件（如全局组件自动注册）。
src/directives/：自定义指令（如 v-loading）。
src/types/：全局 TypeScript 类型声明。
tests/ 或 tests/：单元/E2E 测试（Vitest + Vue Test Utils）。
src/api/：分离 API 接口调用模块（比 utils/request 更细粒度）。
接下来，我们以 runoob-vue3-test2 为例，打开目录下的 src/APP.vue 文件，代码如下（解释在注释中）：
src/APP.vue 文件代码
接下来我们可以尝试修改下初始化的项目，将 src/APP.vue 修改为以下代码：
src/APP.vue 文件代码
打开页面 http://localhost:3000/，一般修改后会自动刷新，显示效果如下所示: