注意：

本项目已将前端源码同步上传至Gitee，项目已开源，

仅供参考，不涉及商用，不得用其牟利，著作权归本人所有。

本系列后期只会对重要部分代码进行注释，难点会同步更新至专栏

开发遇到的问题_不再会有谎言的博客-CSDN博客

https://blog.csdn.net/xiaomeiguisnjs/category_12755452.html?spm=1001.2014.3001.5482 相关链接会在文章中标注。

开源链接：

Wandering-children-have-the-stars-as-companions: 从0-1开发一个Vue3前端系统页面 流浪的孩子有星星作伴~ WCHTSAC (gitee.com)

https://gitee.com/Chunshuqiuli/wandering-children-have-the-stars-as-companions

本节主要内容是对博客页面主要内容的布局设计实现和子菜单功能的初步实现，同时使用组件化开发对代码进行分离，使代码可读性提高。

本节主要通过display的弹性布局进行页面的布局

左侧信息展示区

右下子菜单栏-"最近"模块 

myBlog.vue

<code><template>

<div class="box">code>

<div class="UserInfo">code>

<div class="UserImg">code>

<img src="../../assets/image/avator.jpg" alt="">code>

</div>

<div class="userTop">code>

<div class="uTop">code>

<div class="userName">code>

{ { User.userName }}

</div>

<!-- <div class="infoManage">code>

<el-button></el-button>

</div> -->

</div>

<div class="uMiddle">code>

<span>{ { User.totalVisits }}</span>

<p>总访问量&emsp;|&emsp;</p>

<span>{ { User.original }}</span>

<p>原创&emsp;|&emsp;</p>

<span>{ { User.ranking }}</span>

<p>排名&emsp;|&emsp;</p>

<span>{ { User.fans }}</span>

<p>粉丝&emsp;&emsp;</p>

</div>

<div class="uBottom">code>

<span>IP属地：{ { User.IP }}</span>

<span>加入时间：{ { User.joinTime }}</span>

<span>博客简介：{ { User.blogInfo }}</span>

</div>

</div>

</div>

<div class="InfoMsg">code>

<div class="leftMenu">code>

<div class="starGrade">code>

<h3>星能等级</h3>

<div class="b">code>

<div class="b1">code>

<span>当前等级</span>

<span>{ { User.starGrade }}</span>

</div>

<div class="b1">code>

<span>当前总分</span>

<span>{ { User.allScores }}</span>

</div>

<div class="b1">code>

<span>暂未开放</span>

<!-- <span>{ { User.allScores }}</span> -->

</div>

</div>

</div>

<div class="succeed">code>

<h3>个人成就</h3>

<div class="achievement">code>

<span>获得&nbsp;<p>{ { User.allLikes }}</p>&nbsp;次点赞</span>

<span>内容获得&nbsp;<p>{ { User.allComments }}</p>&nbsp;次评论</span>

<span>获得&nbsp;<p>{ { User.allCollection }}</p>&nbsp;次收藏</span>

</div>

</div>

</div>

<div class="content">code>

<div class="header">code>

<el-tabs v-model="contentTabs" class="demo-tabs" @tab-click="handleClick">code>

<el-tab-pane label="最近" name="first"></el-tab-pane>code>

<el-tab-pane label="文章" name="second"></el-tab-pane>code>

<el-tab-pane label="资源" name="third"></el-tab-pane>code>

<el-tab-pane label="问答" name="fourth"></el-tab-pane>code>

<el-tab-pane label="帖子" name="fifth"></el-tab-pane>code>

<el-tab-pane label="视频" name="sixth"></el-tab-pane>code>

<el-tab-pane label="关注/订阅/互动" name="seventh"></el-tab-pane>code>

<el-tab-pane label="收藏" name="eighth"></el-tab-pane>code>

</el-tabs>

<el-form v-model="queryParams">code>

<el-input type="text" v-model="queryParams.title" placeholder="搜TA的内容" />code>

</el-form>

</div>

<div class="body">code>

<RecentVue v-show="contentTabs === 'first'" :items="items" />code>

</div>

</div>

</div>

</div>

</template>

<script>

import { ref } from 'vue'

import RecentVue from './recentBlog.vue'

export default {

components: {

RecentVue

},

data() {

return {

items: [

{

avatar: "../../assets/image/avator.jpg",

title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",

info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",

tags: 1,

publishTime: "2021-01-01",

read: 100,

like: 100,

comment: 100,

collection: 100

},

{

avatar: "../../assets/image/avator.jpg",

title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",

info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",

tags: 0,

publishTime: "2021-01-01",

read: 100,

like: 100,

comment: 100,

collection: 100

}

],

contentTabs: ref("first"),

queryParams: {

title: ""

},

User: {

userName: "法外狂徒张三",

totalVisits: 18307,

original: 543,

ranking: 2343,

fans: 2983431,

IP: "北京市",

joinTime: "2021-01-01",

blogInfo: "我是一个程序员",

starGrade: "LV17",

allScores: 100,

allLikes: 100,

allComments: 100,

allCollection: 100

}

}

},

methods: {

handleClick(tab, event) {

console.log(tab.props.name);

this.contentTabs = tab.props.name;

}

}

}

</script>

<style>

.box .InfoMsg .content .el-tabs__item {

font-size: 17px !important;

}

</style>

<style lang="scss" scoped src="./myBlog.scss"></style>code>

recentBlog.vue