Quasar Framework 2.18.7 中文指南：高性能VueJS UI框架，支持SPA、PWA、SSR及跨平台开发

quasar-skilld by harlan-zw/vue-ecosystem-skills

134 周安装量

150 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill quasar-skilld

UI组件库 Vue 开发

🇨🇳中文介绍

quasarframework/quasar `quasar`

以创纪录的速度构建高性能 VueJS 用户界面（SPA、PWA、SSR、移动端和桌面端）

版本： 2.18.7 标签： legacy: 1.22.10, latest: 2.18.7

参考： 文档 — API 参考、指南 • GitHub Issues — 错误、变通方案、边界情况 • GitHub Discussions — 问答、模式、示例 • 发布说明 — 更新日志、破坏性变更、新 API

API 变更

本节记录特定版本的 API 变更 — 请优先关注近期的主要/次要版本发布。

破坏性变更： v-model -> 在 Vue 3 中使用 model-value + @update:model-value 替代 +

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

896,800 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

290,500 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

233,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

163,300 周安装

破坏性变更： QDrawer/QDialog/QMenu/QTooltip -> 使用 class 和 style 属性替代 content-class/content-style 属性来源

破坏性变更： QImg -> 完全重新设计，移除了 transition 和 basic 属性；将 no-default-spinner 重命名为 no-spinner 来源

破坏性变更： QScrollArea -> 方法 getScrollPosition 返回 { top, left }；setScrollPosition 和 setScrollPercentage 需要 axis 参数来源

破坏性变更： QTable -> 将 data 属性重命名为 rows 以避免 TypeScript 命名冲突来源

破坏性变更： Platform.is -> 自 v2.17.0 起，所有布尔属性现在明确为 false 而不是 undefined 来源

破坏性变更： colors 工具 -> getBrand 和 setBrand 分别被 getCssVar 和 setCssVar 取代来源

破坏性变更： 滚动工具 -> 将 getScrollPosition 重命名为 getVerticalScrollPosition，animScrollTo 重命名为 animVerticalScrollTo，setScrollPosition 重命名为 setVerticalScrollPosition 来源

破坏性变更： date 工具 -> addToDate 和 subtractFromDate 的属性名称已规范化（例如，year -> years，month -> months）来源

破坏性变更： QPopupEdit -> 现在必须使用带有 v-slot="scope" 的默认插槽以获得更好的性能来源

破坏性变更： GoBack 指令 -> 已移除；请改用路由引用（$router.back() 或 $router.go(-1)）来源

新增： useQuasar 组合式函数 -> 在组合式 API 组件中访问 $q 对象的主要方法

新增： useMeta 组合式函数 -> 定义元标签的新方式，取代现已弃用的 meta 组件属性来源

新增： QTable 属性 -> 在 v2.18.0 中新增了 table-row-style-fn、table-row-class-fn、grid-style-fn 和 grid-class-fn 来源

其他变更： useFormChild() 新的组合式函数 · QOptionsGroup 属性 option-value、option-label、option-disable 新增于 v2.17.0 · QUploader 属性 thumbnail-fit 新增于 v2.17.0 · QSelect 属性 disable-tab-select 新增于 v2.17.0 · QMenu/QBtnDropdown no-esc-dismiss 新增于 v2.18.0 · evt.qAvoidFocus 新标志 v2.18.0 · QDate 的 model-value 不再包含 changed 属性 · QPagination 属性 gutter 新增 · QImg 属性 loading、crossorigin、fit 新增 · Dialog 插件自定义组件属性移至 componentProps · Loading 插件对 HTML 内容使用 html: true 而非 sanitize · App.vue 包装器 <div id="q-app"> 已移除 · .sync 修饰符被 v-model:propName 取代

使用 #q-app/wrappers 替代 quasar/wrappers 来定义配置和引导文件 — 提供更优的类型推断，并与现代 Quasar CLI 保持一致来源
使用 Regle 作为 QInput 和 QField 的推荐验证库 — 与内联规则相比，提供了更健壮、外部化的验证逻辑来源
优先使用响应式 CSS 类（例如 gt-sm、lt-md）而非 JavaScript 中的 Screen 插件 — 通过直接利用 CSS 媒体查询，最大限度地减少重新渲染和布局偏移来源
使用 useDialogPluginComponent 组合式函数引导自定义对话框组件 — 自动处理 Dialog 插件复杂的内部通信和生命周期要求来源
在渲染大型数据集时，启用 QTree 上的 no-transition 属性 — 通过跳过昂贵的展开/折叠动画，显著提高运行时性能来源
使用 Quasar 的 useInterval 和 useTimeout 组合式函数替代原生浏览器定时器 — 确保在组件卸载时自动取消并清理内存来源
在使用 QLayout 时，将 QPullToRefresh 作为 QPage 的直接子元素放置 — 确保在布局容器内正确拦截滚动事件并实现类似原生的下拉行为来源
在 SSR 应用程序中避免将 Dark 模式设置为 auto — 防止服务器在客户端与系统偏好同步之前渲染浅色模式导致的“闪烁”效应来源
不要在 QRouteTab 组件上使用 v-model — 活动状态直接从当前路由派生，手动更新模型不会触发导航来源
优先使用加载条插件而非手动创建 QAjaxBar 组件实例 — 为所有 Ajax 调用提供一个更简单、全局管理的进度指示器，无需为每个页面进行配置来源

