### GDSC NYUST x 資訊創客社 <br> ### 網頁前端開發讀書會 #### Quasar Framework 課程 <br> #### 2023/12/18 ( Mon ) 19:00 - 21:00 #### 講師：楊鈞元 Charles #### 本次課程影片：(⚒️製作中) <img src="" height="200px"> --- ### What is Quasar? Quasar Framework Vue3 最強大的企業級跨平台框架 ---- <div style="text-align: left; font-size:36px"> Quasar 是一個基於 Vue.js 的 MIT 授權開源框架，快速創建符合 Material 規範的各種風格的網站/應用程式前端界面。</div> 🔗 [了解什麼是 MIT 授權](https://www.wikiwand.com/zh-hant/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 🔗 [了解什麼是 Material 規範](https://aasta-chen.medium.com/material-design-291b124844e6) <div style="text-align: left; font-size:36px"> Quasar的座右銘是：<br><b>只需編寫一次程式碼，同時部署成 Web、手機 APP、桌面應用程式</b>。</div> ---- <div style="text-align: left; font-size:36px"> 寫一套程式碼可以應用於所有這些領域，使用最先進的 CLI 快速開發應用程序，並支持最佳實踐、實現快速的 Quasar Web 組件。 使用 Quasar，你的 JS 前端便不需要額外的巨型 Library，如 Hammer.js、Moment.js 或 Bootstrap等 Quasar 不但涵蓋了這些需求，並且佔用空間很小！ </div> --- ### Why Quasar? ---- #### 使用 Quasar 能大幅節省開發成本 #### 以下幾點是你需要知道的： ---- #### Quasar Framework 支援/符合 - SPA（單頁應用程式） - SSR（服務器端渲染應用程式）（+ 可選的 PWA 客戶端接管） - PWA（漸進式網絡應用程式） - BEX（瀏覽器擴充功能） - 手機 APP（Android、iOS等）通過 Cordova 或 Capacitor - 多平台桌面應用程式（使用 Electron） ---- #### 最大的一套頂級、快速和響應式 Components Quasar 提供了幾乎滿足所有網頁開發需求的 Components，每個組件都經過精心設計，為用戶提供最佳體驗，並注重性能和響應式 (RWD) ---- #### 默認集成最佳實踐 Quasar 的設計也是為了鼓勵開發者遵循網頁開發的最佳實踐。為此，Quasar 提供了一系列開箱即用的優秀功能，**無需進行配置**。 ---- #### 應用擴展支持 Quasar App Extensions 可以輕鬆地將設置注入到你的網站/應用程序中。也是龐大 Quasar 社區的一種貢獻方式，你可以基於 Quasar Framework 設計特定系列與使用場景的擴充包，依照文檔教學發布 Package，並公開給其他人使用，回饋給開源社群。 ---- #### 完整的 RTL 支持 Quasar 元件和開發者自己的 Code 都支持 RTL（從右到左）語言。如果使用 RTL 語言包，開發者編寫的網站/應用程式 CSS 代碼會自動轉換為 RTL。 ---- #### 逐步遷移現有專案 Quasar 提供了 UMD（統一模塊定義）版本，也是最低負擔的使用情境，你可以將 CSS 和 JS 的 HTML 標籤添加到現有專案中，然後就可以使用它了，無需任何建置安裝。 ---- #### 專注於功能，而不是樣板代碼 Quasar CLI 提供了一流的專案初始化，為開發者提供了非常簡單的入門方式。你可以在短時間內將你的想法變為現實。換句話說，Quasar 為你承擔了繁重工作，因此你可以專注於功能，而不是造輪子。 ---- #### 自動化測試和審核 為了確保你的網站 / 應用程式具有足夠的品質，你可以直接添加 Unit 和 End-to-End 測試工具 (Quasar 為此寫了專門的工具)，且這是一套持續更新的程式碼品質和安全審核工具。 ---- #### 令人驚嘆的成長中社區 當開發者遇到無法解決的問題時，可以到 [Quasar 論壇](https://forum.quasar.dev/) 或 [Discord 伺服器](https://chat.quasar.dev/) (甚至有中文交流區)，進行交流與詢問 ---- #### 廣泛的平台支持 包含 Edge、Google Chrome、Firefox、Safari、Opera、iOS、Android、MacOS、Linux、Windows。 ---- #### Quasar 語言包 Quasar 已經支援準備超過 40 種語言包，如果你的網站有多語言需求，也不必擔心需要花時間自行翻譯 Quasar 元件自身的顯示文字 ---- #### 出色的文檔 Quasar Framework 花了大量的時間編寫了完整、精確的文檔，以便開發者可以快速掌握 Quasar。 --- ### 讓 Quasar CLI 幫你準備好一切 ---- 🔗 [線上體驗 Quasar Framework](https://quasar.dev/start/quasar-cli#tl-dr) or 建立 Quasar Framework Project (以 Quasar CLI 為例) 🔗 [選擇適合你的 Quasar 版本](https://quasar.dev/start/pick-quasar-flavour) ---- #### 建立 Quasar CLI - (必須) Node.js 14.x 以上的版本 - (強烈建議) Yarn v1 或 (npm、pnpm、bun) - (強烈建議) 如果使用 Windows，務必使用 WSL ---- 1. 全域安裝 Quasar ```bash yarn global add @quasar/cli ``` 2. 在家目錄或任何你想要的地方，建立專案 ```bash yarn create quasar ``` ----  ---- <div style=" display: flex; flex-wrap: wrap; justify-content: flex-start; "> <img src="https://hackmd.io/_uploads/BJtMb4hUa.png" /> <img src="https://hackmd.io/_uploads/H1ZrQEhIp.png" /> <img src="https://hackmd.io/_uploads/SytNZV2UT.png" /> <img src="https://hackmd.io/_uploads/r1OBZ43Lp.png" /> <img src="https://hackmd.io/_uploads/BkGUW4nU6.png" /> <img src="https://hackmd.io/_uploads/SJUuWV3UT.png" /> <img src="https://hackmd.io/_uploads/HktYWE2Ip.png" /> <img src="https://hackmd.io/_uploads/SkKcWN3U6.png" /> </div> ---- <div style=" display: flex; flex-wrap: wrap; justify-content: flex-start; "> <img src="https://hackmd.io/_uploads/BJBiWVnLT.png" /> <img src="https://hackmd.io/_uploads/r1Yn-42LT.png" /> <img src="https://hackmd.io/_uploads/HyXimV2Ua.png" /> <img src="https://hackmd.io/_uploads/B1yTmV38a.png" /> </div> ----  ---- 若使用超過 Node.js v20.x 以上的版本， 需要修改 package.json 的 engines 區段 ```json= "engines": { "node": "^20 || ^18 || ^16 || ^14.19", "npm": ">= 6.13.4", "yarn": ">= 1.21.1" } ``` 接著就能執行 `yarn`，安裝依賴套件 執行 `yarn dev` 啟動 --- ### 介紹 Quasar 專案的架構 ---- Quasar 專案中，你不會看到 main.js 當你要進行全域設定，例如其他擴充套件需要在 main.js 進行全域引用時，請到 quasar.config.js 進行設定 ---- <img src="https://hackmd.io/_uploads/SkGa_VnIT.png" style="height:720px; margin-top:-20px" > --- ### 安裝推薦的 VS Code Extension ---- /.vscode/extensions.json ```json { "recommendations": [ "ecmel.vscode-html-css", "vue.volar", "vue.vscode-typescript-vue-plugin", "ms-vscode.vscode-typescript-next", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "editorconfig.editorconfig", "rvest.vs-code-prettier-eslint", "sibiraj-s.vscode-scss-formatter", "formulahendry.auto-rename-tag", "vscode-icons-team.vscode-icons", "streetsidesoftware.code-spell-checker", "oderwat.indent-rainbow", "albert.tabout", "codecoaching.quasar-docs", "wallabyjs.console-ninja", "xabikos.javascriptsnippets", "abdelaziz18003.quasar-snippets", "lettucegoblin.vue-vscode-snippets-scripts-first" ] } ``` --- ### 導覽 Style & Identity https://quasar.dev/style/typography --- ### Layout and Grid 快速上手 https://quasar.dev/layout/grid/introduction-to-flexbox --- ### Flex Playground https://quasar.dev/layout/grid/flex-playground --- ### Layout Builder https://quasar.dev/layout-builder --- ### Layout Gallery https://quasar.dev/layout/gallery --- ### 精選 Componenets https://quasar.dev/components <div style=" width: 500px; height: 500px; overflow-y: auto; border: 1px solid #ccc; margin: 0 auto; "> <ul> <li>q-btn (button)</li> <li>q-card (card)</li> <li>q-carousel (carousel)</li> <li>q-form (form)</li> <li>q-dialog (dialog)</li> <li>q-icon (icon)</li> <li>q-list (list)</li> <li>q-menu (menu)</li> <li>q-table (table)</li> </ul> </div> --- ### Quasar Plugin - 以 Notify 為例 https://quasar.dev/quasar-plugins/notify ---- #### 初始設定 plugin 需要到 quasar.config.js 註冊 ```javascript= // ... // Quasar plugins plugins: ["Notify"], }, // ... ``` ---- ```html= <script setup> import { useQuasar } from "quasar"; const $q = useQuasar(); $q.notify({ message: "這是測試成功的訊息", type: "positive", timeout: 1000, position: "bottom-right", actions: [ { icon: "info", color: "white", }, ], }); </script> ``` --- ## 結語和問答 ---- ### 補充學習資源 ---- ### Q & A