鐵人賽在今天正式啟程啦🤩！
建立新專案，打好基礎是最重要的一步。這也迎來這30天中的第一個主題 — 「打造地基」，這部分在網路或歷屆鐵人賽文章中都有非常多資源，因此我不會著墨過多細節，而是快速帶大家認識建立新專案會遇到的工具，並實際跑一次初始化流程。

🏗️建立開發環境

本次會使用 npm 做為 套件管理工具，下載 Node.js 時會將 npm 一併下載。

• 套件管理工具( npm、pnpm、yarn ) — 運送原料的物流系統🚛
  負責安裝並管理所有專案需要的函式庫與依賴。沒有它們，就像蓋房子時沒有水泥、木材和鋼筋，什麼都動不了。本次選用比較常見的 npm ，但其實 pnpm 與 yarn 在效能與快取上也有自己的優勢

• 打包工具( Vite、Webpack ) — 施工現場的工人👷
  負責將一堆分散的檔案、模組與資源，整理打包成瀏覽器能理解的程式碼。舊一代的代表是 Webpack，功能強大但設定較複雜； Vite 做為新世代工具，有極快的啟動速度與熱更新 ( 保存程式碼後能即時反映在瀏覽器 ) ，適合現代開發。就像是工人把一堆原料加工、整理，最後交付可以直接使用的成品。

• 程式碼品質工具 (ESLint / Prettier) — 監工與清潔工📝

  • ESLint — 使用 vite 時會內建的程式碼分析工具，協助檢查程式碼風格與潛在錯誤，就像監工盯著工人不要偷懶。
  • Prettier — 自動排版工具，能夠整理程式碼，讓每個檔案看起來一致，就像清潔工把工地保持乾淨整齊。需自行在 VScode 下載的擴充套件。

• 版本控制 (Git) — 工程紀錄 📒
  負責管理程式碼的修改紀錄，可以隨時回溯與協作，是開發中不可或缺的工具。

初始化流程

接下來就來建立專案吧！

在 Windows 打開 PowerShell，切換到你想新增專案的資料夾後輸入：

npm create vite@latest

這裡的 @latest 代表「安裝最新穩定版」，雖然不加 @latest 時 npm 也會自行尋找最新的穩定版，但加上會是個好習慣👍

接著 npm 會逐步詢問你：

• 資料夾名稱
• 專案名稱
• 使用的語言 (這裡我們選 React + TypeScript)

待它建立完成後，就可以在檔案總管中看見專案資料夾與程式碼了，接著依序執行 npm 列出的三行程式碼

cd Login-system // 你設置的資料夾名稱
npm install // 下載 package.json 中的依賴
npm run dev // 啟動開發伺服器

執行完 npm run dev 後應該會在 PowerShell 中看到 Local: http//localhost:5173/
在瀏覽器打開這個網址，就大功告成了🎉

光是建立開發環境的文案就已經有1500多字了😂...原本還想聊聊 Tailwind CSS 現今版本 v4 與 v3 版本的差異，看來先暫緩到下一篇吧😌。