Vue + ElementUI 实现后台管理系统模板 -- 前端篇：引入 element-ui 定义基本页面显示

<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- 侧边栏内容 -->
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <!-- 顶部菜单栏 -->
      </el-header>
      <el-main>
        <!-- 主要内容区 -->
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
export default {
  name: 'AdminTemplate',
  data() {
    return {
      // 数据定义
    };
  },
  methods: {
    // 方法定义
  }
};
</script>
 
<style>
/* 样式定义 */
</style>

这个代码实例展示了如何使用Vue和ElementUI创建一个后台管理系统的基本框架。它使用了<el-container>和<el-aside>组件来构建侧边栏，使用<el-header>组件来构建顶部菜单栏，使用<el-main>组件来构建主要内容区。这个框架可以作为开发者在实现后台管理系统时的起点。