大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

什么是 Quasar 框架

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

Quasar 用于非常快速地构建高性能 VueJS 用户界面，包括：响应式单页应用、SSR 应用、PWA、浏览器扩展、混合移动应用和 Electron 应用。更加强大的是，如果开发者愿意全部可以使用同一个代码库。

除了惊人的开发速度外，Quasar 还具有以下特征：

• 基于 Vue.js，可获得适用于网站和应用的最好 UI 且遵循 Material 规约
• 开箱即用，为桌面和移动浏览器，包括： iOS Safari 等提供最佳支持
• 通过与 CLI 紧密集成，为每种构建模式，包括：SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展等提供一流的支持，并提供最佳的开发人员体验
• 易于定制（CSS）和扩展（JS），注重框架性能
• 自动 tree-shakable，具有定期发布周期，包括新功能

Quasar 的座右铭是：编写一次代码，同时将其部署为网站、移动应用程序和 / 或 Electron 应用程序。同时，使用 Quasar 时开发者不需要额外的外部库，例如： Hammer.js、Moment.js 或 Bootstrap，因为其内部已经满足了这些需求而且占用空间很小。

目前 Quasar 在 Github 通过 MIT 协议开源，有超过 25k 的 star、4k 的 fork、47k 的项目依赖量，妥妥的前端优质开源项目。

如何使用 Quasar

Quasar 提供了丰富的布局 (Flexbox)、Vue 指令、插件系统、CLI、组件库等用于开发者快速开始，同时还提供了 quasar.config 配置用于与 Vite、Webpack 等打包工具集成。

module.exports = function (ctx) {
// can be async too
  console.log(ctx)
  // Example output on console:
  /*
  {
    dev: true,
    prod: false,
    mode: {spa: true},
    modeName: 'spa',
    target: {},
    targetName: undefined,
    arch: {},
    archName: undefined,
    debug: undefined
  }
  */
  // context gets generated based on the parameters
  // with which you run "quasar dev" or "quasar build"
  return {
    // ... your config
  }
}

Quasar 组件库的使用也非常简单，比如下面是常见的 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>

更多关于 Quasar 框架的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/quasarframework/quasar

https://quasar.dev/introduction-to-quasar

https://quasar.dev/vue-components/button

https://www.youtube.com/watch?v=C-v262YhYvw