一：安装及引入
1.1安装
方式一：用CDN引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>方式二：使用npm安装
npm i element-ui -S1.2引入
如果使用方式一安装，则不再需要引入
如果使用方式二安装，则在main.js文件中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //坑一
Vue.use(ElementUI);坑一：需要单独引入样式文件 但是elementUI有两个版本，因此在引入theme-chalk/index.css文件时可能会报找不到这个文件
解决办法：引入default-chalk/index.css
弊端：一些elementUI2.0中的样式或是属性不能使用，注意有一些elementUI版本中的属性需要严格区分，下面会详细叙述。
二：布局
elementUI中布局方式可以类比于BootStrap中的布局方式来使用。
| 条目 | BootStrap | ElementUI |
| 栅格布局的行和列 | *可取 lg md sm xs x可取 1 2 3 4 6 9 12 列偏移为col-*-offset-x(*只能为md)行和列可以任意嵌套 |
用:span表示 且分格为24(*为0到24的任意数字) gutter为一行分多列时的间距 默认为0 ，即会紧挨 :offset为偏移量 通常不会使用 type为flex中包括justify（水平）和align（垂直） |
| 响应式布局 | 1.基本布局规则如上 2.媒体查询--不同的屏幕大小下，使用不同的css样式 |
取值为xs sm md lg xl 一行总和相加还是要为24 |
三：基本组件
3.1图标
通常不使用elementUI的图标，可以使用阿里云图标库 使用说明在技术胖将vue的视频中有说明
3.2Button
3.2.1基本的按钮属性
1.type：primary（蓝色） / success （绿色）/ warning （黄色）/ danger（红色） / info （灰色）/ text（文本）
2.样式：type（类型），plain（朴素），round（方角），circle（圆角），disabled（不可点击）
notices：除了type以外其余都去boolean类型的值，默认为false
3.size：medium / small / mini
notices：通常只能改变高度，不能改变宽度，因此在使用的时候一般都是给medium
4.icon属性为图标，<el-button-group></el-button-group>为按钮组
四：那些遇到的坑们
1.select框
1.问题：宽度没有办法改变
解决办法：一定要给select框的外面加尺寸，不能在form元素或是其他的地方加尺寸，没有什么作用。
2.datePicker日期选择器
1.问题：想要限制某一个时间段内的时间 比如只能选择1900年1月1日到2100年12月31日之间的时间段
解决：使用pickerOptions属性
template：（editable为是否可输入）
<el-date-picker v-model="timePicker" style="width:100%;" :picker-options="pickerOptions" :editable='edit'></el-date-picker>data(){
return{
timePicker:'',
pickerOptions:{
disabledDate(time) {
let min=time.getTime() < new Date("1900/1/1");
let max=time.getTime() > new Date("2099/12/31");
return min||max;
}
},
edit:false,
}
}2.问题：（衍生出来的时间问题）在使用getFullYear()等和时间相关的函数时，报错如下：
"TypeError: ds.getFullYear is not a function"
解决：getFullYear()等函数的调用对象必须为object（即ds的对象必须时object）因此需要
var d=new Date（ds）;
console.log(d.getFullYear());显然是因为getFullYear一类的时间函数的原型写法为
Object.getFullYear=function(){
//对object的处理
return 年
};3.注意和Boolean类型相关的值需要在data里面给一个值，不能直接在元素里以editable=false或是editable='false'的形式给它
3.Upload文件上传
1.问题：判断上传之前的格式
解决：给<el-upload></el-upload>标签加上before-upload属性
<template>
<el-upload
:before-upload='beforeUpload'>
<el-button size="middle" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
methods:{
beforeUpload(file){
//file.type为文档类型
console.log(file.type);
}
}
</script>4.form表单
1.input框输入密码或是其他和HTML5中一样，只需要改变type即可
5.pagination分页
1.问题：重置以后恢复分页的初始状态
解决：将需要的当前页和页面大小在改变的过程中传递，而不是传一个死的，传一个死的再改变，它有可能不会改变。
<template>
<el-pagination
@size-change="handleSizeChange"
//这是页面大小切换时候的函数
@current-change="handleCurrentChange"
//这是当前页切换的函数
:current-page="form.page"
//当前页
:page-sizes="[10,20,50,100,200]"
//页面数组
:page-size="form.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
</el-pagination>
</template>
<script>
data(){
return{
form:{
page:1,
pageSize:10,
},
totalPage:0,
},
methods:{
handleSizeChange(val){
//val为目前选择的页面大小
},
handleCurrentChange(val){
//val为目前选择的当前页
}
}
}
</script>6.NavMenu导航栏菜单
1.问题：多个导航栏菜单，el-menu-item打开时，el-submenu不会关闭
解决：调用el-menu的关闭el-submenu的函数
步骤：1.如果点击的是el-submenu，就获取它的唯一索引 index
<el-menu @open="handleOpen" ref=‘menu’>//必须要给ref属性，方便后面调用函数
<el-submenu></el-submenu>
<el-menu-item></el-submenu-item>
</el-menu>
handleOpen(key,path){
//key即为需要的唯一索引this.key=key;
}2.点击的是el-menu-item，就调用前面存储的唯一索引所对应的关闭函数，并注意情况存唯一索引的变量的值,注意el-submenu关闭的时候也要清空key
showIndex(){
if(this.key!=''){
this.$refs.menu.close(this.key);
this.key='';
}2.收起的时候可能会出现字体的卡顿
这是element UI本身组件的问题，没有办法解决，可以给一个优化方案为给标题一个margin或者padding。
7.dialog对话框
1.问题：size属性不再起作用（tiny，small，middle，large）
换成width，且以百分比出现