前端框架 Quasar-Framework 簡介

Shawerestart發表於2018-03-18
前端框架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現在只有英文文件 (不知道有沒有考慮多語言文件), 英文不好的同學只能硬啃了.


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


相關文章