一：安裝及引入

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 -S

1.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中的佈局方式來使用。

<div class="container">
<div class="row">
<div class="col-*-x"></div>
<div class="col-*-x"></div>
</div>
</div>

<el-row></el-row>//行
<el-col></el-col>//列 

<el-row :gutter='*'>
<el-col :span='*'></el-col>
<el-col :span='*' :offset="*"></el-col>
</el-row>

/* 超小裝置（手機，小於 768px） */
/* Bootstrap 中預設情況下沒有媒體查詢 */

/* 小型裝置（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) {css樣式 }

/* 中型裝置（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) { css樣式}

/* 大型裝置（大臺式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { css樣式}

三：基本元件

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，且以百分比出現