vue+webpack 更换主题N种方案优劣分析(2)

方式 动态切换 动态色值 支持变量 实现复杂度 兼容性 性能 维护性
class切换方式   是   否   是   简单   良好   良好    
ElementUI的实现   是   是   是   中等   良好   一般    
编译时多主题全量构建   是   否   是   复杂   良好   一般    
编译时选择性构建   否   否   是   中等   良好   良好    
less变量   是   是   否   复杂   良好   差    
css变量   是   是   是   中等   差   良好    
import动态加载   是   否   否   简单   良好   良好    

注:

动态切换:是否支持在运行时切换皮肤

动态设置:是否支持在运行时动态设置皮肤颜色

支持变量:是否可以再全局定义变量 less 文件,然后在不同的页面引用 less,依赖其中的变量,还是需要在全局 less 文件里面定义全局 class

实现复杂度: 需要修改的代码量包括构建工具和业务代码

兼容性: 主流浏览器支持程度

性能:包括代码的首屏加载的 size、切换的速度、切换的时候会不会有闪动

参考资料:


https://developer.mozilla.org/zh-CN/docs/Web/CSS/Alternative_style_sheets
https://less.bootcss.com

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9f56200da8f676c223f4a609a11d30b0.html