使用vue+elementUI编写一个管理页面，左侧显示管理的模块

，右侧根据左侧选中的模块显示相应的管理内容。

1. 首先，需要在项目中安装Vue和ElementUI，可以使用npm或yarn进行安装。

npm install vue element-ui

2. 在Vue项目的入口文件中，引入Vue和ElementUI，并注册ElementUI组件。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在模板中，可以使用ElementUI的Layout组件实现页面布局，左侧使用Menu组件显示管理模块，右侧使用Content组件显示管理内容。可以使用router-link将Menu组件的每个选项与相应的路由链接绑定起来，点击后就可以在右侧显示相应的管理内容。

<template>
  <div class="wrapper">
    <el-row>
      <el-col :span="4">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <router-link to="/user">用户管理</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/product">商品管理</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/order">订单管理</router-link>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-content>
          <router-view></router-view>
        </el-content>
      </el-col>
    </el-row>
  </div>
</template>

4. 在路由配置中，为每个管理模块定义相应的路由，例如：

import User from '@/views/User.vue'
import Product from '@/views/Product.vue'
import Order from '@/views/Order.vue'

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user',
      name: 'User',
      component: User
    },
    {
      path: '/product',
      name: 'Product',
      component: Product
    },
    {
      path: '/order',
      name: 'Order',
      component: Order
    }
  ]
})

5. 在管理模块的组件中，可以使用ElementUI的各种组件来实现相应的功能，例如表格、表单、弹窗等。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市朝阳区' },
        { name: '李四', age: 20, address: '上海市浦东新区' },
        { name: '王五', age: 22, address: '广州市天河区' },
        { name: '赵六', age: 24, address: '深圳市福田区' }
      ]
    }
  }
}
</script>

6. 最后，在App.vue中引入管理页面组件，并使用router-view显示相应的内容。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import Management from '@/views/Management.vue'

export default {
  name: 'App',
  components: {
    Management
  }
}
</script>