ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Quasar Integrations:一套源码同时构建 SPA、SSR、SSG、PWA、移动端、桌面端与浏览器插件

Quasar Integrations:一套源码同时构建 SPA、SSR、SSG、PWA、移动端、桌面端与浏览器插件 前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载Quasar Framework 的集成体系Integrations回答了一个核心问题如何用一套 Vue 代码同时交付浏览器 Web 应用、服务端渲染站点、静态站点、渐进式 Web 应用、混合移动应用、桌面应用与浏览器扩展。本文基于 Quasar 官方文档的 Integrations 门户页面integrations.md及其数据源links.integrations.js结合仓库内 app-vite 的构建模式源码系统讲解七大构建目标Build Targets的实现机制、模式安装流程以及 Quasar 生态中 App Extension、Icon Genie 等集成工具的正确用法。读完本文你将能够为项目选择合适的构建模式、理解quasar dev/quasar build背后模式切换的原理并学会借助生态扩展快速接入第三方能力。集成理念聚焦业务忘掉飞船Quasar 文档用一句形象的话概括集成设计的初衷Focus only on your mission and forget about the spaceship.只管聚焦你的使命忘掉那艘飞船。其含义是多平台适配的复杂细节构建工具链、设备差异、平台约定由框架统一承载开发者只需专注于业务本身。在实现层面这一理念落地为Quasar UI Quasar CLI的组合Quasar UI 提供跨平台的组件与能力抽象Quasar CLI仓库中对应 app-vite 与 cli 两个包负责将同一份源码按目标平台编译与打包。官方文档的原话是One source code for all platforms simultaneously with all the latest and greatest best practices out of the box——一套源码同时面向所有平台且开箱即用地内置了当下最新的工程最佳实践。七大构建目标Build TargetsIntegrations 门户页将可交付形态归纳为七类每一类都对应一个由quasar mode add激活、由quasar dev/quasar build驱动的独立构建模式缩写全称交付形态仓库中对应实现SPASingle Page Application单页 Web 应用app-vite/lib/modes/spaSSRServer Side Rendering服务端渲染app-vite/lib/modes/ssrSSGStatic Site Generation静态站点生成app-vite/lib/modes/ssgPWAProgressive Web App渐进式 Web 应用app-vite/lib/modes/pwaHMAHybrid Mobile App混合移动应用Cordova / Capacitorapp-vite/lib/modes/cordova、app-vite/lib/modes/capacitorBEXBrowser Extension浏览器扩展app-vite/lib/modes/bexMPDAMulti Platform Desktop App跨平台桌面应用Electronapp-vite/lib/modes/electron在官方文档中每个模式都有独立章节如/quasar-cli-vite/developing-spa/introduction、/quasar-cli-vite/developing-ssr/introduction、/quasar-cli-vite/developing-electron-apps/introduction等本仓库的docs/src/pages/quasar-cli-vite目录下保存着这些章节的源码可作为深入阅读入口。模式的统一抽象SPA 是默认基座从源码结构看所有模式共享同一套生命周期抽象。每个模式目录下都有四个核心文件*-installation.js模式安装、*-devserver.js开发服务器、*-builder.js生产构建、*-config.js配置处理。以 dev.js 的命令解析为例const argv getArgv({ mode: { type: string, short: m, default: spa }, target: { type: string, short: T }, // cordova/capacitor/bex mode only port: { type: string, short: p }, hostname: { type: string, short: H }, devtools: { type: boolean, short: d }, ... })其中mode的默认值是spa——SPA 模式是唯一天然安装的基座。这一设计在 modes-utils.js 中体现为export function isModeInstalled(appPaths, modeName) { return ( modeName spa || // always installed existsSync(appPaths[${modeName}Dir]) ) }其余模式以目录是否存在即项目的src-ssr/、src-pwa/、src-electron/等目录作为是否已安装的标志。模式切换的底层调用链当执行quasar dev -m ssr时CLI 会先动态加载对应模式的安装模块再启动开发服务器见 dev.js// install mode if its missing const { addMode } await import( ../modes/${argv.mode}/${argv.mode}-installation.js ) await addMode({ ctx, silent: true, target: argv.target })也就是说quasar dev -m mode时若该模式尚未安装CLI 会先自动完成模式安装静默模式再继续启动。这意味着集成多种平台并不需要预先手工添加模式直接传入-m参数即可这正是一套源码多端交付的工程基础。理解模式的安装与激活机制每种模式的安装流程高度一致但又有各自的平台特化逻辑统一封装在 modes-utils.js 中。核心流程为检测是否已安装isModeInstalled确保模式级package.json与pnpm-workspace.yaml存在ensureModePackageJsonAndWorkspace复制模板文件到src-mode/目录安装模式依赖ensureModeDeps。SSR安装时选择生产 Web 服务器SSR 模式在安装时会要求你选择生产环境 Web 服务器可用选项定义在 modes-utils.jsexport const ssrWebservers [ { value: hono, label: Hono }, { value: fastify, label: Fastify }, { value: express, label: Express }, { value: koa, label: Koa } ] const defaultSsrWebserver hono仓库 app-vite/templates/ssr 目录下保存了 express、fastify、hono、koa 四套完整模板每套又细分为js/ts两种脚本格式。在 ssr-installation.js 中CLI 会根据所选服务器与项目是否使用 TypeScript决定复制哪份模板。注意默认值是Hono——选择何种服务器只影响生产环境的 Node 服务实现不改变 SSR 渲染逻辑本身。另外值得一提的是 resolvePromptAnswer 的交互降级策略在 CI 或管道输入!process.stdin.isTTY等非交互环境下CLI 不会卡在提问上而是自动采用默认值如 Hono并打印提示这保证了模式安装可以安全地跑在自动化流水线中。Electron依赖版本自动对齐Electron 模式在完成模板复制后还会读取已安装的electron包版本将其回写进src-electron/package.json的devDependencies见 electron-installation.jsconst modePkgPath appPaths.resolve.electron(package.json) const electronPkg getPackageJson(electron, appPaths.electronDir) const modePkg JSON.parse(fse.readFileSync(modePkgPath, utf8)) modePkg.devDependencies.electron ^${electronPkg.version} fse.writeFileSync(modePkgPath, JSON.stringify(modePkg, null, 2))这保证了桌面端打包时 Electron 运行时与 CLI 预期的版本一致避免版本漂移。依赖安装的包管理器适配不同模式的依赖安装策略也有差异见 modes-utils.jsCordova 模式固定使用npm install注释明确说明 Cordova CLI works only with NPM其余模式通过nodePackager抽象自动适配项目当前使用的包管理器npm / yarn / pnpm 等若项目使用 pnpm还会额外生成pnpm-workspace.yamlElectron 模式使用白名单 postinstall 脚本的专用工作区文件因为 pnpm 默认屏蔽生命周期脚本见 modes-utils.js 中的注释说明。常用命令速查命令作用quasar dev以 SPA 模式启动开发服务器HMR、错误上报quasar dev -m ssr以 SSR 模式启动开发quasar dev -m ios-m capacitor -T ios的别名quasar dev -m android-m capacitor -T android的别名quasar dev -m cordova -T ios -- 额外参数透传参数给 Cordova 执行体quasar dev -m electron -- --force-device-scale-factor1透传参数给 Electron 执行体quasar build -m mode按模式执行生产构建quasar mode add mode显式安装某模式以上命令行为均可在 dev.js 的帮助文本中直接验证。--target, -T参数在 Capacitor / Cordova 模式下取android | ios在 BEX 模式下取chrome | firefox。用一套代码同时覆盖的典型场景SPA PWA先以 SPA 快速上线再quasar mode add pwa接入 Service Worker 与 manifest获得离线能力与安装入口PWA 模式会向public/icons复制图标、按项目是否使用 TypeScript 选择src-pwa/sw模板见 pwa-installation.js。SSR SSGSEO 敏感页面走 SSR内容型站点走 SSG二者共享同一套组件代码仅构建目标不同。Web HMA MPDA同一套业务代码通过 Capacitor 打包为 iOS/Android 应用、通过 Electron 打包为 Windows/macOS/Linux 桌面应用。生态扩展App Extensions 与集成工具Integrations 门户页将生态工具分为三大类每一类都以卡片 链接的形式引导开发者按需集成。注意该页面中的部分工具如 QCalendar、QMarkdown、Icon Explorer托管在框架外部本文仅说明其在官方文档中的定位与用途具体使用以对应项目文档为准。1. UI 设计类 App Extensions官方维护的 UI 型扩展包括QCalendar日历组件、QMarkdownMarkdown 渲染、QMediaPlayer媒体播放器。它们以 App Extension 的形式安装可直接复用 Quasar 的主题与组件体系将复杂 UI 能力无缝注入到quasar.config与构建流程中。2. 工程能力类 App ExtensionsQuasar Testing为项目注入单元测试与端到端测试的完整配置Vitest、Cypress、Playwright 等Apollo GraphQL把 Apollo Client 接入 Quasar 的 boot 机制与响应式上下文开箱支持 SSR 场景的缓存与数据预取。3. 图标管理工具Icon Genie本地命令行工具用于生成、管理并打包项目所需图标仓库见 icongenie官方文档章节位于 docs/src/pages/icongenieIcon Explorer在线图标浏览器用于挑选 Quasar 支持的图标集quasar-extras-svg-icons额外的 SVG 图标包供在组件中以q-icon namesvg:...方式按需引用。App Extension 的工作原理App Extension 是 Quasar 生态的插件机制其权威说明位于 docs/src/pages/app-extensions/introduction.md关键事实包括命名约定所有扩展必须使用quasar-app-extension-前缀前缀之后的部分即ext-id。例如quasar-app-extension-awesomeness的ext-id是awesomeness作用域包some-npm-org/quasar-app-extension-awesomeness的ext-id是some-npm-org/awesomeness能力范围注册新的 CLI 命令、扩展 Vite 配置、修改quasar.config、注入 boot 文件与模板、管理自定义逻辑等仅限 Quasar CLIApp Extension 不适用于 Vite 插件模式或 UMD 环境执行时机每个已安装的扩展在每次quasar dev和quasar build时都会被初始化且安装即执行其安装脚本权限等同于你的用户账户——官方文档明确提醒安装 App Extension 等同于信任第三方 npm 包应只安装信任作者的扩展。常用的扩展管理命令如下对应仓库 app-vite/lib/cmd/ext.js# 安装或更新一个扩展 quasar ext add ext-id # 列出已安装扩展 quasar ext quasar info cat quasar.extensions.json # 移除扩展 quasar ext remove ext-id注意重新执行quasar ext add ext-id会更新扩展但可能覆盖你改动过的文件官方文档提示命令会逐文件询问是否覆盖操作时需留意选择。实践建议从 SPA 起步SPA 是唯一默认安装的模式是验证业务逻辑最快的方式按需叠加模式使用quasar dev -m mode即可自动安装缺失模式无需预先配置在 CI 中执行模式安装时CLI 会自动采用默认选项如 SSR 默认 Hono不会因交互提示而挂起先搜索再造轮子在动手实现日历、Markdown、GraphQL、测试等能力前先检索官方 App Extensionquasar ext/quasar.extensions.json许多复杂集成已经由社区与官方封装好保持一套源码尽量把平台差异收敛到 boot 文件与quasar.config中让七种模式共享同一份业务组件这正是 Integrations 门户页强调的核心理念。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Tauri移动端支持用同一套代码构建桌面和移动应用Tauri移动端支持用同一套代码构建桌面和移动应用 跨平台开发的痛点与解决方案 在传统应用开发中桌面端与移动端往往需要独立开发团队和不同技术栈导致开发成本桌面应用跨平台移动开发XClicker如何在Linux桌面实现750次/秒的极致自动点击XClicker如何在Linux桌面实现750次/秒的极致自动点击 你是否厌倦了重复的鼠标点击操作是否在寻找一款真正高效的Linux自动化工具今天我要Dioxus 框架指南用 Rust 一套代码构建 Web、桌面与移动端应用Dioxus 框架指南用 Rust 一套代码构建 Web、桌面与移动端应用 本文以仓库内的葡萄牙语巴西翻译版项目说明 notes/translations前端跨平台UI组件桌面应用移动开发上一篇B站会员购终极指南如何用biliTickerBuy实现自动化抢票下一篇6秒克隆多语言语音XTTS-v1如何颠覆语音合成行业的技术范式创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表