Element-UI按需引用组件和样式

Laravel+VUE+Element

写得比较简单，请配合官方文档和相关链接文章来看

1.自定义主题色
因为Laravel框架使用的就是SCSS编译器，与Element一致，所以我们采用修改SCSS变量的方式来修改主题色，然后再引用即可。具体看文档即可。

2.按需引入组件

安装组件：npm install babel-plugin-component -D，编译后报错Error: Cannot find module 'babel-preset-es2015' from '/Users/duchenjian/code/xxxx’

安装 ES2015: npm install babel-preset-env --save-dev，这里我们安装最新的env插件，查看配置差异参考链接：

https://babeljs.io/docs/en/env/

https://www.jianshu.com/p/000c2670672b

.babelrc文件修改部分："presets": [["@babel/preset-env", { "modules": false }]],

坑点：

"component",

        {

          "libraryName": "element-ui",

          "styleLibraryName": "theme-chalk"

        }

注意配置这里最后一行的"styleLibraryName": "theme-chalk"后面不要再加英文逗号了，如果不小心顺手也加了，编译会出现报错：This is probably not a problem with npm. There is likely additional logging output above。具体原因不清楚，可能是babel的语法问题吧，没有深究。

我这边项目测试在完全不引入Element组件及样式的情况下，编译后的app.js大小是2.8M，如果全部引入组件，则会增加1.7M，再加上引入全部样式，总大小会达到5M以上；

app.js文件修改如下：

import { DatePicker } from 'element-ui';

import '../sass/element-variables.scss' // 引入自定义主题

Vue.use(DatePicker);

通过babel-plugin组件按需引入单个组件，编译后大小增加了0.45M

但是如果引入全部主题样式，又会增加1.28M，那么如何按需引入样式？参考以下文章：

https://segmentfault.com/a/1190000014510062

修改element-variables.scss文件如下：

/*按需引入用到的组件的scss文件和基础scss文件*/

@import "~element-ui/packages/theme-chalk/src/date-picker.scss";