Element 如何按需引入组件，如何处理报错，Error: Cannot find module ‘babel-preset-es2015‘

Element 如何按需引入组件，如何处理报错，Error: Cannot find module ‘babel-preset-es2015‘

根据官方说明按需引入组件的配置后，出错

其实不需要 .babelrc 这个文件，Vue 新起的项目中已经有同作用的文件 babel.config.js，只需要在这里面添加对应的配置即可，也不需要 es2015

babel.config.js 中添加如下内容

官方说明：https://element.eleme.cn/#/zh-CN/component/quickstart

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后在 main.js 文件中添加对应的组件引用即可

// element ui
import { Button, Menu, Submenu, MenuItem, Form, FormItem, Input,  Container, Aside, Main} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);
Vue.use(Container);
Vue.use(Aside);
Vue.use(Main);

对于 $message 这种方法，需要如下引入

import { Message } from 'element-ui'
Vue.prototype.$message = Message

按需引入组件的前后 build 后的文件大小对比