使用quasar改变主题背景

什么是Quasar？

响应式网站
PWA（Progressive Web App）
通过Apache Cordova构建移动APP（Android，iOS，…）
多平台桌面应用程序（使用Electron）
Quasar允许开发人员编写一次代码，然后使用相同的代码库同时部署为网站、PWA、Mobile App和Electron App。使用最先进的CLI设计应用程序，并提供精心编写，速度非常快的Quasar Web组件。

当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！

为什么使用Quasar？

因为开箱即用。推荐关注我们的Twitter帐户。

全平台支持
同时针对所有平台的源代码：响应式桌面/移动网站，PWA（渐进式Web应用程序），移动APP（外观原生）和多平台桌面应用程序（通过Electron）。

顶级的，快速的网络响应组件

几乎每个Web开发需求都有一个组件。每个组件都经过精心设计，为用户提供最佳体验。Quasar设计时考虑到了性能和响应能力 - 所以使用Quasar的开销几乎不明显。这是我们特别引以为傲的一个领域。

最佳实践默认集成

我们鼓励Quasar用户遵循网页开发最佳实践，这需要许多开箱即用的嵌入式功能。HTML / CSS / JS压缩、缓存清除、tree shaking、sourcemapping、代码分割和延迟加载、ES6转译、代码检查、可访问性功能。Quasar有这些功能以及更多，并且不需要配置。

全面的RTL支持

RTL（从右到左）支持Quasar组件和开发人员自己的代码。如果使用RTL语言包，开发人员编写的网站/应用程序CSS代码会自动转换为RTL。

两个主题（将有更多）

该框架支持两种最常用的主题 - Material主题和iOS主题。

逐步迁移现有项目

Quasar提供UMD（统一模块定义）版本，这意味着开发人员可以将CSS和JS HTML标签添加到现有项目中，并准备好使用它。不需要构建步骤。

通过Quasar CLI提供无与伦比的开发人员体验

当使用Quasar的CLI时，开发人员将受益于：

无论是网站，PWA，移动APP（直接在手机上还是在仿真器上）或Electron应用程序，更改应用程序源代码时，都会进行状态保持热重载。开发人员只需更改他们的代码，就可以看到应用即时更新，而不需要任何页面刷新。
状态保持编译错误覆盖。
使用ESLint进行Lint-on-save - 如果开发人员只喜欢使用他们的代码
ES6代码转译
Sourcemaps
更改构建选项不需要手动重新加载开发服务器
更多领先的开发工具和技术

极大提升开发速度

顶级入门套件使开发人员可以在最短时间内轻松实现创意。繁重的工作已替开发人员完成，而不是由开发人员来做。他们可以轻松聚焦在功能上，并通过Quasar实现样板。

很棒的不断增长的社区

当开发者遇到他们无法解决的问题时，他们可以访问Quasar论坛或Discord聊天服务器。社区在那里帮助你。

广泛的平台支持

Google Chrome，Firefox，IE11 / Edge，Safari，Opera，iOS，Android，Windows Phone，Blackberry。

Quasar组件国际化（I18n）

Quasar组件默认提供I18n。如果您的语言包缺失，只需5分钟即可添加。

进入主题哈，quasar怎么去写主题色的改变，因为他本身固有的颜色让我们去改变时候，并不像Vue那么的简单粗暴直白，上代码

HTML

JS

import { colors } from 'quasar'
//引入的quasar的颜色库
export default {
  data () {
    return {
    //开关的状态
      blueModel: false,
      //自己定义的样式
      colorStyle: [
        {
          name: 'primary',
          color: 'teal'
        },
        {
          name: 'secondary',
          color: '#000'
        },
        {
          name: 'positive',
          color: '#F03'
        }
      ],
      colorStyles: [
        {
          name: 'primary',
          color: '#027BE3'
        },
        {
          name: 'secondary',
          color: '#000'
        },
        {
          name: 'positive',
          color: '#F03'
        }
      ]
    }
  },
  methods: {
  //封装 blueModel=false函数
    colStyle () {
      this.colorStyle.forEach(element => {
        colors.setBrand(element.name, element.color)
      })
    },
    //封装 blueModel=true函数
    colsStyle () {
      this.colorStyles.forEach(element => {
        colors.setBrand(element.name, element.color)
      })
    }

  },
  mounted () {
  //全局声明调用
    this.colStyle()
  },
  //监听blueModel状态
  watch: {
    'blueModel' () {
      if (this.blueModel === false) {
      //调用函数
        this.colStyle()
      }
      if (this.blueModel === true) {
        this.colsStyle()
      }
    }
  }
}

打卡！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！