今天给大家分享一款性能优秀的 Vue 组件开发框架:Quasar

Quasar可以用最短的时间，轻松打造高性能&高质量的 Vue.js 3 用户界面.

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架，允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用.

Quasar的座右铭是：编写代码一次并同时将其部署为网站、移动应用和/或Electron应用。

是的，所有这些应用都用一个代码库。

Quasar技术特点？

结合Quasar UI和Quasar CLI开箱即用的简单性和强大功能，一个用于所有平台的源代码，提供所有最新和最好的现成最佳实践。

CLI+Quasar Web组件，帮助开发者以最短时间开发应用。让开发人员只关注你应用程序的功能，而忘记它周围的样板(boilerplate)，让开放更轻松。

以下是Quasar的重要方面和功能的非详尽列表。

最全应用支持

时为所有平台提供一个权威的代码源：响应式桌面/移动网站（SPA，SSR + SPA客户端接管，SSR + PWA客户端接管），PWA（渐进式网页应用），移动应用（看起来原生）和多平台桌面应用（通过Electron）。

最大的顶级、快速和响应迅速的Web组件集

在Quasar中，几乎每个Web开发需求都有一个组件。Quasar的每个组件都经过精心设计，考虑了性能和响应能力，为您的用户提供最佳体验。

最佳实践默认集成

Quasar还旨在鼓励开发人员遵循Web开发最佳实践。要做到这一点，Quasar充满了开箱即用 – 无需配置的强大功能。

应用扩展支持

Quasar应用扩展是一种轻松地将复杂（或简单）设置注入您的网站/应用程序的方法。这是社区贡献的一种方式，帮助开发者加速起步。

全面的RTL支持

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

逐步迁移现有项目

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

专注于你的功能，而不是样板

Quasar CLI的顶级项目初始化使你作为一个开发者很容易开始工作。你可以在极短的时间内把你的想法变成现实。CLI安装，不用多说了吧！开发者可以自由地专注于功能，而不是样板。

自动化测试和审核

Quasar项目能够开箱即用地添加单元和端对端测试套件，以及不断增长的产品质量和安全审计工具套件。所有这些都是为了确保开发出来的网站/应用程序具有最高质量。

广泛的平台支持

Google Chrome, Firefox, Edge, Safari, Opera, iOS, Android, MacOS, Linux, Windows. 可以说你要的平台，你都可以有。

Quasar安装和使用

安装/项目脚手架

通过Quasar创建和初始化一个项目非常的简单。

yarn create quasar
// or 
npm init quasar
// or
pnpm create quasar

接着，会被问到想要哪个Quasar App CLI：你是喜欢Vite，还是Webpack？

这个看大家各自的习惯了。当然，还有 TypScript Support、CSS preprocessor等配置。对于初级选手，不知道，就直接按enter键走默认配置就好。

至此，项目构建完成。

运行

项目创建完成后，进入项目，执行下面命令运行项目：

quasar dev

Vue 组件集成

在 Vue 3.x 项目中集成的简单示例.

先来个简单的 Button按钮。

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="white" text-color="black" label="Standard" />
    <q-btn color="primary" label="Primary" />
    <q-btn color="secondary" label="Secondary" />
    <q-btn color="amber" glossy label="Amber" />
    <q-btn color="brown-5" label="Brown 5" />
    <q-btn color="deep-orange" glossy label="Deep Orange" />
    <q-btn color="purple" label="Purple" />
    <q-btn color="black" label="Black" />
  </div>
</template>

最常用的表单组件。

<template>
  <div class="q-pa-md" style="max-width: 400px">

    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
    >
      <q-input
        filled
        v-model="name"
        label="Your name *"
        hint="Name and surname"
        lazy-rules
        :rules="[ val => val && val.length > 0 || 'Please type something']"
      />

      <q-input
        filled
        type="number"
        v-model="age"
        label="Your age *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please type your age',
          val => val > 0 && val < 100 || 'Please type a real age'
        ]"
      />

      <q-toggle v-model="accept" label="I accept the license and terms" />

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
        <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
      </div>
    </q-form>

  </div>
</template>

<script>
import { useQuasar } from 'quasar'
import { ref } from 'vue'

export default {
  setup () {
    const $q = useQuasar()

    const name = ref(null)
    const age = ref(null)
    const accept = ref(false)

    return {
      name,
      age,
      accept,

      onSubmit () {
        if (accept.value !== true) {
          $q.notify({
            color: 'red-5',
            textColor: 'white',
            icon: 'warning',
            message: 'You need to accept the license and terms first'
          })
        }
        else {
          $q.notify({
            color: 'green-4',
            textColor: 'white',
            icon: 'cloud_done',
            message: 'Submitted'
          })
        }
      },

      onReset () {
        name.value = null
        age.value = null
        accept.value = false
      }
    }
  }
}
</script>

还有分页组件。

<template>
  <div class="q-pa-lg">
    <div class="q-gutter-md">
      <q-pagination
        v-model="current"
        max="5"
        direction-links
        flat
        color="grey"
        active-color="primary"
      />

      <q-pagination
        v-model="current"
        max="5"
        direction-links
        outline
        color="orange"
        active-design="unelevated"
        active-color="brown"
        active-text-color="orange"
      />

      <q-pagination
        v-model="current"
        max="5"
        direction-links
        push
        color="teal"
        active-design="push"
        active-color="orange"
      />

      <q-pagination
        v-model="current"
        :max="5"
        direction-links
        unelevated
        color="black"
        active-color="purple"
      />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      current: ref(3)
    }
  }
}
</script>