SuperAPI AI 工具集

quasar-skilld

前端与建站

查看项目

更新于 10-15 21:04

技能介绍

用途:面向使用 Quasar(quasar 包 v2.33.1)开发、审查或调试 Vue 3 应用的场景。Quasar 是从单一代码库产出 SPA、PWA、SSR、SSG、移动端(Cordova/Capacitor)和桌面端(Electron)应用的 Vue 3 UI 框架,仅支持 Vue 3,为 ESM 包,要求 Node >= 22。

主要能力与用法:Quasar 2.33+ 在包内离线附带文档。在猜测 API 前可查看项目 node_modules/quasar:dist/api/<Name>.json 记录每个组件、插件、指令的 props、slots、events、methods 及 addedIn 版本标记,是权威依据;dist/mcp/**/*.md 为 quasar.dev 页面(组件、插件、指令、composables、utils、样式、布局)的 Markdown 版本,dist/mcp/meta.json 索引全部 160 个页面。@quasar/mcp MCP 服务器可向支持 MCP 的智能体提供同一文档。安装使用 Vite 插件时,main.js 中 import { Quasar, Notify } from 'quasar' 并以 createApp(App).use(Quasar, { plugins: { Notify } }).mount('#app') 注册;Composition API 中用 useQuasar() 获取 $q。模板 props 用 kebab-case,双向 prop 用 v-model:propName。Quasar CLI 项目从 #q-app/wrappers 导入包装器。

最佳实践与升级:优先用响应式 CSS 类而非 JS 的 Screen 插件;大数据 QTree 用 no-transition 或虚拟滚动;自定义 Dialog 组件用 useDialogPluginComponent;用 useInterval/useTimeout/useAnimationFrame 替代原生定时器。2.20 至 2.33.1 有若干行为变更(如弹出层自动跟踪滚动容器、QImg 在已知形状时输出 SSR HTML 等)。

限制与安全:*-html 类布尔 prop 会开启 HTML 渲染,属 XSS 面,启用前须清理;QEditor 无清理选项。Quasar CLI 仅向客户端暴露 QCLI_ 前缀的环境变量。Sass 版本需与 quasar 版本匹配。部分具体步骤与细节未在资料中提供。