官方文檔：Element
1. 安裝
可以使用 npm 安裝，也可以通過 CDN 引入锐秦。
npm install element-ui --save
// 帶上版本號
npm install --save element-ui@版本號
<!-- CDN 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 引入 Element
完整引入
在 main.js 中寫入以下內容：
import Vue from 'vue';
import ElementUI from 'element-ui'; // 引入ui庫
import 'element-ui/lib/theme-chalk/index.css'; // 引入css
import App from './App.vue';
Vue.use(ElementUI); // 啟用element-ui
new Vue({
el: '#app',
render: h => h(App)
});
以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨引入享钞。
按需引入
借助 babel-plugin-component，我們可以只引入需要的組件触幼，以達到減小項目體積的目的诗芜。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component -D
然后刺啦，將 .babelrc 修改為：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下來留特，如果你只希望引入部分組件，比如 Button 和 Select玛瘸，那么需要在 main.js 中寫入以下內容：
import Vue from 'vue';
import { Button, Select } from 'element-ui'; // 將需要的組件引入
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫為
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
3. 開始使用
element-ui 中有許多簡潔美觀的組件蜕青，可以再左側欄中選擇自己想要的組件，然后在里面選擇想使用的樣式糊渊，并在下面的代碼中查看如何使用右核，以 Button 按鈕為例。
<el-row>
<el-button>默認按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="info">信息按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險按鈕</el-button>
</el-row>
將文檔給出的范例使用進自己的項目中渺绒，組件會自己在頁面中顯示出這幾個按鈕贺喝。
那么想要點擊按鈕彈出提示該怎么辦呢？在左側目錄中找到 notice 一欄宗兼，以消息提示為例躏鱼。
<template>
<el-button :plain="true" @click="open2">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
<el-button :plain="true" @click="open1">消息</el-button>
<el-button :plain="true" @click="open4">錯誤</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$message('這是一條消息提示');
},
open2() {
this.$message({
message: '恭喜你，這是一條成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦殷绍，這是一條警告消息',
type: 'warning'
});
},
open4() {
this.$message.error('錯了哦染苛，這是一條錯誤消息');
}
}
}
</script>
代碼中使用的是 this.$message 的方法，點擊文檔上的按鈕可以看到效果主到。那么很明顯我們可以看出 message 里是彈出消息框中的文本信息茶行。type 是主題躯概，也就是根據(jù)不同的可選值會自己顯示對應的顏色與圖標。
既然知道了里面參數(shù)的用法拢军，我們就可以將里面的內容改成我們想要的效果楞陷，別忘了還要添加上 @click 來觸發(fā)事件。
快速使用
<template>
<el-button type="open">打開</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$message('open...')
}
}
}
</script>
在頁面中點擊 打開 按鈕茉唉，就會有一條消息框彈出固蛾，并且內容是 open... 。
實際上在項目中使用
element-ui 十分便捷度陆，官方文檔十分詳細艾凯，還有范例以及樣式效果方便理解。
4. 補充
4.1 自定義主題
如果在現(xiàn)成的組件中沒有符合心意的界面懂傀，還可以在element-ui中使用自定義主題來制定自己喜歡的畫面趾诗。
安裝在項目里
npm install element-theme --save -dev
npm install element-theme-chalk --save -dev
因為不是全局安裝，不能使用 et 這個命令蹬蚁。那么我們就在node_modules/.bin/ 文件夾下使用這個工具進行初始化恃泪。
node_modules/.bin/et -i
執(zhí)行后當前目錄會有一個 element-variables.scss 文件。內部包含了主題所用到的所有變量犀斋，它們使用 SCSS 的格式定義贝乎。
但是只有scss文件還不夠，需要編譯生成css文件叽粹。
node_modules/.bin/et
直接輸入 et览效，就會將文件編譯生成 theme 主題文件，當前目錄也會出現(xiàn)一個 theme 文件夾虫几。這個文件夾里都是編譯后的文件锤灿，所以要去修改變量的話，就在 element-variables.scss 文件里修改辆脸。
scss的語法可以去文檔里了解一下但校，大致就是通過變量來控制。
然后在進行編譯每强，使用 -w 意思是 watch 監(jiān)聽文件變化自動編譯始腾。
node_modules/.bin/et -w
