SWF与Flash中心：深入探索Adobe Flash Player在现代网页中的新用法

主页框架搭建

删除原有的组件

观察 App.vue 文件，发现其引入了一个 HelloWorld 组件：

清空之后，只留下了一个基本的框架。这个框架由三个部分构成： script 、 template 与 style 。

其中， script 部分用来写一些 TS/JS 脚本，也支持 TSX/JSX 。

template 部分类似 HTML，主要用于绘制当前页面，这里可以使用 Vue 的模板语法，绑定数据、事件，控制组件的渲染等。

style 部分可以没有，主要用于定义当前页面中的某些样式。如果加上 scoped 属性，样式只会在当前组件内生效，防止样式泄漏到其他组件中。如果不加 scoped ，样式会全局生效。

定义全局样式

在本项目中，我们将全局样式设置为：框架的默认最小高度与当前页面高度相等，宽度与当前页面宽度相同。也就是说， 最外层的父组件将撑起内部容器的尺寸 。

打开 src/style.css 文件，将其内容改为如下内容：

html{box-sizing: border-box;}*,
*:before,
*:after{box-sizing: inherit;}html,
body,
#app{box-sizing: border-box;width: 100%;min-height: 100vh;height: auto;margin: 0;padding: 0;overflow-x: hidden;scroll-behavior: smooth;}

其中，设置 html 的 box-sizing 为 border-box 可以让元素的宽与高包含 padding 与 border，无需计算额外空间，便于布局。

之后，让所有元素的 box-sizing 都从父元素继承（ inherit ）。最后，设置 html body #app 的样式为：宽度占据其浏览器的100%，高度最小为浏览器的高度，同时根据内容自适应高度，不强制撑满某一高度，只用 min-height 作为下限。此外，设置去掉内外边距，同时禁止横向滚动条出现，在页面滚动时采用平滑过渡的动画效果。

搭建主页框架

我们将我们的主页分成三个部分：头部、尾部以及中间的内容部分。我们可以使用 flex 布局来实现，将下面的代码插入 App.vue 的 style 部分：

.app-container{width: 100%;min-height: 100%;display: flex;flex-direction: column;}.header-container{width: 100%;height: fit-content;}.footer-container{width: 100%;height: fit-content;}.content-container{width: 100%;flex-grow: 1;}

这里，设置全局的最外层 container 占据全部的高度与宽度，同时设置显示模式为 flex 。同时，令 header 与 footer 的高度自动适应内容，再令 content 占满剩余的高度。如果content过高，那么会自动扩展高度，将 footer 向下移动。

引入路由

这一部分我们会创建我们的第一个页面：主页。

首先，在 src 目录下创建一个文件夹，将其命名为： views 。在 views 下，创建一个文件，将其命名为： HomeView.vue 。在其中插入下面的内容：

<scriptsetuplang="ts"></script><template></template><stylescoped></style>

其中， <script> 中可以书写我们的逻辑代码，这里使用了 setup 这个语法糖，并且设置语言为 TypeScript （ lang="ts" ）。在每个 vue 文件中，至少需要存在 <template> 与 <scoped> 部分，不需要的话可以省略掉 <style> 部分。

现在，回到 routers 文件夹下的 index.ts 文件，这里定义了我们的路由。我们需要将刚创建好的页面引入进来。将其内容改写为：

import{ createRouter }from"vue-router";import{ createWebHistory }from"vue-router";exportconst router =createRouter({
  history:createWebHistory(),
  routes:[{
      path:"/",
      name:"Root",
      redirect:"/home",},{
      path:"/home",
      name:"Home",component:()=>import("@/views/HomeView.vue"),},],});

这样，当我们访问时，就会通过 redirect 的设置，自动跳转到主页。这一部分使用了懒加载，不会在访问时加载所有的组件，只会在访问新的路由时才会加载，可以提高加载的速度。

现在，我们回到 App.vue 中，可以发现，之前我们填充好了主页的基本框架，但是没有给路由一个入口。我们希望实现的是固定 header 与 footer，只改变 content 中的内容。所以，我们需要将 content 中的内容更改为一个 <router-view /> 。更改后的代码如下所示：

<scriptsetuplang="ts"></script><template><divclass="app-container"><divclass="header-container">This is header</div><divclass="content-container"><router-view/></div><divclass="footer-container">This is footer</div></div></template><stylescoped>.app-container{width: 100%;min-height: 100%;display: flex;flex-direction: column;}.header-container{width: 100%;height: fit-content;}.footer-container{width: 100%;height: fit-content;}.content-container{width: 100%;flex-grow: 1;}</style>

回到 HomeView.vue 中，修改其内容：

<scriptsetuplang="ts"></script><template><divclass="home-container">This is the home page</div></template><stylescoped>.home-container{width: 100%;height: 100%;display: flex;justify-content: center;}</style>

至此，可以看到已经有了一个主页的基本框架：