认识quasar及使用quasar改变主题背景

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

什么是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？

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

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

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

最佳实践默认集成

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

全面的RTL支持

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

极大提升开发速度

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

广泛的平台支持

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

进入主题

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

HTML:
<q-toggle
      :label="`Model is ${blueModel} (default behaviour)`"
      v-model="blueModel"
    />

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()
      }
    }
  }
}