按需引入ElementUI组件

一、按需引入ElementUI组件

有时候项目中只用到ElementUI中的几个组件，全局引入会增加项目体积，所以按需引入更合适

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

（1）首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

（2）然后，将 .babelrc 修改为：

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

（3）安装element-ui

 npm i element-ui

（4）在一个项目中为了方便管理，直接用在utils文件夹新建一个elementui.js文件，专门按需引入组件并注册。

比如elementui.js

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

Vue.use(Button);
Vue.use(Select);

（5）并且要在main.js入口文件，去引入这个elementui.js文件，

import "./utils/elementui"

遇到的问题总结

（1）npm run serve时出现了报错：
Error: Cannot find module ‘babel-preset-es2015’ from’E:\qianduan\qianduan\vue.js\project\juejin’

解决方法：

1.安装@babel/preset-env；项目目录下，运行命令行
2.修改.babelrc文件，把es2015改成@babel/preset-env

（2）These dependencies were not found:

• element-ui/lib/button in ./src/utils/elementui.js

• element-ui/lib/select in ./src/utils/elementui.js

• element-ui/lib/theme-chalk/base.css in ./src/utils/elementui.js

• element-ui/lib/theme-chalk/button.css in ./src/utils/elementui.js

• element-ui/lib/theme-chalk/select.css in ./src/utils/elementui.js

   安装npm i element-ui就可以。