element UI官網教程：http://element-cn.eleme.io/#/zh-CN/component/quickstart
1、完整引入,直接了當，但是組件文件不是按需加載，造成多余，不夠優雅
在 main.js 中寫入以下內容：
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(Element);
new Vue({
el: '#app',
render: h => h(App)
});
以上代碼便完成了 Element 的引入。需要注意的是，樣式文件需要單獨引入。
2、按需引入，需要配置babel文件 .babelrc
借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。
首先，安裝 babel-plugin-component：
npm install babel-plugin-component --save-dev
然后，將 .babelrc 修改為：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
此時，vue-cli項目中.babelrc文件長這樣子
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
接下來就要配置了，先來了解下各配置項用途
{
// 此項指明，轉碼的規則
"presets": [
["es2015", {"modules": false }], //需要npm install babel-preset-es2015 --save-dev
// env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設置amd,commonjs這樣的模塊化文件，不進行轉碼
// compiles ES2015+ down to ES5 具體見babel-preset-env官網：https://www.npmjs.com/package/babel-preset-env
["env", { "modules": false }], // 下面這個是不同階段出現的es語法，包含不同的轉碼插件//可參考babel官網
"stage-2"
],
"plugins": [//// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
"transform-runtime",
//需要npm install babel-plugin-component -D//官網：http://element-cn.eleme.io/#/zh-CN/component/quickstart
["component", [{
"libraryName": "element-ui", //按需引用element-ui插件
//"styleLibraryName": "theme-default" //按需引用element-ui主題
}]]
],// 下面指的是在生成的文件中，不產生注釋
"comments": false,// 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
"env": {// test 是提前設置的環境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
"test": {
"presets": ["env", "stage-2"],// instanbul是一個用來測試轉碼后代碼的工具
"plugins": [ "istanbul" ]
}
}
}
OK，到這步已經配完了?
但是你會發現在npm install babel-preset-es2015 時，你會發現有如下的 Deprecated警告：
deprecate babel-preset-es2015@* ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! √ All packages installed (1 packages installed from npm registry, used 44s, spe ed 1.84kB/s, json 25(80.05kB), tarball 0B)
原因是Babel 的官網上在2017年9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 時代的 presets 通通被廢棄（deprecated），取而代之的是 babel-preset-env，並且承諾它將成為“未來不會過時的（future-proof）”解決方案。
在過去，Babel 將 babel-preset-es2015 放在 babel/babel 的主倉庫中進行維護，而 babel-preset-env 則 獨立為一級項目，這從某種程度上也顯示出 Babel 官方對這款 preset 的重視程度和更長遠的規划。
如何遷移
首先卸載原來的 preset，然后安裝 babel-preset-env：
npm uninstall --save-dev babel-preset-es2015 npm install --save-dev babel-preset-env@next
接下來將你的 .babelrc 文件中“es2015”修改“env”：
{
"presets": [ "env" ],
...
}
好了，恭喜你，就這么簡單，你已經可以與 ES2015+ 保持更新了！
vue-cli腳手架環境中，已經采用了最新的babel-preset-env，所以可以忽略 "presets": [["es2015", { "modules": false }]] es2015 這項
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
// ["es2015", { "modules": false }], //需要先cnpm install babel-preset-es2015 --save-dev ,下載es5的babel轉碼插件，些處是多余，已配置env
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"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)
});
全局配置
在引入 Element 時，可以傳入一個全局配置對象。該對象目前僅支持 size 字段，用於改變組件的默認尺寸。按照引入 Element 的方式，具體操作如下：
完整引入 Element：
import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small' });
按需引入 Element：
import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small' };
Vue.use(Button);
按照以上設置，項目中所有擁有 size 屬性的組件的默認尺寸均為 'small'。