Quasar Framework

Quasar 框架内置组件体系——一套代码，多端部署的 Vue 3 跨平台 UI 框架

基本信息

• 官网：https://quasar.dev
• GitHub：https://github.com/quasarframework/quasar
• License：MIT
• 最新版本：
  • quasar（UI 库）：v2.21.1
  • @quasar/app-vite（构建工具）：v3.0.0（2026-07-06 正式发布）
  • @quasar/app-webpack：v4.x 同步维护中
• 主要维护者/公司：Razvan Stoenescu（创建者、首席开发 & 架构师），Quasar 团队 + 社区贡献者
• Node.js 要求：>= 22（app-vite v3）
• 源码语言：JavaScript 51.9%、Vue 28.4%、CSS 13.5%

核心特性

1. 一套代码，六端部署：同一套代码可同时构建 SPA、SSR、PWA、Capacitor/Cordova 移动应用、Electron 桌面应用和浏览器扩展（BEX），是 Vue 生态中跨平台能力最完整的 UI 框架
2. Material Design 2 组件体系：内置 72 个 高质量 Vue 组件，严格遵循 Material Design 设计规范，覆盖按钮、表单、布局、数据展示、导航、反馈等全场景
3. 自动 Tree-shaking：仅打包目标平台所需代码——构建 SPA 时不会包含 Mobile 或 Electron 相关代码，极致精简产物体积
4. 强大的 CLI 工具链：Quasar CLI 提供项目脚手架、路由管理、资源管理、应用图标/启动屏自动生成等全流程支持，大幅减少样板代码
5. RTL 支持：全面支持从右到左排版，开发者编写的 CSS 会自动转换为 RTL 版本
6. 国际化：开箱内置超过 40 种语言包，支持自定义扩展
7. UMD 构建模式：可通过 <script> 标签直接引入，无需构建步骤，适合渐进式迁移已有项目
8. 丰富的 App Extensions：支持通过扩展机制注入复杂配置（如 Apollo/GraphQL、Tailwind CSS 等），社区扩展生态活跃
9. 最佳浏览器兼容性：对桌面和移动浏览器（包括 iOS Safari）提供开箱即用的最佳支持

组件体系

组件总览

Quasar 内置 72 个 Vue 组件，按功能分类如下：

按钮类（3 个）

表单类（14 个）

数据展示类（11 个）

导航类（8 个）

反馈与覆盖层（10 个）

布局与辅助类（12 个）

交互与高级组件（14 个）

观察者（2 个）

适用场景

1. 多端应用开发：需要同时发布 Web、移动端、桌面端的应用，Quasar 的"一套代码六端部署"能力可大幅降低开发和维护成本
2. 跨平台开发：Vue 技术栈团队希望用一套代码覆盖 SPA + PWA + 移动 App + 桌面 App 的全场景需求
3. PWA / 移动 Web：Quasar 对 PWA 和移动端 Web 有深度优化，适合需要原生体验的 Web 应用
4. 企业内部管理系统：72 个组件覆盖表单、表格、树、选择器等中后台常见场景，配合 Material Design 风格开箱即用
5. 快速原型开发：CLI 脚手架 + 丰富组件 + 完善文档，适合快速搭建 MVP 或内部工具
6. 浏览器扩展开发：通过 BEX 模式支持 Chrome、Firefox 等浏览器扩展开发
7. 国际化项目：内置 40+ 语言包 + RTL 支持，适合面向全球用户的产品

技术亮点

一套代码，六端运行

Quasar 的核心竞争力在于其跨平台能力。开发者只需编写一次 Vue 组件代码，即可通过 CLI 切换构建模式，输出不同平台的应用：

# SPA — 单页应用
quasar build spa
 
# SSR — 服务端渲染（支持 SPA/PWA 客户端接管）
quasar build ssr
 
# PWA — 渐进式 Web 应用
quasar build pwa
 
# Capacitor — 移动应用（iOS / Android）
quasar build capacitor
 
# Electron — 桌面应用（Windows / macOS / Linux）
quasar build electron
 
# BEX — 浏览器扩展
quasar build bex

每个构建模式有独立的源码目录（如 src-capacitor/、src-electron/、src-ssr/），共享 src/ 中的核心 Vue 组件和逻辑。自动 Tree-shaking 确保不会将无关平台代码打入产物。

@quasar/app-vite v3（2026 年 7 月发布）

Quasar 最新的构建工具链，基于 Vite 生态全面升级：

• Rolldown 替代 esbuild：编译速度大幅提升，构建产物更小
• 并行化构建：所有 Quasar 模式的构建步骤实现并行化
• 全新环境管理：重新设计的 env 文件管理系统，修改后无需重启开发服务器
• import.meta.env 替代 process.env：完全支持 TypeScript，新增安全层确保客户端文件仅使用可配置前缀的环境变量
• 依赖隔离：各 Quasar 模式独立管理依赖，模式特定包可直接安装在对应 src-* 文件夹
• SSR 增强：更好的自定义 Web 服务器支持（Hono、Fastify、Express、Koa），新增 /src-ssr/server-assets 文件夹
• Electron 改进：新增 /src-electron/electron-assets 文件夹，更便捷的文件引用方式
• Vue Router 文件路由：支持基于文件系统的路由
• oxlint + oxfmt：除 ESLint 外新增 Rust 工具链选项
• App Extensions 支持 TypeScript
• 基于 Node.js v22+ 特性构建，支持 PNPM v11

