vue项目中使用@mixin 与 @include 来做主题的切换demo细节

好的，下面是一个更详细的demo，演示如何使用@mixin和@include来实现Vue项目的主题切换。

首先，在Vue项目中安装Sass或Less等CSS预处理器，并在组件中使用<style lang="scss">或<style lang="less">来编写样式。

然后，我们可以在一个单独的文件中定义主题变量和主题样式的@mixin，例如在一个名为theme.scss的文件中：

// 定义主题1的颜色变量
$theme1-color: #f44336;
$theme1-bg-color: #fff;

// 定义主题2的颜色变量
$theme2-color: #2196f3;
$theme2-bg-color: #eee;

// 定义主题样式的mixin
@mixin theme-style($color, $bg-color) {
  color: $color;
  background-color: $bg-color;
}

接着，在组件中使用@include来引用主题样式的@mixin，并定义其他样式：

<template>
  <div class="my-component">
    ...
  </div>
</template>

<style lang="scss">
@import "theme.scss";

.my-component {
  // 引用主题样式
  @include theme-style($theme1-color, $theme1-bg-color);

  // 定义其他样式
  font-size: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

当需要切换主题时，我们可以在Vue项目的全局样式中修改主题变量的值，例如在App.vue文件中：

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

<style lang="scss">
@import "theme.scss";

// 定义全局样式
body {
  // 初始主题
  $primary-color: $theme1-color;
  $bg-color: $theme1-bg-color;

  // 切换到主题2
  &.theme2 {
    $primary-color: $theme2-color;
    $bg-color: $theme2-bg-color;
  }
}

// 引用主题样式
.my-component {
  @include theme-style($primary-color, $bg-color);
}
</style>

这样，在切换主题时，只需要在body元素上添加对应的类名，即可自动应用新的主题样式。

最后，我们可以使用Vue的计算属性来动态获取当前主题样式的变量值，例如：

export default {
  computed: {
    primaryColor() {
      return getComputedStyle(document.body).getPropertyValue('--primary-color');
    },
    bgColor() {
      return getComputedStyle(document.body).getPropertyValue('--bg-color');
    }
  }
}

这样，在组件中就可以使用this.primaryColor和this.bgColor来获取当前主题的颜色值和背景色值，从而实现更灵活的主题切换效果。

当然，这只是一个简单的demo，实际应用中还需要考虑样式的继承、覆盖等问题，但基本思路是类似的。