今天是9/1，友客鑫拍賣會集結的日子（誤）

.

.

歡迎來到我的 IT鐵人賽挑戰！
身為一個初入職場的小白，這是我第一次參加鐵人賽，沒有遠大的抱負，只是想透過這次的機會 push 自己每天記錄學習過程！

事情是這樣子的，前陣子同事和 AI 一起用 HTML、CSS、JavaScript 協作出了一個銷售系統。

看著專案資料夾裡的檔案：

• index.html
• orders.html
• products.html
• customers.html
• ...還有十幾個獨立的 HTML 檔案

每個檔案都有自己的 CSS 和 JavaScript，
很多程式碼明明在做一樣的事，卻要複製貼上到每個檔案。

這次鐵人賽，我決定挑戰一個特別的主題：

👉 用 30 天時間，在 AI 的協助下，將這個原生系統，一步步重構成現代化的 Vue 3 應用。

為什麼選 Vue？

1. 元件化開發

目前專案中最大的痛點就是程式碼重複。
同樣的按鈕、同樣的表格，在每個 HTML 都要複製貼上。
使用 Vue Component 可以做到重複使用同一元件功能。

2. 響應式資料綁定

目前每次資料更新，都要手動操作 DOM 去改變畫面顯示，
像是更新訂單總額、商品數量等。
Vue 的響應式系統能自動追蹤資料變化，當資料改變時畫面會自動更新。

3. 統一的狀態管理

目前每個 HTML 頁面都有自己的 JavaScript 變數，
同樣的資料（像是登入用戶、訂單內容）在不同頁面要重複宣告。

Vue 提供了可以將所有的共用資料都放在同一個地方管理。
不管在哪個頁面、哪個元件，大家都是讀取和修改同一份資料，確保資料保持同步。

4. 漸進式框架

Vue 的漸進式特性，讓我不需要一次把整個系統重寫，
可以先從一個頁面開始，慢慢將各個功能模組化。

這樣的彈性讓我能在 30 天內逐步完成轉型，而不是全部重新開始。

使用 Vue 對我來說最重要的兩個點是：

• 實現程式的輕量化
• 提升程式碼的可維護性

我相信透過 使用 Vue 重構專案原始碼 的這個過程，
正是學習理解 Vue 框架的最好方式。

身為一個前端工程師，我認為這是一個很好學習框架的方向。
這世界上有太多好的框架與開源資源可以讓我們做到快速開發。

而我們要學習的是 如何拆解並看懂框架，甚至不僅侷限在 Vue。
這個鐵人賽只是我的起步。

我覺得如果想成爲一位更好的工程師，要的不僅僅只是寫 Code 的能力，
培養快速理解各種實用框架和技術，並且能融會貫通至實作的能力，在未來更加重要。

爾後，讓我們開始這趟——

「從原生到 Vue」的呼吸之旅吧！！