Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】
vite目录结构：
dist // 打包后生成的文件目录
node_modules // 环境依赖
public // 公共资源目录
favicon.ico // 网站图标
src // 项目核心文件夹
assets // 静态资源目录
components // 组件目录
router // 路由配置文件目录
index.js // 路由配置文件
stores // pinia配置文件目录
counter.js // pinia配置文件
views // 页面文件目录
App.vue // 根组件
main.js // 入口文件
.gitignore // git忽略提交配置文件
index.html // 入口页面
package-lock.json // 插件版本锁定文件
package.json // 插件管理文件
README.md // 项目说明文件
vite.config.js // vite的配置文件
dist 文件夹：用于存放我们使用 npm run build 命令打包后的项目文件。
node_modules 文件夹：用于存放项目的各种依赖，比如 axios 等。没有 node_modules 文件夹项目就没法运行，可以使用 npm install 安装项目依赖。
public 文件夹：用于存放公共的静态资源，这里的资源不会被 vite 打包处理。
public / favicon.ico 图标：网站标签页中的小图标。
src 文件夹：项目的核心文件夹，我们所写的代码都放在这个文件夹里。
src / assets 文件夹：用于存放各种静态资源，img、css 等等。
src / components 文件夹：用于存放我们的公共组件，如 header、footer 等自定义组件。
src / router 文件夹：用于存放路由配置文件，路由配置文件可以理解为各个页面的地址路径，用于让我们访问，同时也可以在里边编写全局路由守卫。
src / stores 文件夹：用于存放 pinia 配置文件，pinia 就是一个公共的数据管理文件，里边存放着项目需要用到的数据。
src / views 文件夹：用于存放我们开发的 vue 页面，如 login、home 等页面。
src / App.vue 文件：根组件，是项目的主组件，所有的页面都要通过 App.vue 组件显示。
src / main.js 文件：入口文件，主要用于初始化 Vue 实例，也可以在此文件中引入一些组件库或者全局挂载一些变量。
.gitignore 文件：用于配置 git 上传时需要忽略上传的文件。
index.html 文件：项目入口页面，vite 打包后的 js、css 也会自动引入到该页面中，浏览器访问项目的时候会默认打开生成好的 index.html 文件。
package-lock.json 文件：在 npm install 时生成的一份文件，用于记录当前项目实际安装的各个插件具体来源地址和版本号。并且在 npm install 时，会根据该文件生成 node_modules 文件夹。
package.json 文件：插件的基本信息，包含项目开发时所需要的插件版本，项目名称等等。
README.md 文件：项目的说明文件，可以记录项目开发时的版本和开发内容。
vite.config.js 文件：vue 的配置文件，可以用来设置代理、打包等配置。
vite 项目运行流程：
一、项目运行时会先执行 index.html 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
如果开发移动端，可以将 meta 标签换成以下内容，禁止用户手动缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
二、执行 src / main.js 文件，在此文件中引入 Vue 与各种插件，并创建 Vue 实例。
// 引入公共 CSS 文件，如果不想要可以删掉 // 也可以将 src/assets 目录中的 base.css 和 main.css 一并删掉。 import "./assets/main.css"; // 引入 Vue 中的 createApp 工厂函数 import { createApp } from "vue"; // 引入 pinia 状态管理 import { createPinia } from "pinia"; // 引入 App 根组件 import App from "./App.vue"; // 引入路由配置 import router from "./router"; // 创建 Vue 实例，并将 App 根组件添加到页面中 const app = createApp(App); // 应用 pinia app.use(createPinia()); // 应用路由 app.use(router); // 将 id 为 app 的元素挂载到 Vue 实例上 app.mount("#app");
三、执行 main.js 中引入的各种插件，包括 src / router / index.js 路由配置文件
import { createRouter, createWebHistory } from "vue-router"; // 引入组件（方式一） import HomeView from "../views/HomeView.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), // 历史模式 routes: [ { path: "/", // 这个 / 表示首页 name: "home", // 路由名称 component: HomeView, // 使用组件（方式一） }, { path: "/about", // 路由路径 name: "about", // 路由名称 // 路由懒加载（方式二） component: () => import("../views/AboutView.vue"), }, ], }); export default router;
四、执行 App.vue 根组件，通过 RouterView 加载路由配置的首页（path 为 / 的页面）。
<template> <RouterView /> </template>
五、执行路由配置的首页 src / views / HomeView.vue 文件
<template> <!-- Vue3 可以不写根标签 --> <p class="title">{{ title }}</p> </template> <script> // Vue3 支持 Vue2 的写法 export default { name: "HomeView", data() { return { title: "首页" } } } </script> <style scoped> .title { background-color: aqua; } </style>
注：vite 的目录结构并非一成不变，具体的执行流程还需要结合实际情况。
原创作者: 吴小糖
创作时间：2023.8.14
