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 的“开关”！ 🎬