vue项目设置主题色

在vue开发过程中，很多页面为了保持主题颜色统一，且方便后期管理，通常会设有主题色，通过主题色可以使得页面上的按钮单选框等控件保持颜色统一。

接下来介绍其中一种方法：

1.先建立一个js文件用于存放主题色，如style.mixin.js。

2.导出计算属性，每个计算属性返回目标颜色。

module.exports = {
	computed: {
		titleStyle() {
			let color = '#f5f5f5';
			return color;
		},
		bgStyle() {
			return 'red';
		}

// ......

3.在main.js文件中混入全局：

let styleMixin = require('@/common/style.mixin.js')
Vue.mixin(styleMixin)

4.页面中直接使用即可：

<div :style="'color:' + lightColor + ';'">123</div>

希望本文会对您有所帮助~ ^_^