MyHome.vue

<template>
	<div class="home-container">
		<el-row>
			<el-col :span="24">
				<!-- 头部区域 -->
				<MyHeader></MyHeader>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="3">
				<!-- 左侧边栏 -->
				<MyAside></MyAside>
			</el-col>
			<el-col :span="21">
				<!-- 主体区域 -->
				<router-view></router-view>
			</el-col>
		</el-row>
	</div>
</template>

<script>
// 头部区域组件
import MyHeader from './subcomponents/MyHeader.vue'
// 左侧边栏组件
import MyAside from './subcomponents/MyAside.vue'
export default {
    name: 'MyHome',
    // 注册组件
    components: {
        MyHeader,
        MyAside,
    },
}
</script>

<style lang="less" scoped>
.home-container {
	height: 100%;
	display: flex;
	flex-direction: column;

	.home-main-box {
		height: 100%;
		display: flex;
		.home-main-body {
			padding: 15px;
			flex: 1;
		}
	}
}
</style>