基于vue-loader的网站主题色实现方案

作者 likaiqiang 日期 2017-11-30
基于vue-loader的网站主题色实现方案

前言

学习vue,四大文档是必须的:vuevue-routervuexvue-loader。前几天翻着看文档,发现vue-loader的中文版竟然上线了,看来以后还是要经常看文档。

css-modules

vue-loader中有个css-modules的功能,使用方法类型这样:

<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>

具体要看官方文档。style标签加上module属性后,style标签里面的样式就会变成当前vue实例上的数据,使用this.$style可以访问到。比如:this.$style.red;this.$style.bold。这就有意思了,这样一来,可以把这些颜色值放到vuex中来管理,从来实现网站的主题色切换方案。demo

完全是一种设想。