Vue中使用Element.UI菜单完成主体页面搭建

一.搭建ElementUI基础环境（基于脚手架）

1.新建空的文件夹,文件夹命名自定义

2.在文件资源管理器上方输入cmd

3.然后在控制台中输入vue create (自定义名称)注意:只支持小写输入完后按Enter

4.在第一个选择项中选择Manually select features

5.第二个选择框选择(空格多选)

6.选择2.0x

7.输入n(否)

8.剩下所有直接全部回车默认选择

二.创建完成后右键文件使用Vuecode打开

1.新建终端

2.输入npm i element-ui -S(安装element-ui)

3.在main文件中添加

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

Vue.use(ElementUI);

4.创建Views视图,右键视图新建文件

5.后缀加上.vue,复制Element.UI官网的container布局

6.在Aside中将找到Element.UI官网的NavMenu 导航菜单复制

<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<el-menu-item-group>
<template slot="title">分组一</template>
<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-submenu>
</el-menu>
</el-aside>

<el-container>
<el-main><h2>主体</h2> </el-main>
</el-container>
</el-container>