Element UI 按需引入

省流版：

第一步：需要先下载必须的包

npm install babel-plugin-component -D

 第二步：修改babel.config.js为

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

第三步：在main,js中按需引入的需要的组件

第四步：npm run dev

==================================================================================================================================================

非省流版：（这一天天的，烦死了）

当你需要按需引入Element UI,自己照着官方文档按部就班操作时，你会惊人的发现：

找不到.babelrc这个文件

在自己安装完babel-plugin-component插件后，并没有在自己的项目中找到.babelrc这个文件

发生什么？？？哪里来的.babelrc文件，懵逼+1

遇事不要慌？肯定是有办法解决的啦

解决方法：

这个.babelrc文件其实就是项目中的babel.config.js

打开.babelrc之后看到的是这样的
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
    ],
 
}

需要将官方文档中的配置迁移过来，然后就变成了这样：

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

 然后当你满心欢喜使用npm run dev运行项目时，就又发现

      Error: Cannot find module 'babel-preset-es2015'

        这到底是怎么一回事呀？太抽象了吧

        到这里了，不要慌，这其实是因为webpack版本的问题，最新版本的就会是这样，只需要‘es2015’改为‘@babel/preset-env‘即可，像下面这样：

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