本系列文已改編成書「Arduino 自造趣：結合 JavaScript x Vue x Phaser 輕鬆打造個人遊戲機」，本書改用 Vue3 與 TypeScript 全面重構且加上更詳細的說明，

在此感謝 iT 邦幫忙、博碩文化與編輯小 p 的協助，歡迎大家前往購書，鱈魚在此感謝大家 (｡･∀･)。

若想 DIY 卻不知道零件去哪裡買的讀者，可以參考此連結 。( •̀ ω •́ )✧

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

工具與套件

Vue、Vuex

圖片來源：Vue 官方網站

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

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

Quasar

圖片來源：Quasar 官方網站

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

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

一時用 Quasar 一時爽，一直用 Quasar 一直爽

Windi CSS

圖片來源：Windo CSS 官方網站

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

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

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

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

• tailwind vs windicss
• Windi CSS - Tailwind CSS 的上位替代

Lodash-es

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

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

• lodash | 如何正確的 import lodash

dayjs

圖片來源：day.js GitHub

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

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

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

• Day.js - 一套輕量級的時間處理套件
• You-Dont-Need-Momentjs

建立專案

在此透過 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. 開始專案！