使用vue和elementui写一个后台管理页面

好的，以下是一个简单的后台管理页面的代码示例：

<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">用户管理</template>
        <el-menu-item index="2-1">用户列表</el-menu-item>
        <el-menu-item index="2-2">添加用户</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">文章管理</template>
        <el-menu-item index="3-1">文章列表</el-menu-item>
        <el-menu-item index="3-2">添加文章</el-menu-item>
      </el-submenu>
    </el-menu>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['2']" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">用户管理</template>
            <el-menu-item index="2-1">用户列表</el-menu-item>
            <el-menu-item index="2-2">添加用户</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">文章管理</template>
            <el-menu-item index="3-1">文章列表</el-menu-item>
            <el-menu-item index="3-2">添加文章</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px;"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
.el-menu-demo {
  margin-bottom: 20px;
}
.el-menu-vertical-demo {
  border-right: 1px solid #dcdcdc;
  height: 100%;
}
</style>

这个页面使用了 ElementUI 的菜单组件，可以根据需要自定义菜单项和子菜单项。同时，页面还包括一个头部和侧边栏，可以在头部添加个人设置和退出登录等功能。最后，页面的主体部分使用了 Vue Router 来实现不同页面的切换。