本文介绍如何在 Vue 项目中实现换肤功能。核心思路是动态更改 HTML 中引用 CSS 的路径，通过提取并压缩需要换肤的 CSS，结合 webpack 配置实现动态加载。文章详细阐述了实现过程，包括 PC 端和移动端的实现细节，并提供了关键代码示例。
现在的app和pc网站做的越来越花哨，但是有时候用户并不喜欢你给他挑选好的主题颜色，这个时候就需要一个换皮肤的功能了。
那么我们怎么在vue中实现这个换皮肤的功能呢？
-
实现思路
- 我们用vue一般都是写单页面程序，因此在实际发布的时候只有一个html以及一堆静态文件（js、css、img之类）。而在html中引用了这些js和css。我们要换皮肤的话其实就是动态的去切换css，所以在这里实现换皮肤其实也就是动态的更改html中引用css的路径，使得当用户选择了不同的皮肤，页面引用的css不同从而呈现的样式也不一样。
-
优化策略
- 其实在实际场景中，需要通过切换皮肤来改变css的元素占所有css的比重并不会很多，因此我们需要把需要通过切换改变的css单独提取出来，在动态改变css路径时只需要去改变这个控制皮肤的css就可以了。
- 把皮肤相关的css压缩。
-
实现代码分析
如下是我们的html代码，注意其中的<link rel="stylesheet" name="theme" href="">，其他的都是正常引用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>iView admin</title>
<meta charset="UTF-8">
<!-- -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<!-- 引入的css -->
<link rel="stylesheet" href="/dist/main.css">
<!-- 注意这是我们换皮肤需要的css -->
<link rel="stylesheet" name="theme" href="">
<!-- 图标 -->
<link rel="icon" href="./td_icon.ico" type="image/x-icon"/>
</head>
<body>
<div id="app"></div>
<!-- 用到的js -->
<script type="text/javascript" src="/dist/vender-base.js"></script>
<script type="text/javascript" src="/dist/vender-exten.js"></script>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。
我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview，手机端使用了vant。一共有3套皮肤用于切换。
- pc端
<template>
<div style="display:inline-block;padding:0 6px;">
<Dropdown trigger="click" @on-click="setTheme">
<a href="javascript:void(0)">
<Icon :style="{marginTop: '-2px', verticalAlign: 'middle'}" color="#495060" :size="18" type="paintbucket"></Icon>
<Icon type="arrow-down-b"></Icon>
</a>
<DropdownMenu slot="list">
<Dropd
最低0.47元/天 解锁文章
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