🇺🇸English

quasarframework/quasar `quasar`

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

Version: 2.18.7 Tags: legacy: 1.22.10, latest: 2.18.7

References: Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

BREAKING: v-model -> uses model-value + @update:model-value instead of value + @input in Vue 3 source
BREAKING: QDrawer/QDialog/QMenu/QTooltip -> use class and style attributes instead of content-class/content-style props source
BREAKING: QImg -> completely redesigned, removed transition and basic props; renamed no-default-spinner to no-spinner source
BREAKING: QScrollArea -> methods getScrollPosition returns { top, left }; setScrollPosition and setScrollPercentage require axis parameter source
BREAKING: QTable -> renamed data prop to rows to avoid TS naming conflicts source
BREAKING: Platform.is -> all boolean properties now explicitly false instead of undefined since v2.17.0 source
BREAKING: colors utils -> getBrand and setBrand replaced by getCssVar and setCssVar respectively source
BREAKING: Scroll utils -> renamed getScrollPosition to getVerticalScrollPosition, animScrollTo to animVerticalScrollTo, and setScrollPosition to setVerticalScrollPosition source
BREAKING: date utils -> addToDate and subtractFromDate property names normalized (e.g., year -> years, month -> months) source
BREAKING: QPopupEdit -> must now use the default slot with v-slot="scope" for performance source
BREAKING: GoBack directive -> removed; use router reference ($router.back() or $router.go(-1)) instead source
NEW: useQuasar composable -> primary method for accessing the $q object within Composition API components
NEW: useMeta composable -> new way to define meta tags, replacing the now deprecated meta component property source
NEW: QTable props -> added table-row-style-fn, table-row-class-fn, grid-style-fn, and grid-class-fn in v2.18.0 source

Also changed: useFormChild() new composable · QOptionsGroup props option-value, option-label, option-disable new v2.17.0 · QUploader prop thumbnail-fit new v2.17.0 · QSelect prop disable-tab-select new v2.17.0 · QMenu/QBtnDropdown new v2.18.0 · new flag v2.18.0 · model-value no longer contains prop · prop new · props , , new · plugin custom component props moved to · plugin uses for HTML content instead of · wrapper removed · modifier replaced by

Best Practices

Use #q-app/wrappers instead of quasar/wrappers for defining configurations and boot files — provides superior type inference and alignment with modern Quasar CLI source
Use Regle as the recommended validation library for QInput and QField — provides a robust, externalized validation logic compared to inline rules source
Prefer responsive CSS classes (e.g., gt-sm, lt-md) over the Screen plugin in JavaScript — minimizes re-renders and layout shifts by leveraging CSS media queries directly

Weekly Installs

Repository

harlan-zw/vue-e…m-skills

GitHub Stars

145

First Seen

Feb 19, 2026

Security Audits

Gen Agent Trust HubWarn SocketPass SnykWarn

Installed on

github-copilot84

codex82

kimi-cli81

gemini-cli81

amp81

opencode81

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

120,000 周安装

Bootstrap custom dialog components with the useDialogPluginComponent composable — handles the complex internal communication and lifecycle requirements of the Dialog plugin automatically source

Enable the no-transition prop on QTree when rendering large datasets — significantly improves runtime performance by skipping expensive expansion/collapse animations source

Use Quasar's useInterval and useTimeout composables over native browser timers — ensures automatic cancellation and memory cleanup when the component is unmounted source

Place QPullToRefresh as a direct child of QPage when using QLayout — ensures correct scroll event interception and native-like pull behavior within the layout container source

Avoid setting Dark mode to auto in SSR applications — prevents the "flicker" effect where the server renders light mode before the client synchronizes with system preferences source

Do not use v-model with QRouteTab components — the active state is derived directly from the current route, and manual model updates will not trigger navigation source

Prefer the Loading Bar Plugin over manual QAjaxBar component instances — provides a simpler, globally managed progress indicator for all Ajax calls without per-page wiring source

Quasar Framework 2.18.7 中文指南：高性能VueJS UI框架，支持SPA、PWA、SSR及跨平台开发

🇨🇳中文介绍

quasarframework/quasar quasar

API 变更

相关 Skills

最佳实践

🇺🇸English

quasarframework/quasar quasar

API Changes

Best Practices

最新 Skills

quasarframework/quasar `quasar`

quasarframework/quasar `quasar`