Web Frontend: Vue.js UI Framework - Quasar

[hhstore]

📖 Abstract:

• ✅️ Vue.js UI 框架 Quasar 介绍.

💯 Related:

• ✅ Tauri: a framework that allows you to build cross-platform apps #408
• ✅ Web Frontend: CSS - Tailwind CSS #402
• ✅ Web Frontend: Vue.js #405
• ✅ Python Web UI: NiceGUI #401

[hhstore]

Vue.js UI 框架: Quasar

• ✅️ Quasar

中文文档:

• ✅️ https://www.quasar-cn.cn/

安装:

• ✅️ https://quasar.dev/start/quasar-cli

安装 cli:

• ✅️ 全局安装 quasar cli 工具
• ✅️ 推荐使用 yarn, pnpm 默认安装包, 竟然报错!

pnpm add -g @quasar/cli # experimental support
pnpm create quasar # experimental support

# or:
yarn global add @quasar/cli
yarn create quasar

# or:
npm i -g @quasar/cli
npm init quasar


# 查看版本:
❯ quasar -v
@quasar/cli v2.2.1

创建新项目:

• ✅️ 创建一个新项目: 交互式命令选项.
• ✅️ 自带配置 vue 常用工具链(i18n等).

# 根据交互式提示,创建一个 quasar 项目:
pnpm create quasar

[hhstore]

布局:

• ✅️ https://quasar.dev/layout/grid/introduction-to-flexbox
• ⭐️⭐️⭐️⭐️⭐️

细节:

• ✅️ https://quasar.dev/layout/grid/row
• ✅️ https://quasar.dev/layout/grid/column
• ✅️ https://quasar.dev/layout/layout

drawer

• https://quasar.dev/layout/drawer

page

• https://quasar.dev/layout/page
• 页面容器

[hhstore]

文本/字体控制:

• https://quasar.dev/style/typography

配色:

颜色卡:

• https://quasar.dev/style/color-palette#color-list
• https://quasar.dev/style/color-palette

theme:

• https://quasar.dev/style/theme-builder
• 主题配色自定义

dark mode:

• https://quasar.dev/style/dark-mode
• 夜间模式

平台检测:

• https://quasar.dev/options/platform-detection

[hhstore]

UI 组件集:

tabs:

• https://quasar.dev/vue-components/tabs
• https://quasar.dev/vue-components/tab-panels

头像:

• https://quasar.dev/vue-components/avatar

icon:

• https://quasar.dev/vue-components/icon
• https://quasar.dev/options/installing-icon-libraries

img:

• https://quasar.dev/vue-components/img

bar:

• https://quasar.dev/vue-components/bar
• 实现 app 的导航栏.

card:

• https://quasar.dev/vue-components/card

menu

• https://quasar.dev/vue-components/menu
• 菜单

[hhstore]

插件集:

全屏按钮:

• https://quasar.dev/quasar-plugins/app-fullscreen

Bottom Sheet

• https://quasar.dev/quasar-plugins/bottom-sheet

对话框:

• https://quasar.dev/quasar-plugins/dialog

通知:

• https://quasar.dev/quasar-plugins/notify

[hhstore]

Quasar 支持的跨平台模式:

🔥️ Web 模式:

💠 SPA 模式:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-spa/introduction
• ⭐️⭐️⭐️⭐️⭐️
• ✅️ Single-Page Application
• ✅️ 默认为此模式: 单页面模式
• ✅️ 适合绝大多数前端场景(打包场景).

# local run:
quasar dev

# release:
quasar build

# release + debug:
quasar build --debug

💠 浏览器插件模式:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-browser-extensions/introduction
• ✅️ https://quasar.dev/quasar-cli-vite/developing-browser-extensions/preparation
• ⭐️⭐️⭐️⭐️

# init:
quasar mode add bex

# run:
quasar dev -m bex

💠 PWA 模式:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-pwa/introduction
• ⭐️⭐️
• ✅️ Progressive Web App

# init:
quasar mode add pwa

# run:
quasar dev -m pwa

💠 SSR 模式:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-ssr/preparation
• ⭐️
• ✅️ 不常用.

# init:
quasar mode add ssr

# run:
quasar dev -m ssr

🔥️ App 模式:

💠 Mobile App 模式:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-mobile-apps

Cordova:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-cordova-apps/preparation

Capacitor:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/preparation

💠 Desktop App 模式:

Electron App 模式:

• ✅️ https://quasar.dev/quasar-cli-vite/developing-electron-apps/introduction

quasar mode add electron

quasar dev -m electron

quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox

[hhstore]

Quasar CLI 支持的功能:

• ✅️ https://quasar.dev/quasar-cli-vite/commands-list
• ✅️ 支持的命令合集

env 读取:

• ✅️ https://quasar.dev/quasar-cli-vite/handling-process-env

状态管理 + pinia:

• ✅️ https://quasar.dev/quasar-cli-vite/state-management-with-pinia

命令行添加 store 对象:

quasar new store <store_name> [--format ts]

[hhstore]

Quasar精选组件定制效果:

Drawer:

调整宽度和 item 自动换行:

• https://quasar.dev/layout/drawer#qdrawer-api
• https://quasar.dev/layout/drawer#mouseover-mouseout-trigger
• 默认宽度是 300, 建议调整为 260.

:width="260"
:breakpoint="460"

drawer 折叠按钮:

• https://quasar.dev/layout/drawer#click-trigger

自动折叠:

• https://quasar.dev/layout/drawer#mini-to-overlay

[hhstore]

插件集:

• https://github.com/quasarframework/quasar-awesome
• https://github.com/quasarframework/quasar-awesome#community-app-extensions

搜索:

• https://github.com/quasarframework?q=ui&type=all&language=&sort=
• https://quasar.dev/app-extensions/discover#components

插件集:

插件	demo	rank	备注
✅️ markdown 插件	demo	⭐️⭐️⭐️⭐️	官方开发
✅️ 播放器插件	demo	⭐️⭐️⭐️⭐️	官方开发
✅️ QFlashcard	demo	⭐️⭐️	官方开发
✅️ 日历插件	demo	⭐️⭐️	官方开发
✅️ 礼物/包装/绸带	demo	⭐️⭐️	官方开发
✅️ 滚动选择器	demo	⭐️⭐️	官方开发
✅️ QDraggableTree	demo	⭐️⭐️⭐️⭐️	社区开发, 拖放功能!
✅️	demo	⭐️⭐️	官方开发
✅️	demo	⭐️⭐️	官方开发
✅️	demo	⭐️⭐️	官方开发

拖放功能:

• https://quasar.dev/vue-directives/mutation#Drag-and-drop-example
  • ⭐️⭐️⭐️⭐️⭐️
  • 官方示例, 参考改写.

[hhstore]

拖拽 + 排序:

• ✅️ Drag and Drop

参考:

• Official Support for Drag and Drop quasarframework/quasar#5890 (comment)

libs:

• ✅️ vue3: https://github.com/SortableJS/vue.draggable.next
• ✅️ https://github.com/shkilo/vue3-draggable
• ✅️ https://github.com/SortableJS/Vue.Draggable
• ✅️ https://github.com/kutlugsahin/vue-smooth-dnd
• ✅️ https://github.com/Vivify-Ideas/vue-draggable
• ✅️ https://github.com/sagalbot/vue-sortable

其他:

• https://github.com/pratik227/quasar-qgrid

[hhstore]

1