在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>

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