一个基于Vue3和ElementPlus的后台管理布局

在App.vue的文件可以直接粘贴使用，注意：在此之前要删除vue脚手架自带的CSS全局样式文件，vue3图标的使用在main.js文件中进行全局注册。

<template>
    <div class="layout">
        <el-container  class="container">
            <el-aside class="aside">
                <div class="head">
                    <div>
                        <img src="//s.weituibao.com/1582958061265/mlogo.png" alt="logo">
                        <span>vue3</span>
                    </div>
                </div>
                <div class="line" />
                <el-menu
                        background-color="#222832"
                        text-color="#fff"
                        :router="true"

                >
                    <el-menu-item index="/introduce"><el-icon><House /></el-icon>首页</el-menu-item>
                    <el-sub-menu index="1">
                        <template #title>
                            <span>模块信息管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/dashboard"><el-icon><Odometer /></el-icon>模块信息管理</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>


                </el-menu>
            </el-aside>
            <el-container class="content">
                <div class="header">
                    <div class="left">

                    </div>
                    <div class="right">
                        <el-popover
                                placement="bottom"
                                :width="320"
                                trigger="click"
                                popper-class="popper-user-box"
                        >
                            <template #reference>
                                <div class="author">
                                    <el-icon><Avatar /></el-icon>
                                     admin
                                </div>
                            </template>
                            <div class="nickname">
                                <p>登录名：admin </p>
                                <el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
                            </div>
                        </el-popover>
                    </div>
                </div>
                <div class="main">
                    <router-view />
                </div>
                <div class="footer">
                    <div class="left">底部栏</div>
                    <div class="right">
                        <a target="_blank" href="https://github.com/newbee-ltd/vue3-admin">vue3-shop</a>
                    </div>
                </div>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>

</script>

<style scoped>
    .layout {
        min-height: 100vh;
        background-color: #ffffff;
    }
    .container {
        height: 100vh;
    }
    .aside {
        width: 200px!important;
        background-color: #222832;
    }
    .head {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
    }
    .head > div {
        display: flex;
        align-items: center;
    }

    .head img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .head span {
        font-size: 20px;
        color: #ffffff;
    }
    .line {
        border-top: 1px solid hsla(0,0%,100%,.05);
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
    .content {
        display: flex;
        flex-direction: column;
        max-height: 100vh;
        overflow: hidden;
    }
    .main {
        height: calc(100vh - 100px);
        overflow: auto;
        padding: 10px;
    }
</style>

<style>
    body {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .el-menu {
        border-right: none!important;
    }
    .el-submenu {
        border-top: 1px solid hsla(0, 0%, 100%, .05);
        border-bottom: 1px solid rgba(0, 0, 0, .2);
    }
    .el-submenu:first-child {
        border-top: none;
    }
    .el-submenu [class^="el-icon-"] {
        vertical-align: -1px!important;
    }
    a {
        color: #409eff;
        text-decoration: none;
    }
    .el-pagination {
        text-align: center;
        margin-top: 20px;
    }
    .el-popper__arrow {
        display: none;
    }
    .footer {
        height: 50px;
        border-top: 1px solid #e9e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
</style>
<style scoped>
    .header {
        height: 50px;
        border-bottom: 1px solid #e9e9e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }
    .header .left .back {
        border: 1px solid #e9e9e9;
        padding: 5px;
        border-radius: 50%;
        margin-right: 5px;
        cursor: pointer;
    }
    .right > div > .icon{
        font-size: 18px;
        margin-right: 6px;
    }
    .author {
        margin-left: 10px;
        cursor: pointer;
    }
</style>

<style>
    .popper-user-box {
        background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat!important;
        background-size: cover!important;
        border-radius: 0!important;
    }
    .popper-user-box .nickname {
        position: relative;
        color: #ffffff;
    }
    .popper-user-box .nickname .logout {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }
</style>

图片展示如下：