Quasar:Vue3 构建多模式应用 UI 组件库

科技   2024-12-13 19:31   湖北  


文章底部获取项目地址



Quasar 是一个基于 Vue.js 的开源 UI 组件框架,开发者通过它可快速创建响应式的网站及应用,支持多种模式应用构建,包括 SPA、SSR、PWA、浏览器扩展、移动应用和多平台桌面应用,Quasar 的特点是一次编写代码,多端部署。提供超过 70 个高性能、可定制的 Material Design 组件。
部分组件预览:
Quasar 安装使用:
方式一:使用 Quasar CLI。
// 安装 Cli
npm i -g @quasar/cli
npm init quasar
or:
pnpm add -g @quasar/cli # experimental support
pnpm create quasar # experimental support
方式二:使用 UMD 添加到现有的网站项目中。
方式三:使用 Vite 创建 Quasar  项目。
// init
npm 7+
npm init vite@latest my-vue-app -- --template vue
pnpm
pnpm create vite my-vue-app -- --template vue
// install
npm install quasar @quasar/extras
or
pnpm add quasar @quasar/extras # experimental support
方式四:使用 Vue CLI。
// 安装vue/cli
npm install -g @vue/cli
// 创建项目
vue create my-app
// 安装 quasar
vue add quasar
功能对比:
国际化配置:
功能和特性:
跨平台支持:为桌面和移动浏览器(包括 ios Safari)提供最佳支持。
性能优化:Quasar 是最注重性能的框架之一,可自动进行 Tree-Shaking,以减少最终应用的体积。
全平台一体化:一个代码源同时用于所有平台,响应式桌面/移动网站(SPA、SSR + SPA客户端、SSR + PWA 客户端)、PWA、移动应用和多平台桌面应用。
响应式 Web 组件:Quasar 的每个组件都经过精心设计,为用户提供最佳可能的体验。以性能和响应性为设计考虑,因此使用 Quasar 的开销几乎可以忽略不计。
UMD:Quasar 提供统一的模块定义版本,意味着开发者可以在现有项目中添加 CSS 和 JS HTML 即可使用,无需重新构建。
CLI 功能:Quasar 提供 CLI 工具,使开发者能够快速进行项目初始化,并且易于定制和扩展。
自动化框架:Quasar 提供开箱即用的单元、端到端测试框架,以及产品质量和安全检测工具。

《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!

其他推荐


DPlayer:开源 H5 弹幕视频播放器

kkFileView:支持数十种文件格式预览开源工具库

Arco Design Mobile:字节新开源移动端 UI 组件库

V3 Admin Vite:低成本上手 中后台管理系统模板

勾股 OA:开源 企业办公管理系统

Fabricjs:交互式 canvas 图形绘制库

likeadmin:多语言 多终端 多应用 系统框架

Ant Design X:蚂蚁 AI 组件 打造人工智能对话应用

项目地址


GitHub:https://github.com/quasarframework/quasar

官方文档:https://quasar.dev/

中文文档:http://www.quasarchs.com/

前端资源推荐
推荐分享各种前端组件UI、插件工具、中后台系统、低代码、可视化、开源项目、学习资源、特效源码等
 最新文章