vue scss切换主题样式

基于参考链接

1. 准备好 要换的主题样式
   

2. 准备一个 theme-global.scss 用于装载 各种主题，并命好主题名字
   

3. main.js 中全局引入 主题样式
   

4. App.vue中，写入以下内容

 //主题色类名获取
  computed: {
    themeClass() {
      return `theme-${this.$store.state.themeStyle}`;
    },
  },
  watch: {
    //主题变化存储在本地
    themeClass() {
      localStorage.themeStyle = this.$store.state.themeStyle;
    },
  },
  //创建时读取本地主题
  created() {
    if (localStorage.themeStyle) {
      this.$store.commit("THEME_CHANGE", localStorage.themeStyle);
    } else {
      localStorage.themeStyle = this.$store.state.themeStyle;
    }
  },
  // 用于加载整体的主题样式
  mounted:function(){
    document.getElementsByTagName("body")[0].className=this.themeClass;
  }

注意：如果不需要做换肤效果，在main.js中 直接引入指定的主题样式文件即可