element.ui官网文档给出的按需引入组件的说明，属于是在main.js中为Vue注册全局组件的方式，
某页面即使不使用某组件也会在打包代码中包含它，如果希望某个组件仅仅在单独页面里按需引入，则可以使用本文方法。

官方方法

官方方法分两步：
（1）安装babel-plugin-component，修改“.babelrc”文件内容；（经验证此步骤不再需要，环境：webpack-4.18.0、vue-2.5.17，由于webpack2之后import原生支持ES6所以未使用babel）
（2）在 main.js 中单独import组件并注册为全局组件，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/****************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)
});

真正按需引入的方法

思路就是把引用和注册组件的操作转在vue页面内进行，以局部注册Button为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/****************onePage.vue******************/
<template>
    <div class="container">
        <el-button>默认按钮</el-button>
    </div>
</template>

<script type="text/ecmascript-6">
    import { Button } from 'element-ui';
    export default{
        data(){
            return {
                //balaba
            };
        },
        components:{
            ElButton: Button
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

注意components那里不要简写成“Button”，因为组件名字是“ElButton”而不是同名的“Button”所以不能简写。
这里的“ElButton”其实就是官网方法中的“Button.name”的值，我是通过调试知道的。
目前用过的组件name都是前面加上“El”前缀，如果某个组件注册失败则需要调试或element-ui源码中查找其真实的name值。
或者使用如下通用但不美观的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/ecmascript-6">
    import { Button } from 'element-ui';
    let exportObj = {
        data(){
            return {
              //balaba
            };
        }
    };
    exportObj.components = {};
    exportObj.components[Button.name] = Button;

    export default exportObj;
</script>