在开始写第一个页面之前，先简单看下 index.html 、App.vue、main.js、HelloWorld.vue、TheWelcome.vue、WelcomeItem.vue
这几个页面及文件是怎么运作的，然后再新建2个页面，完成从一个页面跳转到另一个页面这个最简单的操作。
index.html 和 main.js 代码如下：
index.html文件的关键代码只有2行：
10行：定义了一个 id=app的div元素 ， 它的作用是显示 vue3 生成的页面
11行：引用 main.js 文件；
再看 main.js ，总共4行代码，其作用如下：
1行：导入 vue 包的 createApp()函数
导入包中的某个函数就用 import { xxx } from 'ppp' 这样的格式，函数不用加 "()" ，且放在 "{ }" 中， from 后是包名。
2行：导入 App.vue 页面/组件
导入组件/页面用 import xxx from 'ccc' 这样的格式，xxx 是组件/页面名称（可以取任意的名字，但一旦取了名，使用的时候就用这个名字了），ccc是组件/页面的路径。
4行：导入 main.css 样式文件
导入样式用 import 'sss' 这样的格式，后面不需要加 from 。
6行：用createApp( ) 函数初始化vue3应用，然后加载 App.vue 页面/组件并将执行后的内容挂载到 index.html 页面中 id=app 的元素上。
接下来，我们看一下 App.vue 这个页面的内容 ，内容如下：
注 ： vue3 中所有页面/组件都以 .vue 为后缀名，所有的功能都是在页面/组件中编码实现的 。
<script setup> import HelloWorld from './components/HelloWorld.vue' import TheWelcome from './components/TheWelcome.vue' </script> <template> <header> <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorld msg="You did it!" /> </div> </header> <main> <TheWelcome /> </main> </template> <style scoped> header { line-height: 1.5; } .logo { display: block; margin: 0 auto 2rem; } @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; } } </style>
可以看到 ， 一个 .vue 文件由3大部分组成，分别是 ：
<script setup></script> 脚本代码块：页面交互操作、数据处理、包引用、变量、语句、函数等等都在这里编码；
<template></template> 页面布局代码块：写 HTML 标签，即用户看到的内容；
<style scoped></style> 样式代码块：定义 HTML 标签的样式;
简洁、清晰、明了。
这个页面的执行流程就是：
<script setup></script> 导入了2个组件， <template></template> 把这2个组件做适当排版，<style scoped></style>对排版做一些美化，
这个页面要呈现的内容就处理完了，其完整的运作流程是：
npm run dev启动Web服务器 --》浏览器访问 http://localhost:5173/ --》执行 index.html 页面 --》main.js 执行 --》
createApp() 执行 ： 将 App.vue 页面内容解析完后挂载到 index.html 页面的 id=app 的div上，用户看到的页面就是这样的了：
如上图所示，页面左边内容呈现由组件 TheWelcome.vue 完成， 右边由 WelcomeItem.vue 完成，当然也可以全部由 App.vue 来实现，
这样分开来做应该是想给学习者一个更完整一点的例子吧。
了解完上面的基础知识，我们不打算进一步分析 TheWelcome.vue 和 WelcomeItem.vue 文件了，现在要直奔本篇的主题：完成一个页面到另一个页面的跳转。