iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求 系列

從Quasar 身上,我可以學到什麼?

打開求職面試網,看到前端工程師的要求:
除了每間公司都要會HTML5 & CSS3、Javascript。
有的公司還要會Sass、JQuery、ES6、Webpack、TypeScript。

每間要求的CSS UI Framework都不一樣,像是Bootstrap、Tailwindcss。
每間要求的JS Framework也都不一樣,像是React、Vue、Angular。
形式上還分為SPA、SSR、PWA。

「我到底該不該學好基礎?還是直接學框架、工具?」
「這些分散的前端技術和工具,在專案上分別解決了哪些需求?」

鐵人鍊成 | 共 31 篇文章 | 27 人訂閱 訂閱系列文 RSS系列文
DAY 21

第二十一天:UI切版 & 元件-BreakPoint、常用的Flex css

※ 今天的內容 一、BreakPoint二、定義Flex容器裡面的元件寬高比例:Flex Grid三、定義Flex容器裡面的元件是否換行:Flex Wrap四、...

2020-10-06 ‧ 由 通靈亡 分享
DAY 22

第二十二天:UI切版 & 元件-裝置類型與大小偵測 (Body CSS Class)

※ 今天的內容 一、Breakpoint CSS Class二、Platform CSS Class三、總結四、延伸閱讀 一、Breakpoint CSS Cl...

2020-10-07 ‧ 由 通靈亡 分享
DAY 23

第二十三天:UI切版 & 元件-區塊型式、定位、內外距、字型格式

※ 今天的內容 今天會介紹以下utility css class以及相關的CSS基礎 一、區塊型式二、定位三、間距四、字型格式五、其它 (滑鼠、卷軸、等寬等高、...

2020-10-08 ‧ 由 通靈亡 分享
DAY 24

第二十四天:UI切版 & 元件-設計風格、配色使用、深淺色雙模式

今天的內容 一、設計風格二、配色使用三、深淺色雙模式四、總結五、延伸閱讀 一、設計風格 Quasar當中的UI元件預設是以「Material Design」的風...

2020-10-09 ‧ 由 通靈亡 分享
DAY 25

第二十五天:UI切版 & 元件-關於UI元件的學習與摸索、頁面常用元件

今天的內容 一、回想第一次UI元件的學習二、學習與摸索UI方式三、頁面常用元件四、總結 一、回想第一次UI元件的學習 回想在第一次學習CSS Framework...

2020-10-10 ‧ 由 通靈亡 分享
DAY 26

第二十六天:UI切版 & 元件-圖文資訊元件、ICON字型 & SVG、通知訊息元件

今天的內容 一、圖文資訊元件二、ICON: Webfont & SVG三、通知訊息元件四、總結 一、圖文資訊元件 (一) QImg QImg比起HTML...

2020-10-11 ‧ 由 通靈亡 分享
DAY 27

第二十七天:UI切版 & 元件-按鈕元件、常用的表單元件

今天的內容 一、表單元件常用的屬性二、按鈕元件:QBtn三、文字輸入:QInput四、核取方塊 (QCheckbox、QRadio)五、下拉選單:(QSelec...

2020-10-12 ‧ 由 通靈亡 分享
DAY 28

第二十八天:UI切版 & 元件-清單表格、彈出視窗

※ 今天的內容 一、清單表格:QTable、QMarkupTable二、彈出視窗:QDialog、DialogPlugin三、總結 一、清單表格:Table、Q...

2020-10-13 ‧ 由 通靈亡 分享
DAY 29

第二十九天:UI切版 & 元件-視覺效果(載入中、轉場、動畫)

今天的內容 一、載入中二、轉場三、動畫四、總結 一、載入中 當我們在處理非同步的需求,中間會有一個等待時間在等待的過程中,我們可以在Quasar使用幾個方式實現...

2020-10-14 ‧ 由 通靈亡 分享
DAY 30

第三十天:UI切版 & 元件-第五部分情境練習(註冊表單、產品清單、登入頁面)

鐵人賽的最後一天以三個前端比較常見的情境練習需求來總結第五部分 今天的內容 一、註冊表單二、產品清單三、登入頁面四、總結 一、註冊表單 按下上方的註冊後,會彈出...

2020-10-15 ‧ 由 通靈亡 分享