Vue3 学习笔记（四）Vue3 入口文件之间的关系和流程
1、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.ts"></script>
</body>
</html>
2、main.ts 代码
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
3、App.vue 代码
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="欢迎你!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>
以上三个文件（index.html、main.ts 和 App.vue）共同构成了一个典型的 Vue 3 应用程序的基本结构。
让我们详细解释它们之间的关系和流程：
（1）、index.html
这是应用的入口 HTML 文件
它定义了基本的 HTML 结构，包括：
- 一个 id 为 “app” 的 div 元素，这是 Vue 应用将要挂载的地方。
- 一个 script 标签，引入了 main.ts 文件作为模块。
重要点：
<div id="app"></div>是 Vue 应用的挂载点。<script type="module" src="/src/main.ts"></script>引入了主 JavaScript 文件
（2）、main.ts
这是应用的 JavaScript 入口点。它负责：
- 导入必要的 Vue 库和组件。
- 创建 Vue 应用实例。
- 配置应用（如添加插件）。
- 将应用挂载到 DOM。
关键步骤：
createApp(App)创建 Vue 应用实例，使用 App.vue 作为根组件。app.use(createPinia())和app.use(router)分别添加 Pinia 状态管理和路由功能。app.mount('#app')将应用挂载到 index.html 中的 #app 元素上。
（3）、App.vue
这是应用的根组件，定义了应用的基本结构：
<script setup>部分导入了必要的组件和库。<template>部分定义了应用的 HTML 结构。<style>部分包含了组件的样式。
重要特性：
- 使用
<RouterView />来显示当前路由对应的组件。 - 使用
<RouterLink>创建导航链接。 - 引入并使用 HelloWorld 组件。
流程总结：
- 浏览器加载 index.html。
- index.html 引入并执行 main.ts。
- main.ts 创建 Vue 应用实例，使用 App.vue 作为根组件。
- main.ts 配置应用（添加 Pinia 和路由器）。
- main.ts 将应用挂载到 index.html 的 #app 元素上。
- App.vue 的内容被渲染，包括头部、导航和 RouterView。
- 根据当前 URL，RouterView 显示相应的组件。
这个结构允许创建一个单页应用（SPA），其中 App.vue 提供了一个持久的框架，而具体的页面内容则通过路由动态加载和切换。