Vue3 Element Plus Container布局

1.使用Element Plus实现常用布局界面

<template>
	<el-container class='o-container' >
		<!-- 左侧 -->
		<el-aside class='o-left-container' >Aside</el-aside>
		<!-- 右侧 -->
		<el-container>
		<!-- 头部 -->
			<el-header class='o-header' >Header</el-header>
			<!-- 右侧 路由组件 -->
			<el-main class='o-main' >
				<router-view></router-view>
			</el-main>
			<!--  -->
			<el-footer class='o-footer' >
				{{ copyRight }}
			</el-footer>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import {ref } from 'vue'

const copyRight = ref("Footer")
</script>

<style lang="scss" scoped>
$width: 260px;

.o-container{
	height: 100%;
	
}

.o-left-container{
	width: $width;
	background-color: var(--el-color-primary-light-8);
	
}

.o-main{
	background-color: var(--el-color-primary-light-9);
}

.o-header{
	background-color: var(--el-color-primary-light-7);
}

.o-footer{
	background-color: var(--el-color-primary-light-7);
}

</style>

注：<el-container>的直接子元素必须是后四个组件中的一个或多个。 el-header,el-aside,el-main,el-footer四个组件的父元素必须是一个 <el-container>

 2.布局展示效果