【黄啊码】ElementUI按需引入及相关错误解决

默认写法，在 main.js 中写入以下内容：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

但在加载的时候chunk-vendor.js比较大

所以我们考虑使用按需引入

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

在main.js中写法如下：

import { Button, Select } from 'element-ui';

Vue.component(自定义名字, Button); //elementUI是ele-button

Vue.component(自定义名字, Select);

来到这里项目应该能够正常运行，但还是报如下错误：Plugin/Preset files are not allowed to expoerts,only functions.In...babel-preset-es2015\.....

这是因为脚手架和UI版本不一致，可以用以下方法解决即可：

将 "presets": [["es2015", { "modules": false }]]改成

"presets": [["@babel/preset-env", { "modules": false }]]