前言：Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，通过使用Element可以大大加速前端的开发速度，节省了脑力与时间。
第一步：在vue项目下安装ElementUI
npm i element-ui -S //安装element-ui
npm install sass-loader node-sass --save-dev //安装sass加载器
sass加载器就不截图了。。。。
第二步：在main.js引入elementui
下面导入了一个css文件需要到sass加载器，这就上面为啥导入了一个sass
第三步：去到elementui官网 Element - The world's most popular Vue UI framework
1.找到想要的组件，点击显示代码
2.在views先新创建一个文件，在复制上面的代码粘贴到<template>标签间（有些要嵌套到div中不然报错，且样式部分和js部分记得要分开复制粘贴）
3.结果展示
ps：导航菜单详解：
el-aside为侧 el-main为显示部分
el-aside中的 el-menu属性设置
:default-active="$route.path" ：设置组件按钮点击之后，显示的效果不会因为页面的刷新而重置
:router=“true” ： 设置路由按钮可以跳转显示路由
el-menu-item 的 index 属性为设置 路由跳转的 路径
el-main中 ： 设置一个 router-view 来展示路由
我的总结：首先用el-container写一个大框，大框里面写el-aside代表左框，el-header代表头部的，el-main代表主要展示页面，el-footer代表底部框。（要是不需要其中哪个框直接不写哪个框就好了，除了el-container，其他框要是像写成上图一样的排版一样直接同级并列就行）
el-menu属性列举：
-
首页效果为
el-menu中嵌套el-menu-item,el-menu-item中左侧图标填充，右侧文字填充 -
部门效果为
el-menu嵌套el-submenu,el-submenu嵌套el-menu-item -
窗口效果为
el-menu嵌套el-submenu,el-submenu嵌套el-menu-item-group,el-menu-item-group嵌套el-menu-item，达到分组效果 -
图标填充和分组效果都需要在
slot指定title的标签内实现 -
default-active指定默认的导航栏选项，对应el-menu-item的index属性 -
mode指定导航栏的纵横向显示，horizontal/vertical -
@select在el-menu-item被选中时触发 -
background-color指定导航栏背景色 -
text-color指定文本颜色 -
active-text-color指定选中导航栏文本颜色 -
collapse控制垂直导航栏的折叠 -
unique-opened控制只能让一个导航菜单可以展开，其他的收缩