Vue实战第4章：主页设计之中部内容设计

前言 本篇在讲什么 接上篇文章，我们制作了一个自定义的网页导航栏，本篇文章我们简单制作一个内容页 仅介绍简单的应用，仅供参考 本篇适合什么 适合初学Vue的小白 适合想要自己搭建网站的新手 适合没有接触过vue-router的前端程序 本篇需要什么 对Html和css语法有简单认知 对Vue有简单认知 Node.js(博主v18.13.0)的开发环境 Npm(博主v8.19.3)的开发环境 Vue(博主v5.0.8)的开发环境 依赖VS code编辑器 本篇的特色 具有全流程的图文教学 重实践，轻理论，快速上手 提供全流程的源码内容

---

♠ 内容概要

内容页包含以下几项

• 页面中部显示头像
• 头像下方补充主题
• 主题下方补充描述
• 描述下方补充跳转按钮

完整效果如下图所示

---

♠ 修改App.vue

在上一章导航栏的基础上，我们需要稍微修改以下App.vue的内容

♥ 展示背景

我们想要在单调的背景上展示一些动态的效果，这里直接偷懒把Vue官方的动态背景拿来了，下面直接看代码

</script><style>
#app{text-align: center;background-image: url("./assets/bg.svg");
}</style>

直接在css里面添加字段background-image,后边接背景的资源路径

---

♥ router-view

我们在之前讲过路由相关的内容，这里也是直接通过路由来渲染页面，所以需要添加router-view组件，这里直接到导航栏下方

<template><div class="main"><NavBar/><router-view></router-view>
</div>
</template>

---

♠ 新增Home页

正文开始了，我们先创建一个HomeView.vue的文件，用来显示我们中间的内容

---

♥ 定义路由内容

新增的页面，我们需要在路由里去做定义，修改router目录下的index.js文件

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from "../components/HomeView.vue"const routes = [{name: 'home',path: '/home',component: HomeView,},
];const router = createRouter({history: createWebHistory(), routes,
})export default router

上述是完整的index.js的代码，我们引用了HomeView.vue文件，并且在路由内对其进行了定义，重定向为/home

---

♥ 设置初始页面

我们希望router-view在初始的时候就可以直接显示主页，所以需要在路由内对\根路径做出重定向，使其指向主页

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from "../components/HomeView.vue"const routes = [{path: '/',redirect:'/home'},{name: 'home',path: '/home',component: HomeView,},
];const router = createRouter({history: createWebHistory(), routes,
})export default router

如此写法router-view在初始渲染的时候会去加载/home的页面

---

♥ 添加头像

我们在HomeView.vue内补充头像的显示

<img src="../assets/main.png" class="img_main">

---

♥ 添加文本

<p class="txt_main">Welcome to Sun'home
</p>
<p class="txt_dec">限定目的,能使人生变得简洁。 ——村上春树 《没有色彩的多崎作和他的巡礼之年》
</p>

我们希望欢迎语和描述语能够占据一整行的位置，所以这里使用了p标签来定义组件

---

♥ 添加跳转徽章

<a href="https://github.com/KingSun5" class="btn_badge"><img src="https://img.shields.io/badge/github-KingSun5-brightgreen.svg" alt="github" class="btn_badge">
</a>
<a href="https://blog.csdn.net/Mr_Sun88"><img src="https://img.shields.io/badge/csdn-%E5%BE%AE%E7%AC%91%E7%9A%84%E5%AD%99%E5%90%9B-red" alt="csdn" class="btn_badge">
</a>
<a href="//qzonestyle.gtimg.cn/qzone/hybrid/app/404"><img src="https://img.shields.io/badge/404-%E8%85%BE%E8%AE%AF%E5%85%AC%E7%9B%8A-orange" alt="404" class="btn_badge">
</a>

这里我们希望徽章能够展示在一行里，所以这里用上了a标签来定义

注：徽章制作网站传送门

---

♥ 完整代码

光定义肯定是不行的，这里我们在补一点点细节，补充一些CSS里的内容，我们看一下HomeView.vue的完整内容吧

<template><main class="home"><header class="hero"><img src="../assets/main.png" class="img_main"><p class="txt_main">Welcome to Sun'home</p><p class="txt_dec">限定目的,能使人生变得简洁。 ——村上春树 《没有色彩的多崎作和他的巡礼之年》</p></header><a href="https://github.com/KingSun5" class="btn_badge"><img src="https://img.shields.io/badge/github-KingSun5-brightgreen.svg" alt="github" class="btn_badge"></a><a href="https://blog.csdn.net/Mr_Sun88"><img src="https://img.shields.io/badge/csdn-%E5%BE%AE%E7%AC%91%E7%9A%84%E5%AD%99%E5%90%9B-red" alt="csdn" class="btn_badge"></a><a href="//qzonestyle.gtimg.cn/qzone/hybrid/app/404"><img src="https://img.shields.io/badge/404-%E8%85%BE%E8%AE%AF%E5%85%AC%E7%9B%8A-orange" alt="404" class="btn_badge"></a></main>
</template><script>export default {name: "HomeView"}
</script><style>.home{height: 860px;}.txt_main{color:#2c2c2c;font-size: 30px;font-family:"Microsoft YaHei";margin-top: 20px;font-weight: bold;}.txt_dec{color:#2c2c2c;margin-top: 25px;font-size: 20px;font-family:"Microsoft YaHei";}.img_main{width: 280px;height: 280px;margin-top: 8%;} .btn_badge{margin-left: 20px;}
</style>

---

♠ 推送

• Github

https://github.com/KingSun5

---

♠ 结语

若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。

👉 本文属于原创文章，转载请评论留言，并在转载文章头部著名作者出处👈