Vue舞臺劇

Vue 的舞臺劇比喻 🎭（完整表格版）

Vue 結構及路由管理

Vue 結構	比喻（舞臺劇）🎭	作用
`index.html`	空白場地 🏟?	Vue 負責填充內容，提供 `#app` 容器，等待演出開始。
`main.js`	導演 🎬	組織 Vue 應用，把 `App.vue` 掛載到 `#app`，讓演出開始。
`App.vue`	后臺演員候場室 🎭	組件集合點，包含 `<router-view/>`，決定哪個演員（組件）上場。
`router/index.js`	劇本 📖	規定演員（組件）在什么路徑（場景）演出，即路由配置。
`<router-view/>`	舞臺切換器 🔄	根據當前路徑，展示當前應該上場的演員（組件）。
`<router-link>`	演員門鈴 🔔	用戶點擊后，Vue 負責切換到對應組件（演員）。

擴展內容：Vue 其他核心概念

Vue 概念	比喻（舞臺劇）🎭	作用
組件（`.vue` 文件）	演員 🎭	負責演出，每個組件代表一個角色。
`props`	劇本臺詞 📜	組件之間傳遞的數據，就像演員接到劇本臺詞。
`emit`	演員匯報導演 🎙?	子組件通知父組件某些事情發生了。
`computed`	后臺準備好的表演 🏋?	計算后的數據，只在需要時更新，提高性能。
`watch`	舞臺監督 👀	監聽數據變化，一旦變化就采取行動。
`v-if / v-show`	演員的出場與隱藏 🎭	控制組件是否顯示，`v-if` 是真正移除，`v-show` 只是隱藏。
`v-for`	群演隊列 👥	用來循環渲染多個相同類型的演員（組件）。
`v-model`	對講機 🎤	組件和用戶輸入之間的雙向綁定，用戶的輸入直接影響演員的表演。
`store（Vuex / Pinia）`	劇團資源庫 📦	管理全局狀態，多個演員（組件）可以共享資源（數據）。

最終總結

Vue 是一個 SPA（單頁面應用）的舞臺劇 🎭，index.html 是舞臺，main.js 是導演，App.vue 負責調度演員（組件）。
路由管理（Vue Router） 📖 就像劇本，規定哪個演員（組件）在什么場景（路徑）上場。
組件是演員 🎭，它們可以接收道具（props）、交流（emit）、計算劇情（computed）、監聽劇情變化（watch）。
Vue 的指令（v-if、v-show、v-for、v-model） 🎬 讓舞臺劇更生動，決定演員的出場、隱藏、重復演出、互動。
狀態管理（Vuex / Pinia） 📦 就像一個大劇團倉庫，所有演員都可以取用里面的道具（數據）。

📌 `main.js` 掛載

? main.js 負責掛載 Vue 應用，把 App.vue 渲染到 index.html 的 #app 里。

📌 Vue 掛載過程mian.js-app.vue-index.html

?1??`main.js` 創建 Vue 應用并掛載

jsimport { createApp } from 'vue'  // 引入 Vue 3 的創建方法
import App from './App.vue'  // 導入根組件 App.vuecreateApp(App).mount('#app')  // 創建 Vue 應用，并掛載到 index.html 的 #app

?2??`index.html`有一個 `#app` 占位符

html<body><div id="app">ddd</div>  <!-- Vue 還沒運行時，#app 只是普通的 HTML -->
</body>

3??運行vue，vue接管 `#app`，并用 `App.vue` 里的內容替換它。

? ? ? ? app 變成 Vue 管理的單頁面應用（SPA）容器：

html<div id="app"><img src="./assets/logo.png"><router-view/>  <!-- 這里會動態渲染不同的頁面 /ddd被替換不顯示 -->
</div>

📌?Vue 路由：

1、安裝路由

在 Vue 中，路由（Vue Router）是用來管理不同頁面之間跳轉的工具，它幫助你在單頁面應用（SPA）中切換不同的視圖，而不需要刷新整個頁面

npm install vue-router

? ?2、配置路由

接下來，你需要在項目中配置路由。這通常會在一個獨立的文件里，比如router/index.js。

js// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/', //是我們項目的首頁('/' 代表網站的根路徑（即 首頁）)name: 'Home',component: Home,  // 默認顯示的頁面},{path: '/about',                     //場地name: 'About',                      //場地代號或者演員的代號component: About,  // 另一個頁面   //場地對應的演員(組件)},
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});export default router; //導出路由 //是為了在mian.js導入

代碼	作用

path: '/' 定義首頁路徑（訪問 http://localhost:8080/ 就會顯示這個頁面）。

name: 'Home' 給路由起名字，可以用 router.push({ name: 'Home' }) 方式跳轉。

component: Home 告訴 Vue 這個路由應該加載 Home.vue 組件，作為首頁內容。

首頁訪問邏輯

當你打開 http://localhost:8080/
→ Vue Router 會匹配 path: '/' 的路由
→ 顯示 Home.vue （首頁）
如果你點擊 <router-link to="/about">About</router-link>
→ Vue Router 會匹配 path: '/about'
→ 顯示 About.vue （關于頁）

Vue 配置路由 🎭—— 場景與演員比喻

屬性	比喻 🎭	作用
`path`	場地 🏟?	定義這個頁面（場景）的訪問路徑，決定用戶訪問哪個 URL 時看到哪個頁面。
`name`	場地代號 📛	給路由起個代號，方便后續使用 `router.push({ name: 'About' })` 進行跳轉，而不用直接寫路徑，路徑修改時也不影響跳轉邏輯。
`component`	場地上的演員 🎭	這個路由（場地）上要展示的 Vue 組件（演

3、?`main.js` 掛載路由

現在你需要把路由集成到 Vue 應用中，這通常是在 main.js 里完成的。你需要引入配置好的 router 并將其傳入 Vue 應用實例。

js// src/main.js
import { createApp } from 'vue';//導入vue
import App from './App.vue';//導入根組件
import router from './router';  // 導入路由      讓 Vue 知道如何切換頁面。createApp(App) //創建vue應用                 傳入 App.vue 作為入口組件.use(router)  // 使用路由                  或者說注冊Router，讓應用支持路由功能。.mount('#app');//掛載路由                  掛載到 index.html 里的 <div id="app"></div>

4、?`App.vue`?展示

?在你的根組件 App.vue 添加 <router-view> 組件中，你需要加入 <router-view/> 這個占位符，它將用于顯示當前路由匹配的組件。

src/App.vue<template><div id="app"><h1>Vue Router Example</h1><nav> //導航欄（<nav>） 👉 用 <router-link> 讓用戶切換頁面。<router-link to="/">Home</router-link> <!-- 點擊跳轉到子組件Home.vue --><router-link to="/about">About</router-link><!-- 點擊跳轉到我們自定義的子組件About.vue --></nav><router-view/> //👉 是一個占位符，根據當前路由展示<nav>對應組件</div>
</template><script>
export default {name: 'App',//導出組件app.vue//是為了在mian.js導入
};
</script>

src/views/About.vue //這個是我們自定義的組件<template><div><h2>About Page</h2><p>Welcome to the About Page!</p></div>
</template>

解答

🔹入口文件 main.js 如何啟動 Vue 項目？

入口文件 main.js 如何啟動 Vue 項目？📂 src├── 📂 components│    ├── Home.vue  <-- 這是一個子組件│    ├── About.vue <-- 也是一個子組件│├── 📂 router│    ├── index.js  <-- 這里配置路由│├── App.vue   <-- 這是 Vue 項目的根組件├── main.js   <-- 入口文件，掛載 App.vueVue 讀取 main.js創建 Vue 應用，并加載 App.vue 作為根組件注冊 Vue Router（如果有）把 App.vue 渲染到 index.html 的 <div id="app">頁面顯示出來，Vue 項目正式啟動！🎉🚀 入口文件的作用總結
? Vue 應用的起點 👉 沒有 main.js，Vue 無法運行。
? 負責加載 App.vue 👉 Vue 應用的根組件必須從這里啟動。
? 注冊路由等全局功能 👉 讓 Vue 知道如何處理頁面跳轉。
? 掛載 Vue 到 HTML 頁面 👉 把 Vue 渲染到 index.html。所以，main.js 是 Vue 項目的入口文件，相當于啟動 Vue 的“開關”！ 🎬