vue实现换主题\皮肤功能

前端

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

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

  1. 实现思路

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

  2. 优化策略

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

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




   iView admin

接下来就是具体实现换皮肤功能了，换皮肤一般都是点击一个按钮弹出一些皮肤的选项，选中选项后皮肤生效。
我们将换皮肤功能抽成一个组件theme-switch。pc端使用iview，手机端使用了vant。一共有3套皮肤用于切换。
目录结构

  • pc端
  • 手机端

在首页引用该组件，初次渲染时进入该组件的creat方法，如果用户之前选择过皮肤则直接使用之前选择的，否则使用默认皮肤。在store中加入相应方法。

changeMenuTheme (state, theme) {
    state.menuTheme = theme;
},
changeMainTheme (state, mainTheme) {
     state.themeColor = mainTheme;
 }

动态切换最关键的是这两行代码：
let themeLink = document.querySelector('link[name="theme"]')
themeLink.setAttribute('href', stylesheetPath)
但是这个时候我们皮肤相关的css并没有打到代码中，需要我们额外进行配置。
在webpack的配置文件中找到plugins，加入以下插件：

  • pc端
 new CopyWebpackPlugin([
            {
                from: 'td_icon.ico'
            },
            {
                from: 'src/styles/fonts',
                to: 'fonts'
            },
            {
                from: 'src/views/main-components/theme-switch/theme'
            }
        ],
  • 手机端
 new CopyWebpackPlugin([
            {
                from: 'static',
                to: 'static'
            },
            {
                from: 'src/view/component/theme-switch/theme',
                to: './css'
            }
        ])

之前我们可能已经有了这个插件了，现在只是需要把皮肤相关的css额外配置一下。以上工作完成之后已经可以动态的切换html中皮肤相关的css路径了。接下来就需要我们在需要切换css的地方引用具体的class并且写三套样式分别放在theme中的css文件里。

注意在具体的vue文件中不需要引用theme中的css，因为html中已经帮我们引用了

如果报各种与路径有关的错误那就是你的路径真的写错啦。好好对比一下组件中引用的路径，webpack中配置的路径和你的项目路径吧~

当然这只是换皮肤的一种实现思路，也就是动态切换html中的引用路径。也希望大家集思广益提供更多的解决思路~