一、撰寫此系列文的初衷

談談最大化的發揮第三方工具和框架的效益，並在必要時跳脫框架的必要性。

1. 從認識Quasar的過程中，同時了解CSS Framework和JS Framework帶來的效益。
2. 舉例各式各樣的前端開發需求，理解那些分散的前端技術或工具存在的目的。即使你工作不是使用Quasar，甚至不是使用Vue作為JS框架，仍然可以幫助你如何選擇、學習前端的開發工具、技術的應用情境。
3. 了解不管再強大的前端框架與函式庫，仍然免不了重要的基礎：HTML 5 & CSS3 & Javascript。
4. 搭配其他的前端文章，在學習基礎時，技術跟應用情境能有個對照參考。

二、系列文想傳達的內容

1. 舉例前端的專案開發、版面、元件功能需求
2. Quasar的使用上，是怎麼方便的實現這些需求
3. Quasar的使用上，考慮到哪些開發或客製彈性的需求
4. 談談CSS Framework和JS Framework帶來的效益
5. 相關的前端基礎、Vue基礎和延伸閱讀

三、何謂Quasar Framework？

Quasar是一個基於Vue CLI 的 JS Framework + CSS UI Framework
類似Nuxt.js，從實際專案的開發角度出發，考慮了專案開發所需的架構、Webpack的優化設定
並提供了版面與元件樣式的客製彈性，方便實現「RWD」的版面，或是「行動裝置與桌面分開」的版面
而且，Quasar官方文件的範例示意設計的真的很用心

官方文件與介紹

四、Quasar 哪裡像邪教：以JS Framework的角度？

1. 和Nuxt.js一樣，已經預先整合好許多Vue常用的工具 (Axios、i18n、Vuex、Meta Plugin)，以及Webpack的打包優化，包括HTMLMinifier、uglifyJS、cssnano。
   

2. Quasar的Boot可以像Nuxt一樣，處理第三方Plugin、Middleware的初始化流程。
   

3. 可方便的選擇，使用傳統ES6的開發方式、Typescript還是Vue 3的Composition API。
   

4. 可以依照不同的專案需求，打包成的不同的佈署格式。
   

五、Quasar 哪裡是邪教：以CSS Framework的角度？

1. Quasar 涵蓋了CSS Framework所需要的元件與顏色、CSS轉場動畫(Animate.css)、ICON。可以透過設定quasar.config.js自動import有使用的UI元件，不必個別import或import所有的component、directive。此外，可以依照需求開發或使用額外的元件，例如qmediaplayer(影音播放器)、qzoom(圖文放大)、qcalendar(複雜行事曆)

2. Quasar 的Layout系統非常強大，包括Header、Sidebar、Footer的固定與是否伸展、頁面的高度隨瀏覽器自動伸展等細節。以及Sidebar伸縮的呈現方式。
   

3. Quasar提供的現成CSS樣式相當完整。還可以像Nuxt，很方便的另外制定並引入全域的CSS規則。
   

4. Quasar在處理行動裝置和黑暗模式的客製需求相當方便。不只包含了類似Bootstrap 的 Flex Grid，框架底層還準備好JS判斷User-Agent，區分瀏覽的裝置類型，在body標記相對應的css class。開發者可以透過相對應的class，決定哪些元素只能顯示在桌面或行動裝置。目前沒有看到其他的CSS Framework像Quasar實現這個部分。

30天大綱 (依照實際狀況調整)

一、 進入主題之前

1. Quasar哪裡像邪教：整合前端所需的樣式與非樣式的開發需求
2. 我能不能跳過 HTML & CSS 基礎，直接學CSS框架或改套版？
3. 用於求職或工作的CSS Framework 學習術 (某天離開Quasar邪教轉學Bootstrap)
4. 關於學習和工作的技術選擇角度 - 理解早期的JQuery，現代JS框架

二、 專案的維護

1. 建立專案 (feat. NPM 實務需求與常用指令)
2. 熟悉Quasar框架目錄架構 (feat. SPA、SSR、SEO)
3. 開發測試伺服器 (feat. Webpack Dev Server、Source Map)
4. 開發測試伺服器II (feat. ES Lint 在開發上的使用與設定)
5. Webpack 編譯與打包的過程 (feat. Entry、Output、Loader、Plugin)
6. Webpack 編譯與打包優化(feat. Tree Shaking、Minify & Uglify、Code Splitting & Cache Brusting)
7. 整合情境練習 (第二部分總結)
8. 整合情境練習-參考答案 (第二部分總結)

三、 專案的初始化

1. CSS 樣式
2. JS 程式 (feat. ESModule)
3. 拆分環境變數 (feat. process.env、CommonJS)
4. 「前後台頁面存取權限」情境需求練習 (第三部分總結)

四、 網站的基本結構

1. 版型與頁面I (<q-layout>、<q-header>、<q-drawer>、<q-footer>)
2. 版型與頁面II (<q-page-container>、<q-page>、<q-page-sticky>)
3. 頁面路由
4. 選單的補充應用(q-toolbar、q-list、q-menu、第四部分總結)

五、 UI切版 & 元件

1. BreakPoint、常用的Flex css
2. 裝置類型與大小偵測 (Body CSS Class)
3. 區塊型式、定位、內外距、字型格式
4. 設計風格、配色使用、深淺色雙模式
5. 關於UI元件的學習與摸索、頁面常用元件
6. 按鈕元件、常用的表單元件
7. 清單表格、彈出視窗
8. 視覺效果(載入中 & 轉場 & 動畫)
9. 第五部分情境練習(註冊表單、產品清單、登入頁面)

六、全域資料 & SEO

1. Quasar Meta
2. SSR Mode
3. API 串接 & 全域資料 (Vuex、Cookie、LocalStorage)
4. 多語系 (i18n)