前端框架 Quasar-Framework 简介

8,974 阅读2分钟
Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站

    Github

  1. 响应式网站
  2. 渐进式应用
  3. 手机应用(通过Cordova)
  4. 跨平台应用(通过Electron)

    Quasar允许开发者在只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App 在使用Quasar的时候, 你甚至不需要Hammerjs, Momentjs, 或者Bootstrap, Quasar框架内包含了已经这些东西,你可以很简单就使用到.


在前面说什么都是假的,直接上 demo 才是王道

Material Theme Demo

iOS Theme Demo


Quasar现在的最新版本是v0.15.x ,比起v0.14.x系列, 是一次很大的升级,它能让你更轻易的创建一个Hybrid App, 并且和旧版的配置方法有了很大的区别.旧版更类似vue-cli.新版是通过插件啊的形式添加拓展功能,例如axios 和vue-i18n. component也是按需引用, 可以在quasar.conf.js里详细配置


Quasar默认包含了2套皮肤,你可以切换使用,一套是Material Theme,一套是iOS Theme.但是两套主题区别不是特别大.

Quasar创建App的命令也是如此的简单

# run development server (with default theme)
$ quasar dev

# run development server with specific theme
$ quasar dev -t mat
$ quasar dev -t ios

# on specific port
$ quasar dev -p 9090

# PWA
$ quasar dev -m pwa

# Mobile App
$ quasar dev -m cordova -T [android|ios] -t [mat|ios]

# Electron App
$ quasar dev -m electron
# with iOS theme...
$ quasar dev -m electron -t ios

# build for production
$ quasar build

# build for production with specific theme
$ quasar build -t mat
$ quasar build -t ios

# PWA
$ quasar build -m pwa

# Mobile App
$ quasar build -m cordova -T [android|ios] -t [mat|ios]

# Electron App
$ quasar build -m electron
# with iOS theme...
$ quasar build -m electron -t ios

比较需要注意的是在开发的时候有个在component 里经常有一个attribute叫做color.它的意思不是说color code #fff那种东西,而是官方给的一张颜色表,里面有对应的颜色可以选择


笔者感觉这个框架包含了我们开发webapp的各种需求, 用来做跨平台App和Mobile Website都是一个很好的选择, 方便(懒)


还有一个比较引人注意的地方就是app Visibility这里.它可以在检测到App是否被切换至后台.

在某些场景下(websocket),这个function是个很不错的东东


而且作者更新也很勤快, Github上的星星数也越来越多了.5000+ now.大家感觉不错的话可以去star一下.

(和笔者没有半毛钱关系, 只是感觉开源的好东西需要支持, 而且掘金上基本搜不到这个框架的资料)


还有一点,Quasar现在只有英文文档 (不知道有没有考虑多语言文档), 英文不好的同学只能硬啃了.


本次 "简介" 就到这里, 谢谢观众老爷们的观看~~