admin 管理员组文章数量: 1184232
主页框架搭建
删除原有的组件
观察
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>
至此，可以看到已经有了一个主页的基本框架：
版权声明：本文标题：灵动主页，掌握Vue框架和样式设计的核心技巧 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1770481185a3534169.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论