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

---

♠ 结语

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

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