iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

你渴望連結嗎?將 Web 與硬體連上線吧!系列 第 6

D05 - 準備前端環境

接下來開始建立前端專案,接下來依序介紹預期使用的工具與套件。

工具與套件

Vue、Vuex

Untitled

圖片來源:Vue 官方網站

Web 前端框架,相較其他兩大框架(React、Angular)來說入門門檻較低,很適合我這種非專業資工入門 (´・ω・`)

Vuex 為 Vue 專用之狀態管理套件,包含完整的管理模式,可以確保組件數量增多時,不易使資料傳遞、管理發生困難。

Quasar

Untitled

圖片來源:Quasar 官方網站

基於 Vue 之 UI Framework,包含大量開發常用情境與功能,例如:SPA、SSR、PWA、Mobile App、Electron、Browser Extensions,而且官方文件內容齊全,強力推薦。

現在沒有 Quasar 我都不會做網頁了 ᕕ( ゚ ∀。)ᕗ

一時用 Quasar 一時爽,一直用 Quasar 一直爽

Windi CSS

Untitled

圖片來源:Windo CSS 官方網站

如果你認識 Tailwind CSS,那一定很快就會認識 Windi CSS。

Windi CSS 多出一些特殊功能,例如:更多的斷點寫法、任意值 class、Variants 群組、Attributify Mode 等等。

現在沒有 Windi 我都不會寫 HTML、CSS 了 ∠( ᐛ 」∠)_

想了解更多的朋友,可以前往以下參考連結:

Lodash-es

Untitled

大名鼎鼎的 Lodash 之 ES Module 版本,透過 webpack 的 Tree Shaking,可以有效縮減打包後的尺寸。

詳細分析過程可以參考以下連結:

dayjs

Untitled

圖片來源:day.js GitHub

時間解析、格式化工具,特色為極度輕量(2kb)且 API 幾乎與 Moment.js 相同,可以無痛轉移。

同時支援 i18n、外掛、Immutable 等等特點。

關於時間處理套件比較與 Moment.js 的愛恨情仇,可以參考以下連結:

建立專案

在此透過 Vue CLI 建立專案內容,安裝過程同 CLI 建立流程,就不再一一贅述。

大家可以點下方連結 Clone 一份我建立完成的內容。

GitLab - init

Clone 完成後,依照以下步驟即可開始:

  1. 安裝 Node.js
  2. 安裝編輯器(這裡推薦 VS Code)後開啟專案目錄
  3. 終端機輸入 npm i,等待安裝
  4. 終端機輸入 npm run serve 開啟 dev server
  5. 開啟瀏覽器,網址列輸入 http://localhost:8080
  6. 開始專案!

上一篇
D04 - 從零開始的 Firmata 通訊
下一篇
D06 - Web Serial API 初體驗
系列文
你渴望連結嗎?將 Web 與硬體連上線吧!33

尚未有邦友留言

立即登入留言