基于element-ui动态换肤的方法

这篇文章主要讲解了"基于element-ui动态换肤的方法"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"基于element-ui动态换肤的方法"吧！

1、在安装好element-ui@2.x 以后，首先安装sass-loader

npm i sass-loader node-sass -D

2、安装element-theme

npm i element-theme -D

3、安装theme-chalk

npm i element-theme-chalk -D# or from githubnpm i https://github.com/ElementUI/theme-chalk -D

4、初始化变量文件

et -i // 默认的文件是element-variables.scss，也可以自定义文件名 et --init [file path]

安装成功以后，在项目里会自动生成一个element-variables.scss 文件，如下图：

里面定义的是所有的颜色变量

当然，这一步也有可能失败，命令行提示找不到et 这个命令。这个时候需要按照步骤一，重新装一下sass-loader

5、修改变量

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

6、编译主题

保存文件后，到命令行里执行 et 编译主题，如果你想启用 watch 模式，实时编译主题，增加 -w 参数；如果你在初始化时指定了自定义变量文件，则需要增加 -c 参数，并带上你的变量文件名

此时，项目中会自动生成一个theme文件夹，里面是编译后所有的字体文件和样式文件

7、引入自定义主题

默认情况下编译的主题目录是放在 ./theme 下，你可以通过 -o 参数指定打包目录。像引入默认主题一样，在代码里直接引用 theme/index.css 文件即可。

import '../theme/index.css'import ElementUI from 'element-ui'import Vue from 'vue'Vue.use(ElementUI)

启动项目，会发现原来默认的蓝色会变成红色

官网提供的这种方法仅适用于一次性的更改全局主题颜色，如果想实现官网2.0版本右上角，使用 ColorPicker 颜色选择器 动态换肤。那么建议参考vue-element-admin，作者的 《手摸手，带你用vue撸后台》系列文章非常精彩

ThemePicker.vue

Navbar.vue

感谢各位的阅读，以上就是"基于element-ui动态换肤的方法"的内容了，经过本文的学习后，相信大家对基于element-ui动态换肤的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！