vue简单实现随机换肤

第一次写文章，加油！

1.webpack中配置style-loader

我用的是vue-cli3.0脚手架搭建的vue工程，在vue.config.js文件中进行对style-loader做了的一些配置

chainWebpack: config => {
	... // 省略其他配置
  config.module
    .rule("stylus")
    .oneOf("vue")
    .use("vue-style-loader")
    .loader("style-loader")
    .options({
      attributes: {
        shinMark: true
      }
    });
}

这段配置主要是让vue组件内部的css样式通过style标签的方式加载到head标签中，然后在style标签上设置一个属性shinMark（这个属性可以任意设置，只是为了标记一下这个style节点,后面可以精确获取到该节点）

2.全局混入beforeMount函数

在全局混入的配置中进行颜色替换

beforeMount() {
  const styles = document.querySelectorAll('style[shinMark=true]');
  styles.forEach((item, index) => {
    item.innerHTML = item.innerHTML.replace(/#7C0777/ig, themeColor);
    item.setAttribute('shinMark', false);
  });
}

#7C0777这个是当前主题色， themeColor是即将要替换的主题色

3.优点

• 可以随机换颜色
• 代码量少，效果显著
• 对老项目后期迭代需求时，要求加上换肤功能，比较适用

4.缺点

• 组件内css不能打包成css文件
• 有些和主题色一样的颜色会被替换，主题色建议用rgb格式

5.总结

因为项目代码量较大，改动较大，所以通过这种方案去实现，效果还是很好的，目前没出现什么问题，如有说的不对的地方，欢迎指正，第一次写文章，加油！