前端框架 Quasar-Framework 简介

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如今只有英文文档 (不知道有没有考虑多语言文档), 英文很差的同窗只能硬啃了.

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