vue2+element-ui 顶部一级菜单 左侧二三级菜单

在Vue 2结合Element UI的项目中，创建一个带有一级顶部菜单和二级、三级左侧菜单的布局通常是这样的：

1. **安装依赖**:
首先确保已经安装了Vue、Element UI及其相应的路由库（如vue-router）。

   npm install vue@^2.0 element-ui vue-router

2. **结构设置**:
- **App.vue**: 作为应用入口，通常包含`<router-view>`用于显示路由内容，以及`el-menu`用于导航菜单。
- **Menu.vue**: 一个自定义组件，可以封装一级菜单和嵌套的二级、三级菜单。
- **一级菜单数据**：例如通过`data()`方法定义对象数组，每个对象代表一个菜单项，包括`name`, `route`等属性。

3. **HTML模板**:

   <template>
     <div id="app">
       <header> <!-- 一级菜单 -->
         <el-menu :default-active="$route.path" router>
           <!-- 一级菜单项 -->
           <el-submenu v-for="(item, index) in menus" :key="index">
             <template slot="title">{{ item.name }}</template>
             <el-menu-item v-for="(subItem, subIndex) in item.subItems" :key="subIndex" :to="{ path: subItem.route }">{{ subItem.name }}</el-menu-item>
           </el-submenu>
         </el-menu>
       </header>
       <main>
         <router-view></router-view>
       </main>
     </div>
   </template>

4. **组件注册和使用**:
在`components`选项中注册`Menu.vue`，然后在需要的地方引用它。

5. **Vuex (可选)**: 如果有状态管理需求，可以考虑使用Vuex来存储和管理菜单状态。

6. **CSS样式调整**:
可能需要一些定制的CSS来美化菜单外观和响应式设计。