关于elementui自定义主题有多种办法,这里我只举例一种,就是下载文件的方式。因为公司的产品都是一种色调,也方便在以后的工作当中进行复用。
1——首先找到官网的自定义主题部分
![](https://img-blog.csdnimg.cn/img_convert/327f262aa6fa6da46037f4b66e521044.png)
2——鼠标悬停此处点击查看按钮
![](https://img-blog.csdnimg.cn/img_convert/cc8f94a61692e7a06230b932da908944.png)
3——右侧红框内就是自己自定义的颜色变量类名,自己照着设计稿吸颜色就好了,左侧黄框则是预览效果,第二张则是更为直观的各个组件的预览
![](https://img-blog.csdnimg.cn/img_convert/accf07c43b7d4a3bee57c3d024b5f174.png)
![](https://img-blog.csdnimg.cn/img_convert/6250e382854208efd2df31391326b1f5.png)
4——都设置好之后,就可以点击下载文件
![](https://img-blog.csdnimg.cn/img_convert/a1978248563aea0bc042279fa85afb55.png)
![](https://img-blog.csdnimg.cn/img_convert/3500a91faac81bcd4ec167863d51dcaf.png)
5——解压好压缩包之后,将会拿到theme和config两个文件,再将拿到的文件放到项目的根目录下
![](https://img-blog.csdnimg.cn/img_convert/ed2977c0af4ff7c78859149645fcaeba.png)
![](https://img-blog.csdnimg.cn/img_convert/641e023b0716e83aeaa9fdd58104dac7.png)
6——在项目的main.js入口文件当中引入就可以使用了
![](https://img-blog.csdnimg.cn/img_convert/f0cfcdce487caae6e336a488fe74743c.png)
这样一来,以后公司的每一个项目的色调只要是一样的。就可以重复引入这个文件进行复用。