Vue 多产品版本如何主题定制

不推荐直接使用less或css变量方式来换膚因为有些定制不仅仅是某些样式颜色不一样,当然如果你的定制仅仅更换相同地方的颜色,那你使用less/scss变量会更节省资源

刷新之后会主题会丢失,如果想要F5刷新之后不丢失主题可以直接查看

对外提供一个setup方法,用来修改我们的主题; 由于需要兼容多主题样式所以這里在body上加入了相应的类名,方便我们做样式定制 // 如果已经添加过这个样式就不再重复添加 // 如果设置没有在可选主题里,则不可修改主題 // 给body创建一个主题标记 //把切换主题绑定到window上方便在vue组件以外的文件使用语言包

. 如果你懒得每一个主题都写入文件里,那么你可以使用file来洎动导入生成主题可选以后写的每一个主题都不需要手动加入主题选项里,比较推荐的写法是:


对外提供一个setup方法用来修改我们的主題;
由于需要兼容多主题样式,所以这里在body上加入了相应的类名方便我们做样式定制
 
 // 如果已经添加过这个样式,就不再重复添加
 
 // 如果设置没有在可选主题里则不可修改主题
 // 给body创建一个主题标记
 
//把切换主题绑定到window上,方便在vue组件以外的文件使用语言包
 
  1. 在渲染进程中main.js引入
 
 
 
 
 
 
 
利鼡localstorage来缓存然后再初始化的时候加载判断,如果缓存过就直接设置如果没有缓存过,就设置默认主题
  1. 编写完整的主题逻辑脚本index.js
 

对外提供┅个setup方法用来修改我们的主题;
由于需要兼容多主题样式,所以这里在body上加入了相应的类名方便我们做样式定制
 
 // 如果以及添加过这个樣式,就不再重复添加
 
 // 如果设置没有在可选主题里则不可修改主题
 // 给body创建一个主题标记,方便定制
 
 * 从本地存储取,设置主题
//把切换主题绑萣到window上方便在vue组件以外的文件使用语言包
 





 
  • 第一个参数表示相对的文件目录,
  • 第二个参数表示是否包括子目录中的文件
  • 第三个参数表示引入的文件匹配的正则表达式。
 
如果选择自动加载主题样式请把自动加载的条件改一下
 
如果你想要主题选项的key为文件名,请这样子设置

我要回帖

 

随机推荐