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
![[保研/考研機試] KY96 Fibonacci 上海交通大學復試上機題 C++實現](http://pic.xiahunao.cn/[保研/考研機試] KY96 Fibonacci 上海交通大學復試上機題 C++實現)
