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、修改


vue基于element-ui如何自定义主题?_第1张图片
生成element-variables.scss

vue基于element-ui如何自定义主题?_第2张图片
修改element-variables.scss

4、生成新的主题样式包

et
vue基于element-ui如何自定义主题?_第3张图片
主题编译成功

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


vue基于element-ui如何自定义主题?_第4张图片
修改main.js

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

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

你可能感兴趣的:(vue基于element-ui如何自定义主题?)