vuecli3 element按需加载按需引入(包括样式)

自从项目进行前后端分离之后，大部分时间都是在用weui(we-vue组件库)的css样式做公众号等前端网页开发。

近期公司准备为统一用户项目做一个管理控制台，我就准备使用Vue + element-ui做框架进行开发，具体选型好处就不再详细说明了，这里简单说一下使用vue-cli 3脚手架新建的项目按需引入element-ui的步骤流程及中间我遇到的问题。

一、按需引入步骤

首先我们按照官网进行install安装操作：
1.安装element-ui

npm i element-ui -S

2.安装按需引入必要插件

npm install babel-plugin-component -D

3.修改babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    // element官方教程
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

4.在main.js中按需引入你要用到的组件，比如Button按钮

import { Button } from "element-ui";
Vue.use(Button);

5.示例：在.vue文件下新增

主要按钮

6. 运行查看引入效果

npm run serve

二、开发过程中遇到的问题

3.然后，将 .babelrc 修改为：
.babelrc ？？？哪儿呢？项目中没有啊。难道让我新建？
新建.babelrc文件然后按照官网进行ctrlc+ctrlv。完美！
4.在 main.js 中引入你要用到的组件，例如Button

import { Button } from 'element-ui';
Vue.use(Button);

5.引入成功了，那么我们开始使用吧：在components下的HelloWorld.vue中添加代码测试

6.npm run serve报错了？

没有babel-preset-es2015 ？
你好，babel-preset-env，再见，babel-preset-2015
不安装babel-preset-es2015，安装babel-preset-env

npm install babel-preset-env@next --save

然后.babelrc 修改为

{
    "presets": [["env", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }

重新npm run serve

结果发现，组件进来了,但是样式呢？被你吃了？

无奈，但是没有什么能难到我，山人自有妙计

点开第一个：
// css样式还是需要全部引入 ？？？
要不起，不过将按需引入的代码分割成单独文件的意见还是不错的，不过我的需求是不希望main.js太长。

接着下一个、下一个、下一个…
怎么都说需要单独引入全部css样式？Are you kindding me?
嗯，一定是我打开方式不对

说好的优雅呢？怎么还需要单独引入css样式？
思考：vuecli 3 我把相关配置写到babel.config.js行不行？
删除.babelrc，修改babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    // element官方教程
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

奈何本人没文化…竟然可以了！！！
我走过最远的路恐怕就是你的套路。