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'。