，右侧根据左侧选中的模块
显示相应的管理内容。
1. 首先，需要在项目中安装
Vue和
ElementUI，可以使用npm或yarn进行安装。
```bash
npm install
vue element-ui
```
2. 在
Vue项目的入口文件中，引入
Vue和
ElementUI，并注册
ElementUI组件。
```javascript
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组件的每个选项与相应的路由链接绑定起来，点击后就可以在右侧
显示相应的管理内容。
```html
<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. 在路由配置中，为每个管理模块定义相应的路由，例如：
```javascript
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的各种组件来实现相应的功能，例如
表格、表单、弹窗等。
```html
<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
显示相应的内容。
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import Management from '@/views/Management.
vue'
export default {
name: 'App',
components: {
Management
}
}
</script>
```
4583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
