1、下載npm i element-ui -S

2、引入css樣式

　　<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 3、佈局 　　父級盒子可以巢狀配置 　　el-row相當與div，可加屬性： 　　　　：gutter="20"　　柵格間隔;即padding值 　　　　type="flex"　　　新增彈性盒子佈局 　　　　justify=“start”　　flex佈局的排列方式　　start/end/center/space-around/space-between 　　　　align=“top”　　　flex 佈局下的垂直排列方式　　top/middle/bottom上/中/下 　　　　tag=“ul”　　　　自定義標籤 　　el-col是在el-row的下的div，屬性可加： 　　　　：span = "24"　　 24等分 　　　　：offset=“1”　　　 柵格左側的間隔格數1份　　margin-left 　　　　：push=“1”　　　 柵格向右移動格數1份　　　定位left 　　　　：pull="1"　　　　柵格向左移動格數1份　　 定位right 　　　　　tag　　　　　　自定義標籤 　　　　　響應式佈局： 　　　　　　　　：xs=“1”　　 <768px 　 1份　　 　　　　　　　　：sm=“2”　　≥768px 　 2份 　　　　　　　　：md=“3”　　≥992px 　 3份 　　　　　　　　：lg=“4”　　 ≥1200px 　4份 　　　　　　　　：xl=“5”　　 ≥1920px 5份 　　<el-container>：外層容器。當子元素中包含<el-header>或<el-footer>時，全部子元素會垂直上下排列，否則會水平左右排列。 　　　　　　屬性：direction　　子元素中有el-header或el-footer時為 vertical，否則為 horizontal 　　<el-header>：頂欄容器。 　　　　　　屬性：height　　高度 　　<el-aside>：側邊欄容器。 　　　　　　屬性：width　　寬度 　　<el-main>：主要區域容器。 　　<el-footer>：底欄容器。 　　　　　　屬性：height　　高度 4、圖示icon 　　http://element.eleme.io/#/zh-CN/component/icon 5、按鈕 　　el-button屬性： 　　　　size="medium"　　medium / small / mini 中等、小型、超小 　　　　type="primary"　　primary / success / warning / danger / info / text　　更改背景顏色 　　　　plain　　　　true、false　　　　是否為樸素按鈕（貌似沒啥用） 　　　　round　　　　true、false　　　 是否為圓角 　　　　loading　　　　true、false　　　是否為載入中狀態（點不了的按鈕有啥用） 　　　　disabled　　　　true、false　　 是否禁用 　　　　icon=“”　　　　　圖示類名　　　在按鈕上新增圖示 　　　　autofocus　　　　true、false　　是否預設聚焦 　　　　native-type　　button / submit / reset　　原生 type 屬性 6、Radio 單選框 　　可以用v-model繫結屬性，進行判斷選中狀態 　　radio的事件： 　　　　change　　繫結值變化時觸發的事件　　例子：@change="執行函式" 　　el-radio屬性： 　　　　label　　Radio的value　　也就是v-model繫結的標識 　　　　disabled　　true、false　 是否禁用 　　　　border　　true、false　　是否顯示邊框 　　　　size=“”　　medium / small / mini　　尺寸，僅在 border 為真時有效 　　　　name　　　　原生 name 屬性 　　el-radio-group屬性：　　注：包裹radio組的容器 　　　　size=“”　　medium / small / mini　　改變所有子級帶border屬性的大小 　　　　disabled　　true、false　　是否禁用　　此群組所有的radio都被禁用 　　　　text-color=""　 顏色　　　啟用時按鈕文字顏色（注意是按鈕） 　　　　fill=""　　　　　顏色　　　啟用改變按鈕的邊框與背景色（注意是按鈕） 　　el-radio-group事件 　　　　@change=“執行函式”　　　 　　el-radio-button　　按鈕radio 　　　　label　　Radio的value　　也就是v-model繫結的標識 　　　　disabled　　是否禁用 　　　　name　　原聲name屬性 7、checkbox多選框 　　v-model可以繫結陣列，控制那些checkbox為勾選狀態　　 　　checkbox，Checkbox-button屬性： 　　　　size=“”　　medium / small / mini　　多選框組尺寸，僅對按鈕形式的 Checkbox 或帶有邊框的 Checkbox 有效 　　　　disabled　　true、false　　是否禁用 　　　　true-label　　選中的值　　（啥意思？） 　　　　false-label　　沒有選中時的值　　（啥意思？） 　　　　border　　true、false　　顯示邊框 　　　　name　　原生 name 屬性 　　　　checked　　true、false　　當前是否勾選　　加上：為false也會變，只是初始預設值 　　　　indeterminate　　true、false　　設定 indeterminate 狀態，只負責樣式控制 　　Checkbox事件 　　　　@change="執行函式" 　　Checkbox-group屬性： 　　　　：min　　可以控制被勾選的專案的數量。（最小） 　　　　：max　　可以控制被勾選的專案的數量。（最大） 　　　　size=“”　　medium / small / mini　　多選框組尺寸，僅對按鈕形式的 Checkbox 或帶有邊框的 Checkbox 有效 　　　　disabled　　true、false　　是否禁用 　　　　text-color　　顏色　　按鈕形式的 Checkbox 啟用時的文字顏色 　　　　fill　　顏色　　按鈕形式的 Checkbox 啟用時的填充色和邊框色 　　Checkbox-group事件： 　　　　@change=“執行函式” 8、input輸入框 　　input屬性： 　　　　type　　text / textarea　　input的型別單行文字與多行文字 　　　　value=“”　　輸入框中的值　　繫結值 　　　　：maxlength　　原生屬性，最大輸入長度 　　　　：minlength　　原生屬性，最小輸入長度 　　　　placeholder　　輸入框佔位文字 　　　　clearable　　true、false　　是否可清空 　　　　disabled　　true、false　　是否禁用 　　　　size=“”　　　　medium / small / mini　　輸入框尺寸，只在type!="textarea"時有效 　　　　prefix-icon=“圖示的類名”　　輸入框頭部圖示 　　　　suffix-icon=“圖示的類名”　　輸入框尾部圖示 　　　　rows　　輸入框行數，只對type="textarea"有效　　預設2 　　　　autosize　　自適應內容高度，只對type="textarea"有效，可傳入物件，如，{ minRows: 2, maxRows: 6 } 　　　　auto-complete　　原生屬性，自動補全 　　　　name　　原生屬性 　　　　readonly　　true、false　　原生屬性，是否只讀　　不能輸入值 　　　　：max　　原生屬性，設定最大值 　　　　：min　　原生屬性，設定最小值 　　　　step　　原生屬性，設定輸入欄位的合法數字間隔 　　　　resize　　none, both, horizontal, vertical　　控制是否能被使用者縮放 　　　　autofocus　　true, false　　原生屬性，自動獲取焦點 　　　　form　　原生屬性 　　　　label　　輸入框關聯的label文字 　　　　tabindex　　輸入框的tabindex（不造啥意思） 　　Input slots屬性： 　　　　prefix　　輸入框頭部內容，只對type="text"有效 　　　　suffix　　輸入框尾部內容，只對type="text"有效 　　　　prepend　　輸入框前置內容，只對type="text"有效 　　　　append　　輸入框後置內容，只對type="text"有效 　　　　例子： 　　　　　　<el-input> 　　　　　　　　<i slot="prefix">111</i> 　　　　　　</el-input> 　　Input事件： 　　　　blur　　在 Input 失去焦點時觸發 　　　　focus　　在 Input 獲得焦點時觸發 　　　　change　　在 Input 值改變時觸發 　　　　clear　　在點選"clearable"屬性生成的清空按鈕時觸發 　　Input方法 　　　　focus　　使 input 獲取焦點（莫名奇妙？？？） 　　el-autocomplete屬性：（可帶輸入建議的輸入框元件，fetch-suggestions是一個返回輸入建議的方法屬性，如 querySearch(queryString, cb)，在該方法中你可以在你的輸入建議資料準備好時通過 cb(data) 返回到 autocomplete 元件中） 　　　　disabled　　boolean　　禁用 　　　　placeholder　　輸入框佔位文字 　　　　value-key　　輸入建議物件中用於顯示的鍵名 　　　　value　　　　必填值，輸入繫結值 　　　　debounce　　獲取輸入建議的去抖延時 　　　　fetch-suggestions　　返回輸入建議的方法，僅當你的輸入建議資料 resolve 時，通過呼叫 callback(data:[]) 來返回它　　Function(queryString, callback)　　（暫時未看） 　　　　popper-class　　Autocomplete 下拉列表的類名 　　　　trigger-on-focus　　是否在輸入框 focus 時顯示建議列表 　　　　name　　原生屬性 　　　　select-when-unmatched　　在輸入沒有任何匹配建議的情況下，按下回車是否觸發select事件 　　　　label　　輸入框關聯的label文字　　 　　　　prefix-icon　　輸入框頭部圖示 　　　　suffix-icon　　輸入框尾部圖示 　　Autocomplete slots屬性： 　　　　name　　說明 　　　　prefix　　輸入框頭部內容 　　　　suffix　　輸入框尾部內容 　　　　prepend　　輸入框前置內容 　　　　append　　輸入框後置內容 　　Autocomplete Events： 　　　　select　　點選選中建議項時觸發 9、inputNumber計數器 　　el-input-number屬性： 　　　　value　　繫結值 　　　　：min　　設定計數器允許的最小值 　　　　：max　　設定計數器允許的最大值 　　　　step　　　計數器步長 　　　　size　　large, small　　計數器尺寸 　　　　disabled　　boolean　　是否禁用計數器　　 　　　　controls　　boolean　　是否使用控制按鈕 　　　　controls-position　　right　　控制按鈕位置 　　　　name　　原生屬性 　　　　label　　輸入框關聯的label文字 　　事件： 　　　　change　　繫結值被改變時觸發 　　　　blur　　　在元件 Input 失去焦點時觸發 　　　　focus　　在元件 Input 獲得焦點時觸發 　　Methods方法： 　　　　focus　　使 input 獲取焦點 10、Select 選擇器 　　el-select屬性： 　　　　multiple　　boolean　　是否多選 　　　　disabled　　boolean　　是否禁用 　　　　value-key　　作為 value 唯一標識的鍵名，繫結值為物件型別時必填 　　　　size　　medium/small/mini　　輸入框尺寸 　　　　clearable　　boolean　　單選時是否可以清空選項 　　　　collapse-tags　　boolean　　多選時是否將選中值按文字的形式展示 　　　　multiple-limit　　number　　多選時使用者最多可以選擇的專案數，為 0 則不限制 　　　　name　　select input 的 name 屬性 　　　　auto-complete　　select input 的 autocomplete 屬性 　　　　placeholder　　佔位符 　　　　filterable　　boolean　　是否可搜尋 　　　　allow-create　　boolean　　是否允許使用者建立新條目，需配合filterable使用 　　　　filter-method　　function　　自定義搜尋方法 　　　　remote　　boolean　　是否為遠端搜尋 　　　　remote-method　　function　　遠端搜尋方法 　　　　loading　　boolean　　是否正在從遠端獲取資料 　　　　loading-text　　載入中　　遠端載入時顯示的文字　　 　　　　no-match-text　　無匹配資料　　搜尋條件無匹配時顯示的文字 　　　　no-data-text　　無資料　　選項為空時顯示的文字 　　　　popper-class　　Select 下拉框的類名 　　　　reserve-keyword　　boolean　　多選且可搜尋時，是否在選中一個選項後保留當前的搜尋關鍵詞 　　　　default-first-option　　boolean　　在輸入框按下回車，選擇第一個匹配項。需配合filterable或remote使用 　　　　popper-append-to-body　　boolean　　是否將彈出框插入至 body 元素。在彈出框的定位出現問題時，可將該屬性設定為 false 　　Select Events（事件）： 　　　　change　　選中值發生變化時觸發 　　　　visible-change　　出現則為 true，隱藏則為 false　　下拉框出現/隱藏時觸發 　　　　remove-tag　　多選模式下移除tag時觸發 　　　　clear　　可清空的單選模式下使用者點選清空按鈕時觸發 　　　　blur　　當 input 失去焦點時觸發 　　　　focus　　當 input 獲得焦點時觸發 　　el-option選擇條數，屬性： 　　　　value　　選項的值 　　　　label　　選項的標籤，若不設定則預設與value相同 　　　　disabled　　boolean　　是否禁用該選項 　　Option Group屬性：　　 　　　　label　　分組的組名 　　　　disabled　　是否將該分組下所有選項置為禁用 　　Methods： 　　　　focus　　使 input 獲取焦點 11、Cascader 級聯選擇器 　　el-cascader屬性： 　　　　optios　　array　　可選項資料來源，鍵名可通過props屬性配置 　　　　props　　object　　配置選項，具體見下表 　　　　value　　array　　選中項繫結值 　　　　separator　　預設/　　選項分隔符 　　　　popper-class　　自定義浮層類名 　　　　placeholder　　輸入框佔位文字 　　　　disabled　　boolean　　是否禁用 　　　　clearable　　boolean　　是否支援清空選項 　　　　expand-trigger　　click / hover　　次級選單的展開方式 　　　　show-all-levels　　boolean　　輸入框中是否顯示選中值的完整路徑 　　　　filterable　　boolean　　是否可搜尋選項 　　　　debounce　　number預設300　　搜尋關鍵詞輸入的去抖延遲，毫秒 　　　　change-on-select　　boolean　　是否允許選擇任意一級的選項 　　　　size　　medium / small / mini　　尺寸 　　　　before-filter　　function(value)　　篩選之前的鉤子，引數為輸入的值，若返回 false 或者返回 Promise 且被 reject，則停止篩選 　　props屬性： 　　　　value　　指定選項的值為選項物件的某個屬性值 　　　　label　　指定選項標籤為選項物件的某個屬性值 　　　　children　　指定選項的子選項為選項物件的某個屬性值 　　　　disabled　　指定選項的禁用為選項物件的某個屬性值 　　Events事件： 　　　　change　　當繫結值變化時觸發的事件 　　　　active-item-change　　當父級選項變化時觸發的事件，僅在change-on-select為false時可用 　　　　blur　　在 Cascader 失去焦點時觸發 　　　　focus　　在 Cascader 獲得焦點時觸發 12、switch開關 　　el-switch屬性： 　　　　disabled　　boolean　　是否禁用 　　　　width　　number預設40　　switch 的寬度（畫素） 　　　　active-icon-class　　switch 開啟時所顯示圖示的類名，設定此項會忽略active-text
　　　　inactive-icon-class　　switch 關閉時所顯示圖示的類名，設定此項會忽略inactive-text 　　　　active-text　　switch 開啟時的文字描述 　　　　inactive-text　　switch 關閉時的文字描述 　　　　active-value　　boolean / string / number　　switch 開啟時的值 　　　　inactive-value　　boolean / string / number　　switch 關閉時的值 　　　　active-color　　switch 開啟時的背景色 　　　　inactive-color　　switch 關閉時的背景色 　　　　name　　switch 對應的 name 屬性 　　Events事件： 　　　　change　　switch 狀態發生變化時的回撥函式 　　Methods方法： 　　　　focus　　使 Switch 獲取焦點 13、slider滑塊 　　可以用v-model繫結一個數組，顯示範圍，例：【4，8】 　　el-slider屬性： 　　　　min　　最小值 　　　　max　　最大值 　　　　disabled　　boolean　　是否禁用 　　　　step　　number預設1　　步長 　　　　show-input　　boolean　　是否顯示輸入框，僅在非範圍選擇時有效 　　　　show-input-controls　　boolean　　在顯示輸入框的情況下，是否顯示輸入框的控制按鈕 　　　　input-size　　large / medium / small / mini　　輸入框的尺寸 　　　　show-stops　　boolean　　是否顯示間斷點 　　　　show-tooltip　　boolean　　是否顯示 tooltip 　　　　format-tooltip　　function(value)　　格式化 tooltip message 　　　　range　　boolean　　是否為範圍選擇 　　　　vertical　　boolean　　是否豎向模式 　　　　height　　Slider 高度，豎向模式時必填 　　　　label　　螢幕閱讀器標籤 　　　　debounce　　number預設300　　輸入時的去抖延遲，毫秒，僅在show-input等於true時有效 　　　　tooltip-class　　tooltip 的自定義類名 　　Events事件： 　　　　change　　值改變時觸發（使用滑鼠拖曳時，只在鬆開滑鼠後觸發） 14、TimePicker 時間選擇器
　　el-time-select屬性： 　　　　readonly　　boolean　　完全只讀 　　　　disabled　　boolean　　禁用 　　　　editable　　boolean　　文字框可輸入 　　　　clearable　　boolean　　是否顯示清除按鈕 　　　　size　　medium / small / mini　　輸入框尺寸 　　　　placeholder　　非範圍選擇時的佔位內容 　　　　start-placeholder　　範圍選擇時開始日期的佔位內容 　　　　end-placeholder　　範圍選擇時開始日期的佔位內容 　　　　is-range　　boolean　　是否為時間範圍選擇，僅對<el-time-picker>有效 　　　　arrow-control　　boolean　　是否使用箭頭進行時間選擇，僅對<el-time-picker>有效 　　　　value　　date(TimePicker) / string(TimeSelect)　　繫結值　　 　　　　align　　left / center / right　　對齊方式 　　　　popper-class　　TimePicker 下拉框的類名 　　　　picker-options　　object　　當前時間日期選擇器特有的選項參考下表 　　　　range-separator　　選擇範圍時的分隔符 　　　　value-format　　可選，僅TimePicker時可用，繫結值的格式。不指定則繫結值為 Date 物件 　　　　default-value　　可被new Date()解析(TimePicker) / 可選值(TimeSelect)　　可選，選擇器開啟時預設顯示的時間 　　　　name　　原生屬性 　　　　prefix-icon　　自定義頭部圖示的類名 　　　　clear-icon　　自定義清空圖示的類名 　　Time Select Options屬性： 　　　　start　　開始時間 　　　　end　　結束時間 　　　　step　　間隔時間 　　　　minTime　　最小時間，小於該時間的時間段將被禁用 　　　　maxTime　　最大時間，大於該時間的時間段將被禁用 　　Time Picker Options屬性： 　　　　selectableRange　　可選時間段，例如'18:30:00 - 20:30:00'或者傳入陣列['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] 　　　　format　　小時：HH，分：mm，秒：ss，AM/PMA　　時間格式化(TimePicker) 　　Events事件： 　　　　change　　使用者確認選定的值時觸發 　　　　blur　　當 input 失去焦點時觸發 　　　　focus　　當 input 獲得焦點時觸發 　　Methods方法： 　　　　focus　　使 input 獲取焦點