vue2.0按需引入element-ui后组件不生效

公司用的还是vue2，发现element-ui是全局配置，于是自己搭个架子写写demo啥的，安装的vue版本是2.6.11，按照element-ui的官网提示使用按需引入组件，结果组件不生效，于是记录下，希望也能帮到你。

1.项目使用vue-create-app创建的，生成的代码里有babel.config.js文件，没有element-ui提到的.babelrc文件，不着急，只需要添加plugins即可，["es2015", { "modules": false }]这部分没添加：

WechatIMG68.png

2.我在src目录新建js文件：src/element/index.js，copy的官网的代码【组件不生效的做法】

import Vue from 'vue';
import {
  Pagination,
  Dialog
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;

3.在main.js中引入

import '@/element/index'

4.在组件中测试能否使用了,但是控制台警告提示el-button没有注册为组件，而且按钮确实没显示出来

<el-button type='primary' @click="handleClick">test</el-button>

5.经过查询，修改步骤2的代码为：

import {
  Pagination,
  Dialog
} from 'element-ui';
const element = {
    install: function (Vue) {
        Vue.use(Pagination);
        Vue.use(Dialog);
        ...
        Vue.prototype.$loading = Loading.service;
        Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
    }
};
export default element

6.在main.js中引入,ok,组件生效了

import element from '@/element';
Vue.use(element);