vue使用elementui框架,如何搭建顶部一级菜单,左侧二级菜单的布局?
时间: 2024-04-12 13:30:07 浏览: 114
在Vue项目中使用Element UI框架搭建顶部一级菜单和左侧二级菜单的布局,可以按照以下步骤进行:
1. 安装Element UI:
在项目目录下执行命令:`npm install element-ui -S`
2. 导入Element UI组件:
在main.js中导入Element UI的样式和组件:
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
3. 搭建顶部一级菜单:
在App.vue中使用`el-menu`组件创建顶部一级菜单:
```html
<template>
<div id="app">
<el-menu mode="horizontal">
<el-menu-item index="1">菜单1</el-menu-item>
<el-menu-item index="2">菜单2</el-menu-item>
<el-menu-item index="3">菜单3</el-menu-item>
</el-menu>
<router-view/>
</div>
</template>
```
4. 搭建左侧二级菜单:
在App.vue中使用`el-menu`组件创建左侧二级菜单,并嵌套在`el-menu-item-group`中:
```html
<template>
<div id="app">
<el-menu mode="horizontal">
<el-menu-item index="1">菜单1</el-menu-item>
<el-menu-item index="2">菜单2</el-menu-item>
<el-menu-item index="3">菜单3</el-menu-item>
</el-menu>
<el-menu style="width: 200px;" default-active="1-1" router>
<el-menu-item-group title="分组1">
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-1">选项3</el-menu-item>
<el-menu-item index="2-2">选项4</el-menu-item>
</el-menu-item-group>
</el-menu>
<router-view/>
</div>
</template>
```
5. 配置路由:
在router/index.js中配置路由,确保路由的`path`与`index`属性对应:
```javascript
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/page1',
name: 'Page1',
component: Page1
},
{
path: '/page2',
name: 'Page2',
component: Page2
}
]
});
```
这样,你就可以在Vue项目中使用Element UI框架搭建顶部一级菜单和左侧二级菜单的布局了。你可以根据需要自定义菜单项和路由配置。记得在组件中引入对应的页面组件,如Home、Page1、Page2等。
阅读全文