|
本篇在讲什么 接上篇文章，我们制作了一个自定义的网页导航栏，本篇文章我们简单制作一个内容页 仅介绍简单的应用，仅供参考 本篇适合什么 适合初学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
♠ 结语
若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。
