Vue + ElementUI 实现后台管理系统模板 -- 前端篇

<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-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table
          :data="tableData"
          style="width: 100%">
          <!-- 表格列定义 -->
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    }
  }
}
</script>
 
<style>
/* 可以添加一些样式 */
</style>

这个代码实例展示了如何使用Vue和ElementUI创建一个后台管理系统的基本框架。包括侧边栏、顶部菜单、面包屑导航、表格等组件的使用。在实际应用中，你需要根据具体的业务逻辑和数据来填充<template>中的内容，以及<script>中的数据。