element-ui引入方式、自定义主题

Posted 2023-02-22

参考技术A 在 main.js 中写入以下内容：

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

然后，将 .babelrc 修改为：

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

新建一个样式文件，例如 element-variables.scss ，写入以下内容：

之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：

如上是全局安装可以在命令行里通过 et 调用工具，如果安装在当前目录下，需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss ，当然你可以传参数指定文件输出目录。

直接编辑 element-variables.scss 文件，例如修改主题色为红色。

ps: 注意不要手动修改 ./theme 下的 *.css 文件样式，因为et命令编译输出会覆盖
可以再package.json script字段增加命令： "build_theme": "node_modules/.bin/et -o ./themes"
运行: npm run build_theme
如果以上工具全局安装了，运行: