网页设计毕业论文教程杭州seo推广优化公司
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 的“开关”！ 🎬🔹 路由怎么工作？
-
当你访问
/路径时，Home.vue组件会显示在<router-view/>里。 -
当你访问
/about路径时，About.vue组件会显示在<router-view/>里。
你可以通过点击 <router-link> 实现页面跳转：
-
<router-link to="/">Home</router-link>会跳转到/，显示Home.vue。 -
<router-link to="/about">About</router-link>会跳转到/about，显示About.vue。
这样，Vue Router 让你在单页面应用中无刷新地切换视图，而不需要重新加载整个页面。
🔹 总结
-
安装和配置 Vue Router：让你能够根据路径来渲染不同的组件。
-
在
main.js中注册并挂载路由：确保 Vue 应用能够使用路由。 -
在
App.vue中添加<router-view/>：用于显示匹配的组件。 -
在
App.vue中使用<router-link>来跳转路由：帮助你在页面间导航。
这样，Vue Router 就能帮助你实现基于路径的动态组件切换，构建一个 SPA（单页面应用）