vue3微信公众号商城项目实战系列（4）第一个页面

在开始写第一个页面之前，先简单看下 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 文件了，现在要直奔本篇的主题：完成一个页面到另一个页面的跳转。