前言：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.找到想要的组件，点击显示代码
（有些要嵌套到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控制只能让一个导航菜单可以展开，其他的收缩
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