CLI 工具链

Quasar CLI 是框架的核心生产力工具：

# 安装 CLI
npm i -g @quasar/cli
 
# 创建项目
npm init quasar
 
# 开发模式
quasar dev
 
# 构建生产版本
quasar build
 
# 生成应用图标和启动屏
quasar icongenie

CLI 自动处理路由配置、资源管理、代码分割、Polyfill 注入等复杂配置，让开发者专注于业务逻辑。

Material Design 组件体系

72 个组件严格遵循 Material Design 2 设计规范，所有组件支持：

• Dense 模式：通过 dense 属性让所有表单组件使用更紧凑的垂直空间
• 暗色模式：内置暗色主题支持
• 主题定制：通过 CSS 变量或 SCSS 变量深度定制
• 一致性 API：所有组件共享统一的 Props、Events、Slots 设计模式

性能优化

• 组件内部使用 Vue 3 响应式系统的精细控制
• QVirtualScroll 虚拟滚动支持超长列表渲染
• 自动 Tree-shaking 确保最小打包体积
• Rolldown 驱动的快速编译（app-vite v3）

生态集成

Vite 集成

Quasar 与 Vite 生态深度集成：

• @quasar/app-vite：官方 Vite 构建适配器，v3 版本已升级至 Vite 7 + Rolldown
• Vite 插件模式：可在 quasar.config 中通过 extendViteConf 自定义 Vite 配置
• Tailwind CSS：通过 PostCSS 插件或 quasar-app-extension-tailwindcss-3 扩展集成 Tailwind CSS 4.x
• UnoCSS：社区提供 UnoCSS Preset，支持将 Quasar 类映射为 Tailwind 快捷方式

Nuxt 集成

Quasar 可通过以下方式与 Nuxt 集成：

• nuxt-quasar-ui 模块：Nuxt 官方模块列表收录，提供开箱即用的 Nuxt + Quasar 集成
• 手动集成：在 nuxt.config.ts 中配置 Vite 插件和基础样式
• Quasar 2.15.0+ 引入 useId 和 useHydrate 函数，与 Nuxt 自动导入系统兼容

注意：与 Vuetify 相比，Quasar 的 SSR + Nuxt 集成相对复杂，社区更推荐在需要跨平台能力时使用 Quasar 自身的 CLI 而非 Nuxt。

图标集成

支持多种图标集：

• Material Icons（默认）
• Fontawesome
• Ionicons
• MDI（Material Design Icons）
• Eva Icons
• Themify Icons
• 自定义 SVG 图标

App Extensions

Quasar 独有的扩展机制，支持向项目注入配置和功能：

• @quasar/quasar-app-extension-apollo：GraphQL / Apollo 集成
• quasar-app-extension-tailwindcss-3：Tailwind CSS 集成
• 支持 TypeScript 编写扩展（app-vite v3）
• 社区贡献的多种扩展

学习资源

官方资源

社区渠道

教程与视频

Figma 设计资源

2026 年现状

版本进展

截至 2026 年 7 月，Quasar 框架处于活跃开发状态：

• quasar v2.21.1 是当前最新稳定版，持续修复问题和优化
• @quasar/app-vite v3.0.0 于 2026 年 7 月 6 日正式发布，是一个重大版本升级，引入 Rolldown、并行构建、全新环境管理等核心改进
• v1 已于 2023 年 6 月 30 日终止 LTS 支持，v2 是当前唯一活跃版本线

社区与生态

• GitHub 27.2k+ Stars，3.7k+ Forks，拥有稳定的用户基础
• 项目由 Razvan Stoenescu 主导开发，社区贡献者参与维护
• 2026 年 3 月社区发起项目状态与路线图讨论，讨论资助开发和路线图优先级
• 社区关注点集中在单人维护者的可持续性和开发节奏

竞争格局

• 在 跨平台能力 方面，Quasar 仍然是 Vue 生态中最完整的解决方案（SPA + SSR + PWA + Mobile + Desktop + BEX）
• 在 纯 Web 中后台 场景，Element Plus、Naive UI、Arco Design 等专用组件库的竞争加剧
• 在 移动端 Web / PWA 场景，Quasar 仍是 Vue 生态的首选
• 部分开发者在 SSR 场景转向 Nuxt + Nuxt UI，但 Quasar 在需要同时覆盖移动端和桌面端时仍具独特优势
• 社区有人尝试将 Quasar 组件类映射到 UnoCSS/Tailwind，探索更灵活的样式方案

优势与局限

总结：Quasar Framework 是 Vue 生态中跨平台能力最完整的 UI 框架。如果你的项目需要同时覆盖 Web（SPA/SSR/PWA）、移动端（iOS/Android）和桌面端（Windows/macOS/Linux），Quasar 是最佳选择。2026 年 app-vite v3 的发布标志着框架在构建工具和性能方面迈出了重要一步。对于纯 Web 中后台场景，可能需要权衡 Material Design 风格和社区规模等因素。