本节讲解Vue3页面组件化开发的原因和操作
1.原因
1.业务需求
2.页面展示
根据菜单选项展示不同的页面布局和页面信息
3.页面源码
<template><div class="box"><div class="UserInfo"><div class="UserImg"><img src="../../assets/image/avator.jpg" alt=""></div><div class="userTop"><div class="uTop"><div class="userName">{{ User.userName }}</div><!-- <div class="infoManage"><el-button></el-button></div> --></div><div class="uMiddle"><span>{{ User.totalVisits }}</span><p>总访问量 | </p><span>{{ User.original }}</span><p>原创 | </p><span>{{ User.ranking }}</span><p>排名 | </p><span>{{ User.fans }}</span><p>粉丝  </p></div><div class="uBottom"><span>IP属地：{{ User.IP }}</span><span>加入时间：{{ User.joinTime }}</span><span>博客简介：{{ User.blogInfo }}</span></div></div></div><div class="InfoMsg"><div class="leftMenu"></div><div class="content"><div class="header"><el-tabs v-model="contentTabs" class="demo-tabs" @tab-click="handleClick"><el-tab-pane label="最近" name="first"></el-tab-pane><el-tab-pane label="文章" name="second"></el-tab-pane><el-tab-pane label="资源" name="third"></el-tab-pane><el-tab-pane label="问答" name="fourth"></el-tab-pane><el-tab-pane label="帖子" name="fifth"></el-tab-pane><el-tab-pane label="视频" name="sixth"></el-tab-pane><el-tab-pane label="关注/订阅/互动" name="seventh"></el-tab-pane><el-tab-pane label="收藏" name="eighth"></el-tab-pane></el-tabs><el-form v-model="queryParams"><el-input type="text" v-model="queryParams.title" placeholder="搜TA的内容" /></el-form></div><div class="body"><ul v-show="this.contentTabs == 'first'"><li v-for="item in items" :key="item"><div class="ibox"><div class="img_left"><img src="../../assets/image/avator.jpg" alt=""></div><div class="content_right"><div class="title">{{ item.title }}</div><div class="info"><p>{{ item.info }}</p></div><div class="footer"><el-tag :type="item.tags == 1 ? 'danger' : 'success'">{{ item.tags == 1? "原创" : "转载" }}</el-tag><span>发布时间:{{ item.publishTime }}</span><span>{{ item.read }} 阅读</span><span>{{ item.like }} 点赞</span><span>{{ item.comment }} 评论</span><span>{{ item.collection }} 收藏</span></div></div></div></li></ul></div></div></div></div>
</template>
<script>
import { ref } from 'vue'
export default {data() {return {items: [{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},{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: "我是一个程序员"}}},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>
.box {width: 100%;height: auto;margin-top: 50px;.UserInfo {width: 100%;height: 138px;display: flex;flex-direction: row;border-bottom: 10px solid black;.UserImg {display: flex;width: 118px;height: 118px;margin: -40px 0 0 48px;border-radius: 50%;border: 5px solid rgb(240, 240, 242);img {min-height: 118px;min-width: 118px;border-radius: 100%;}}.userTop {width: 90%;height: 140px;margin: 0 auto;display: flex;flex-direction: column;overflow: hidden;.uTop {width: 100%;height: 40%;.userName {width: 30%;height: 100%;font-size: 30px;display: flex;justify-content: flex-start;align-items: flex-end;padding-left: 20px;}}.uMiddle,.uBottom {width: 100%;height: 25%;display: flex;p {margin: 10px 0 10px 10px;font-size: 14px;}span {width: auto;display: block;padding: 0 0 0 10px;font-size: 25px;// font-weight: bold;}span:nth-child(1) {margin-left: 12px;}}.uBottom {display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-end;}.uBottom span {font-size: 14px;margin-right: 100px;}}}.InfoMsg {width: 100%;min-height: calc(100vh - 160px);display: flex;overflow: hidden;.leftMenu {min-width: 300px;max-height: 648px;}.content {width: auto;height: auto;border-left: 10px solid black;.header {width: 100%;display: flex;padding: 0 15px 0 25px;.demo-tabs {width: 700px;height: 100%;padding-left: 20px;::v-deep .el-tabs__nav-wrap::after {background-color: white;}}.el-form {width: 300px;display: flex;justify-content: flex-end;align-items: flex-start;padding: 5px 30px 0 0;.el-input {font-size: 17px;width: 170px;}}}.body {width: 100%;max-height: 900px;overflow-y: scroll;ul {list-style: none;margin: 0;padding: 0;li {width: 90%;margin: 0 auto;height: 150px;padding: 10px 0;border-bottom: 1px solid darkgray;cursor: pointer;.ibox {width: 100%;height: 100%;display: flex;align-items: center;.img_left {width: 180px;height: 120px;margin: 0 10px 0 20px;img {width: 100%;height: 100%;}}.content_right {width: calc(100% - 230px);height: 120px;display: flex;flex-direction: column;align-items: flex-start;.title,.info,.footer {width: 100%;}.title {height: 30px;font-size: 22px;font-weight: bold;text-align: left;overflow: hidden;}.info {height: calc(100% - 65px); //90字后省略overflow: hidden;white-space: normal;p {width: 100%;height: 100%;margin: 10px 0 10px 0;text-indent: 2em;}}.footer {height: 28px;display: flex;flex-direction: row;align-items: flex-end;span {margin-left: 5px;margin-right: 25px;font-size: 15px;}}}}}}}.body::-webkit-scrollbar {width: 1px;height: 1px;}.body::-webkit-scrollbar-track {border-radius: 0;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);background: black;}.body::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 5px rgba(27, 190, 208, 0.7);background: white;}}}}
</style>源码中div.body下的ul仅用于展示了第一个菜单"最近"页面的信息，仅一个页面布局用了24行，css样式86行，一个菜单子页面110行，8个子菜单页面写完加上主体页面将近1000行代码，无论后期对页面的维护还是二次开发，这么大的代码量对程序员都是一个很大的挑战，故对于这种长代码的页面我们要采用以功能为单位进行划分，以组件为单位进行开发的思想。
2.操作
操作1
1.提取子页面相关的CSS样式和代码放入一个新的vue文件中
<style lang="scss" scoped>
ul {list-style: none;margin: 0;padding: 0;li {width: 90%;margin: 0 auto;height: 150px;padding: 10px 0;border-bottom: 1px solid darkgray;cursor: pointer;.ibox {width: 100%;height: 100%;display: flex;align-items: center;.img_left {width: 180px;height: 120px;margin: 0 10px 0 20px;img {width: 100%;height: 100%;}}.content_right {width: calc(100% - 230px);height: 120px;display: flex;flex-direction: column;align-items: flex-start;.title,.info,.footer {width: 100%;}.title {height: 30px;font-size: 22px;font-weight: bold;text-align: left;overflow: hidden;}.info {height: calc(100% - 65px); //90字后省略overflow: hidden;white-space: normal;p {width: 100%;height: 100%;margin: 10px 0 10px 0;text-indent: 2em;}}.footer {height: 28px;display: flex;flex-direction: row;align-items: flex-end;span {margin-left: 5px;margin-right: 25px;font-size: 15px;}}}}}
}
</style>操作2
操作3
父组件引入
操作4
页面效果
无异
