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 提供了一个持久的框架，而具体的页面内容则通过路由动态加载和切换。