现成的管理系统页面，直接可以使用，粘贴就行

效果图

HomeView

<template>
  <div>
    <el-container>
      <!-- 左侧边栏 -->
      <el-aside :width="asideWidth" style=" background-color: #001529;;min-height: 100vh;">
        <div style="height: 60px;display: flex;align-items: center;justify-content: center;color: white;">
          <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt=""
            style="width: 40px;height: 40px;border-radius: 50%;">

          <span style="margin-left: 5px;font-size: 20px;font-weight: bold;" v-show="!isCollapse">小刘的项目</span>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" text-color="rgba(255,255,255,0.65)"
          active-text-color="#fff" background-color="#001529" style="border: none;" router
          :default-active="$route.path">
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/1">
            <i class="el-icon-menu"></i><span slot="title">信息管理</span>
          </el-menu-item>
          <el-menu-item>
            <i class="el-icon-menu"></i><span slot="title">信息管理</span>
          </el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-menu"></i><span>信息1管理</span>
            </template>
            <el-menu-item>
              <i class="el-icon-menu"></i><span slot="title">系统首页</span>
            </el-menu-item> <el-menu-item>
              <i class="el-icon-menu"></i><span slot="title">系统首页</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧 -->
      <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
          <i class="icons" :class="collapseIcon"
            style="color: red;background-color: #fff;font-size:26px;margin-right: 20px;" @click="handleCollapse"></i>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
          </el-breadcrumb>
          <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: end;">
            <i class="el-icon-nainiumao" style="font-size: 26px;margin-right: 10px;" @click="handleFull"></i>
            <el-dropdown placement="bottom">
              <div style="display: flex;align-items: center;cursor: default;">
                <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""
                  style="width: 40px;height: 40px;border-radius: 50%;">
                <span style="margin-left: 5px;">管理员</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主体 -->
        <el-main>
          <el-card class="box-card" style="width: 500px;">
            <div slot="header" class="clearfix">
              <span style="font-weight: 600;font-size: 26px;font-style:oblique;">小高牛逼</span>
            </div>
            <div>
              <div style="margin-bottom:30px; font-weight: bold">
                你好呀~
              </div>
              <el-button round>圆角按钮</el-button>
              <el-button type="primary" round>主要按钮</el-button>
              <el-button type="success" round>成功按钮</el-button>
              <el-button type="info" round>信息按钮</el-button>
            </div>
          </el-card>


        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,//不收缩
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold'
    }
  },
  methods: {
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    handleFull() {
      document.documentElement.requestFullscreen();
    }
  }
}
</script>
<style>
.el-menu--inline .el-menu-item {
  background-color: #000c17 !important
}

.el-menu-item:hover,
.el-submenu__title:hover {
  color: #fff !important;
  background-color: cadetblue !important;
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center
}

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>