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

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

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. Mysql数据库如何创建用户

    创建test用户,密码是1234. MySQL u root -p CREATE USER 'test'@'localhost'  IDENTIFIED BY '1234'; #本地登录 CREATE ...

  2. python 装饰器、递归原理、模块导入方式

    1.装饰器原理 def f1(arg): print '验证' arg() def func(): print ' #.将被调用函数封装到另外一个函数 func = f1(func) #.对原函数重新 ...

  3. Uni2D 入门 -- Skeletal Animation

    转载 csdn http://blog.csdn.net/kakashi8841/article/details/17615195 Skeletal Animation Uni2D V2.0 引进了一 ...

  4. 线程执行synchronized同步代码块时再次重入该锁过程中抛异常,是否会释放锁

    一个线程执行synchronized同步代码时,再次重入该锁过程中,如果抛出异常,会释放锁吗? 如果锁的计数器为1,抛出异常,会直接释放锁: 那如果锁的计数器为2,抛出异常,会直接释放锁吗? 来简单测 ...

  5. vue 学习笔记1

    1.子组件在父组件的原生的事件例如一个child子组件的点击事件<child @click="handleClick">点击</child>这种情况在父组件 ...

  6. xshell连接不上linux情况一

    设置网络的地址使用桥接方式

  7. 665. Non-decreasing Array

    Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...

  8. 581. Shortest Unsorted Continuous Subarray

      Given an integer array, you need to find one continuous subarray that if you only sort this subarr ...

  9. HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)

    WebSocket 协议两种URL方案 ws 客户端和服务器之间的非加密流量 wss 客户端和服务器之间的加密流量 WebSocket Secure 表示使用传输层安全性(SSL)的WebSocket ...

  10. VM虚拟机 Centos7 lnmp环境 配置域名问题 windows浏览器访问的问题

    CentOS7  ip地址为 192.168.0.155 搭有 LNMP集成环境 执行 lnmp vhost add 配置服务器 指定目录的域名 mark.com 这时windows 机器的 浏览器想 ...