今天我們要來認識這個專案會用到的工具，包含主要設計畫面的 Vue 和建置工具 Vite。

以下內容有參閱 Vue.js 和 Vite 的官方文件：Vue.js、Why Vite，想要詳細了解的人可以點進去看看~

Vue3介紹

Vue 是一個前端開發框架，而 Vue3 版本在2020年誕生，它和以前的Vue2最大的差別就是：

1. 組織更自由 (Composition API)
   不像 Vue2 的 Options API 會有程式碼被塞進死板的格式的問題，Composition API 使程式碼能以「相同功能」為單位把邏輯組裝在一起，可讀性更高。
2. 感知更敏銳 ( Proxy-based Reactivity)
   Vue3 用 ES6 的 Proxy 取代 Vue 2 的 Object.defineProperty，在新增或是刪除屬性的時候可以直接被偵測到並即時變更。
3. 編譯更有效率 (Compiler Optimization / Patch Flags)
   編譯器會在編譯模板階段標記出動態節點並提升靜態節點；當資料觸發更新時，畫面只會精確比對「真正會變的那一個節點或文字」，大幅省下多餘的渲染開銷。

前端生態圈裡除了 Vue 之外，還有極受歡迎的 React 等前端框架，那為什麼我會選擇用 Vue 3 來做這個專案呢？

原因一：畫面設計更方便
Vue 把 HTML、CSS、JS 全部包在同一個檔案（SFC）裡，而且內建動態過渡功能。這次專案需要呈現精緻的視覺感，用 Vue 就不需要額外安裝一堆複雜的樣式或動畫套件。

原因二：邏輯控制更直覺

在 React 裡修改資料時，整個元件常常會重新跑一遍，寫的時候需要多花心思去避免多餘的渲染；但 Vue 3 的響應式底層非常聰明，改了哪部分資料就只更新那裡，我可以把心力專注在調整視覺與數值上。

原因三：學習難度較低

Vue 的語法非常貼近直覺的網頁編寫習慣，沒有太多複雜的規則，對我來說更容易快速上手並實作。

Vue 3 作為這次專案的框架，對我而言是「兼顧開發效率與視覺呈現」的最佳選擇。

在大概了解 Vue3 這個工具之後，接著就要來介紹推動整個專案開發的超高速工具——Vite。

什麼是 Vite

Vite 是一個建置工具，”vite”在法文中有「快速」的意思，顧名思義，它讓使用者能夠在前端開發的效率變快。在 vite 官網中的說明：「旨在為現代 Web 專案提供更快速、更輕量簡潔的開發體驗。」那具體是怎麼做到快速開發呢？

原因一：啟動伺服器速度快

傳統打包工具（如 Webpack）在啟動時，必須先把整座專案從頭到尾打包過一遍，專案越大開得越慢；而 Vite 利用現代瀏覽器原生支援的 ES Modules（ESM），啟動時「不預先打包原始碼」，而是等到瀏覽器實際請求哪個檔案，才即時轉換那個檔案，因此啟動伺服器幾乎都是秒開。

原因二：修改畫面更新快

雖然傳統工具也支援模組熱替換（HMR），但專案龐大時更新會明顯延遲。Vite 將 HMR 建立在原生 ESM 之上，修改元件時僅精確更新該模組，更新速度與專案總大小無關，頁面狀態不會遺失且幾乎無延遲。

原因三：第三方套件高速依賴預構建

面對 node_modules 中鮮少變動的第三方套件，Vite 採用由 Go 語言編寫的 esbuild 進行「依賴預構建」，速度比傳統工具快 10～100 倍，既解決了 CommonJS 轉換為 ESM 的問題，也避免了大量小檔案導致的網路請求壅塞。

總結來說，Vite 將開發伺服器啟動與熱更新的等待降至最低，讓我們能告別冗長的編譯流程，將專注力百分之百放在即時的程式碼調整與畫面回饋上。

今天先對 Vue 3 與 Vite 這兩大前端核心工具有了清楚的架構認知，一個負責設計精緻直覺的畫面，另一個則提供順暢的開發體驗。

前情提要

工欲善其事，必先利其器，明天（Day3）就要正式動手建置專案環境，開啟這次的實作任務了！