vue mianjs 引用css_vue实战-换皮肤

现在的app和pc网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就需要一个换皮肤的功能了。

那么我们怎么在vue中实现这个换皮肤的功能呢？

项目结构

1. 实现思路

• 我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个html以及一堆静态文件(js、css、img之类)。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css，所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径，使得当用户选择了不同的皮肤，页面引用的css不同从而呈现的样式也不一样。

1. 优化策略

• 其实在实际场景中，需要通过切换皮肤来改变css的元素占所有css的比重并不会很多，因此我们需要把需要通过切换改变的css单独提取出来，在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
• 把皮肤相关的css压缩。

1. 实现代码分析
2. 如下是我们的html代码，注意其中的，其他的都是正常引用。

 iView admin

接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。

我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview，手机端使用了vant。一共有3套皮肤用于切换。

目录结构

• pc端

• 手机端

换皮肤