Quasar Framework初體驗：安裝使用學習記錄

吐個槽

前段時間，接觸到Quasar Framework 並使用了兩週。一開始剛剛用Quasar的時候，由於時間緊急，沒有系統的去看所有的文檔，只是根據UI設計的效果圖，去找相似的組件，而後再改造。一開始，真的是有種雲遮霧罩的感受，整我的都是懵逼的，看着文檔，各類組件的API的解釋說明和示例，用起來總以爲怪怪的。

Quasar CLI安裝並建立項目

廢話很少說，開始記錄Quasar的學習使用的過程吧。
Getting Started - Pick a Quasar Flavour，從文檔中能看到，Quasar有三種使用方法:
UMD/Standalone
Quasar CLI
Vue CLI 3 plugin

我選擇Quasar CLI安裝，確認本身的 Node >=10 和 NPM >=5 版本知足要求後，直接按照文檔，執行：
npm install -g @quasar/cli

而後，使用Quasar CLI建立一個項目文件夾：
quasar create demo

值得一提的是，上圖的選項，選擇auto import後，在/quasar.conf.js裏添加的，components 和 directives引用，就不用再本身去添加了，可是plugins 依然是要本身添加的，以下圖：

此處，如何配置Quasar附帶的自定義的Vue指令或Component或Plugins，請查閱：Using Quasar Directives 、 Using Quasar Components、Using Quasar Plugins

quasar dev

若是你在package.json裏添加了其餘的包依賴，那麼，你須要先
npm install 安裝依賴

而後，運行：
quasar dev

當你在vs code的 Terminal 中執行quasar dev時，會報錯：

此時，能夠執行以下：
Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process
這個不是全局的設置，因此，每次關閉項目後再次打開，可能須要從新運行它。
以後，就能正常使用quasar dev來啓動本地運行了。

順便提一下，Configure VS Code 這個文檔裏關於vs code 的配置，是開發quasar時頗有用的，避免不少看起來奇奇怪怪的報錯。

配置quasar.conf.js

Webpack devServer選項
開發過程當中，須要配置後端接口服務器：

quasar build：
Example setting env for dev/build

根據開發或生產構建類型，來配置訪問地址：

樣式佈局

Quasar提供了段落字體：Typography，其中包含一些字體格式的樣式類，能夠直接使用。
Quasar提供了多種開箱即用的顏色：Color Palette。

佈局方面，能夠直接使用 QLayout組件，用於管理整個窗口並使用導航欄或抽屜等元素包裝頁面內容。能夠直接顯示搭建佈局，並導出代碼，很是方便。

Quasar中，能夠直接使用一些CSS類來實現常見功能，例如：CSS可見性、CSS Positioning Classes、CSS Shadows 等。

Quasar提供了許多CSS類來幫助您藉助Flexbox輕鬆構建UI。有着更靈活的行列柵格佈局。具體的請查閱文檔：Introduction to Flexbox

文檔

Quasar Framework
Getting Started - Pick a Quasar Flavour
Using Quasar Directives
Using Quasar Components
Using Quasar Plugins