前端框架 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如今只有英文文檔 (不知道有沒有考慮多語言文檔), 英文很差的同窗只能硬啃了.

本次 "簡介" 就到這裏, 謝謝觀衆老爺們的觀看~~