vue基于element-ui如何自定义主题?

element-ui,是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,它的默认主题是蓝色,但是你使用时主题需要是红色系,绿色系该怎么办呢?
别急,只要安装以下操作,即可快速切换成小主你所需要的主题色
1、按顺序下载主题依赖

cnpm i element-ui -S
cnpm i sass-loader node-sass -D
cnpm i element-theme -g
cnpm i element-theme-chalk -D

2、创建主题sass文件,在根目录下创建element-variables.scss

et -i 文件名称 [可以自定义变量文件,默认为element-variables.scss]
创建element-variables.scss

3、修改


生成element-variables.scss

修改element-variables.scss

4、生成新的主题样式包

et
主题编译成功

5、修改main.js,引入新包


修改main.js

6、npm run dev 重新运行查看即可

动动手呀👏,动动脚,一起来学习, 你才不会老🎤

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容