Vue.js 換膚

思路： Less / Sass / Stylus ，定義多種皮膚對應的方法，點擊皮膚顏色，切換最外層 div#app 的 class，來實現換膚。

App.vue 

<template>
  <div id="app" :class="currentSkin">
    <h1>title</h1>
    <div class="skins">
      <span v-for="i in skins" :class="i" @click="changeSkin(i)"></span>
    </div>      
  </div>
</template>
<script>
    import { mapState } from 'vuex';  
    export default {
    	name: 'app',
    	computed:{
      		...mapState(['skins','currentSkin'])
    	},
    	methods:{  
        	changeSkin(val){      
            	this.$store.commit("setSkin","theme-"+val);
        	}
    	}
    }
</script>
<style lang="less"> 
 @import './assets/css/style.less';
    .theme-default{
      .theme();
    }
    .theme-blue{
      .theme(#fff,blue);
    }
    .theme-green{
      .theme(#fff,green);
    }
    .skins{
      position: absolute;
      top: 15px;
      right: 20px;
    }
    .skins span{
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 6px;
    } 
    .default{
      background: lightgrey;
    }
    .blue{
       background: blue;
    }
    .green{
      background: green;
    }   
</style>

store > index.js 

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
	    currentSkin: "theme-default",
		skins: ["default", "blue", "green"]
    },
	mutations: {
		setSkin(state, flag) {
			state.currentSkin = flag
		}
    }
})
export default store

assets > css > style.less

.theme(@backcolor:#EEA2AD,@fcolor:#000){
	h1{
		color:@fcolor;
	}
}