当前位置：首页 > article >正文

vue管理系统常规布局思路，头部+菜单+主题（Container 布局容器）

article 2025/3/10 15:05:43

我们平时写管理系统的时候，非常需要这种布局，我们直接使用Container 布局容器就可以做到这个效果。

我们首先要弄清楚，container这个容器都有些什么，我们直接写一个！

 <el-container>
      <!-- 左侧边栏 -->
      <el-aside>
        左侧边栏
      </el-aside>
      <!-- 右侧 -->
      <el-container>
        <!-- 头部 -->
        <el-header>头部 </el-header>
        <!-- 主体 -->
        <el-main>主体</el-main>
      </el-container>

    </el-container>

这里面el-container就是一个大的盒子，包含着所有的东西，el-aside这个就是左侧边栏，el-container，这个就是右边的大盒子，然后el-header，就是头部，el-main，这个就是右侧的主题，也是我们写的最多的东西写完的效果就是这样的，布局非常清晰。