vue项目多模块集成主题切换demo

以下是一个Vue项目多模块集成主题切换的demo，使用了Sass作为CSS预处理器和Element UI作为UI库：

1. 安装Element UI和Sass

npm install element-ui sass sass-loader

2. 创建一个theme.scss文件，定义变量和样式

// 定义主题变量
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$error-color: #F56C6C;
$info-color: #909399;

// 根据变量定义样式
.el-button {
  background-color: $primary-color;
  border-color: $primary-color;

  &:hover,
  &:focus {
    background-color: lighten($primary-color, 10%);
    border-color: lighten($primary-color, 10%);
  }
}

.el-alert {
  background-color: $info-color;
  border-color: $info-color;
}

3. 在main.js文件中添加以下代码，引入Element UI和theme.scss文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './theme.scss';

Vue.use(ElementUI);

4. 创建一个ThemeSwitcher组件，用来切换主题

<template>
  <div>
    <el-radio-group v-model="theme" @change="changeTheme">
      <el-radio-button label="theme-light">浅色主题</el-radio-button>
      <el-radio-button label="theme-dark">深色主题</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'theme-light'
    }
  },
  methods: {
    changeTheme() {
      const oldLink = document.getElementById('theme');
      const newLink = document.createElement('link');
      newLink.id = 'theme';
      newLink.rel = 'stylesheet';
      newLink.href = `/themes/${this.theme}.css`;
      document.head.replaceChild(newLink, oldLink);
    }
  }
}
</script>

5. 创建两个主题样式文件，分别为theme-light.css和theme-dark.css，放在public/themes文件夹下

6. 在App.vue中引入ThemeSwitcher组件，并在页面中使用

<template>
  <div id="app">
    <theme-switcher></theme-switcher>
    <router-view></router-view>
  </div>
</template>

<script>
import ThemeSwitcher from './components/ThemeSwitcher.vue';

export default {
  components: {
    ThemeSwitcher
  }
}
</script>

这样就可以实现多模块集成主题切换了。