由于我网站不是的单色,换动的样式有点多,所以我只能通过后端传给我的不同的皮肤类型,来控制不同的样式文件

在网上查了一堆,每一个有用的

if(store.getters.infoType==1){
require("./static/styles/skin.css");
}else if(store.getters.infoType==2){
require("./static/styles/skin2.css");
}else if(store.getters.infoType==3){
require("./static/styles/skin3.css");
}
这种方法不成立,本地有效打包之后vue默认会用最后一个的样式,做不到切换

想到以前用jquery操作不同的样式文件,试了下还真的实现了

1,首先在脚手架的index,html文件里面加入一个假的link

<link rel="shortcut icon" href="./static/favicon.ico"/>
2
changeSkin(){
var Link=document.querySelector(".skinLink");
/*通过js获取到这个DOM元素然后给他加不同的样式即可*/
if(this.infoType==1){
Link.setAttribute("href","./static/styles/skin.css");
}else if(this.infoType==2){
Link.setAttribute("href","./static/styles/skin2.css");
}else if(this.infoType==3){
Link.setAttribute("href","./static/styles/skin3.css");
}
}

3由于我是通过vuex做的数据存储,刷新页面数据消失

所以在main.js里面我要再次去做以上请求,不要忘记了否则刷新就什么度没了

vue项目网站换肤的更多相关文章

  1. 基于webpack4+vue-cli3项目的换肤功能

    起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...

  2. vue+ element 动态换肤

    转至 https://www.cnblogs.com/dengqichang/p/10364455.html 一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://elem ...

  3. link rel=alternate网站换肤功能

    此方法借助HTML rel属性的alternate属性值实现. <link href="reset.css" rel="stylesheet" type= ...

  4. react实现网站换肤功能

    一.目标   提供几种主题色给用户选择,然后根据用户的选择改变应用的主题色: 二.实现原理   1.准备不同主题色的样式文件:   2.将用户的选择记录在本地缓存中:   3.每次进入应用时,读取缓存 ...

  5. Android App插件式换肤实现方案

    背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...

  6. jquery.cookie中的操作之与换肤

    jquery.cookie.js的插件,插件的源代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) ...

  7. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  8. Android项目中的换肤总结

    纵观现在各种Android app,其换肤需求可以归为 白天/黑夜主题切换(或者别的名字,通常2套),如同花顺/自选股/天天动听等,UI表现为一个switcher. 多种主题切换,通常为会员特权,如Q ...

  9. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

随机推荐

  1. 创建springboot项目步骤

    步骤:

  2. ERROR Couldn't find hvm kernel for Ubuntu tree.

    安装python-virtinst git clone https://github.com/palli/python-virtinst.gitcd python-virtinstpython set ...

  3. 转载一篇必须超级好的JVM配置实战

    不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java ...

  4. tomcat修改上下文path

    server.xml <Host name="localhost" appBase="webapps" unpackWARs="true&quo ...

  5. 2018面向对象程序设计(Java)第10周学习指导及要求

    2018面向对象程序设计(Java)第10周学习指导及要求(2018.11.1-2018.11.4)  学习目标 理解泛型概念: 掌握泛型类的定义与使用: 掌握泛型方法的声明与使用: 掌握泛型接口的定 ...

  6. K-means算法的实现

    K-MEANS算法是一种经典的聚类算法,在模式识别得到了广泛的应用.算法中有两个关键问题需要考虑:一是如何评价对象的相似性,通常用距离来度量,距离越近越相似:另外一个是如何评价聚类的效果,通常采用误差 ...

  7. 与元素类型 "item" 相关联的 "name" 属性值不能包含 '<' 字符。

    Android Studio 打包时,报错: 与元素类型 "item" 相关联的 "name" 属性值不能包含 '<' 字符. 这个问题自己百度也没有发现 ...

  8. SVN基本页面

  9. BOM 表

    ';--查看BOM创建日期时间 SELECT * FROM SAPSR3.ZSTPO_OUT2011_1@SAP_SEP; SELECT * FROM SAPSR3.ZSTPO_OUT2012_1@S ...

  10. 无线渗透wpa加密路由器

    破解wpa加密路由器的原理不同于破解wep加密路由器,只能通过暴力破解获取. 但是获取握手keystream的原理差不多 首先杀死可能会和破解冲突的进程 airmon-ng check kill 开启 ...