vue vue-cli 应用实现换肤功能主题切换_DemaxiyaNuoke的博客-程序员秘密

技术标签： vue-cli vue vue主题

业务需求：根据不同的"标识" 加载应用时自动更换主题

需要的东西：vue-cli 全家桶主要（vuex,vue-router），less ，webpack，两套同样目录结构的主题静态资源(css,图片)

最终效果

主题1：

主题2：

具体实现：

一、把所需要改变主题的vue组件中的style全部提出来按照目录结构提取到static中，用less内联写法防止样式冲突。

可以看到有001和002两个文件夹（两套主题），那就是可以随意改写样式less，每个主题还都有一个img文件夹，作为替换项目中的图片。

二、现在项目中是没有样式的了，需要利用vue的一个混合功能mixin来实现，利用require去动态的给每个需要的组件渲染css和img

1）利用接口和本地缓存先判断一下现在应该加载那一套主题。

2）然后写2个获取less和img的方法，temlates是vuex的一个state

3）在vue组件中，动态的获取

以上开发环境就ok了，现在解决生产模式的问题:

一、webpack run build以后会把001，002的less打包成一个大的css，会造成样式冲突，我们要在webpack的webpack.prod.conf.js中设置一下，把extract改成false即可，会发现那个css文件从几百k，变成几十k，样式就不会冲突了。

二、如果采用通过url来获取标识的，会出现刷新和分享后，链接失效的问题，那么就还需要一步，利用vuerouter的守卫方法，每次切换页面的时候，把标识当做参数带上。

三、当页面带有参数的时候，底部采用router-link-exact-active和router-link-active 都会出问题，

exact无法精准匹配路由， routerlinkactive会重复出现因为，子页面的路由为"/"被匹配到了，解决方式为，修改子页面的默认页面为重定向。

至此已全部完成了

本文链接：https://blog.csdn.net/qq_35319282/article/details/79483931

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

ssh框架的结构_ssh框架是b/s架构吗_lilei0015的博客-程序员秘密

一個spring2.5+hibernate3.2+struts2.0的組合框架，使用spring的IoC來管理應用的所有bean，包括struts2的action，充分發揮了spring輕量級框架的優勢。 Java代码 "1.0" encoding="utf-8"?> "WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2e

ubuntu18.04安装cuda和cudnn（资源快速下载）_白小心的博客-程序员秘密

ubuntu18.04安装cuda和cudnn交大网盘下载安装方法交大网盘下载nvidia官网最近下载速度几十Kb/s，太难了。使用交大云盘能达到5-10Mb/scuda10.2 + cudnnv7.6.5 (ubuntu18.04_x86_64)下载：wget -c -O cuda10.2-cudnn7.6.4-ubuntu1804_x86_64.zip https://jbox.sjtu.edu.cn:10081/v2/delivery/data/6910ab8ab001466a87730f0

金蝶显示加密服务器未正常启动是什么情况,金蝶云平台加密服务器未启动_扒婆的博客-程序员秘密

金蝶云平台加密服务器未启动内容精选换一换外部镜像文件在从原平台导出前，没有按照“Windows操作系统的镜像文件限制”的要求完成初始化操作，推荐您使用弹性云服务器完成相关配置。流程如图1所示。云服务器的正常运行依赖于XEN Guest OS driver(PV driver)和KVM Guest OS driver(UVP VMTools)，未安装会对云服务器运行时的性能产生影外部镜像文件在从原...

软件测试——构造等价类测试用例_Dic0k的博客-程序员秘密

软件测试——构造等价类测试用例16340132 梁颖霖软件工程（计算机应用方向）问题构造下述三角形问题的弱健壮的等价类测试用例。三角形问题：输入三个不超过100的正整数作为三角形的三条边，判断三角形是等边三角形、等腰不等边三角形、完全不等边三角形还是不能构成三角形。解答弱健壮等价类测试用例覆盖——针对单缺陷，覆盖有效等价类和无效等价类根据题目意思，我们可以划分成以下四个等价类表示...

kinetics-skeleton格式行为数据提取方法_utils.openpose.json_pack_青年夏日科技工作者的博客-程序员秘密

之后就是把提取得到的骨骼点数据的json文件做一下整理，按照上面图中的kinetics-skeleton数据集的格式。主要需要注意的是，记得修改读取的行为类别的标签文件名，以及修改对应的yaml配置文件中模型名称和类别数量等参数。这一步主要的目的是把自己的视频数据集创建成kinetics-skeleton数据集一样的格式，格式大致如下图。首先就是按照类别，把自己的视频分门别类，放在不同的文件夹下，然后主要通过两个脚本来提取数据。这一部分可以参考如下所示的博文中的第三------第六部分。

【VMvare】无法将 Ethernet0 连接到虚拟网络"VMnet8" ，无法上网，解决方案_不能打开vment8_莫问当年事的博客-程序员秘密

本人VMvare安装的是绿色版，卸载后重装，然后虚拟机不能上网，出现的这个提示！1.打开VMvare—编辑—虚拟网络编辑器，查看VMnet8是否启用或空白！2.选择还原默认设置，重启虚拟机，End如果还是不能上网请查看服务是否开户1.开始（Win键+R）— 输入 services.msc — 回车，2.查看里面VM开头的所有服务，如果是“禁用”，右键—属性—启动类型“自动”—确定...