昨天 Day 6 我們學會了 Vue 的響應式原理。
但實話說，用單純的 HTML、CSS、JS 檔案來拼裝一個系統，隨著功能越來越多，很快就會變得混亂。
今天，我們就要正式踏出重構的第一步 —— 建立一個 Vue 開發環境。

為什麼我們需要一個「開發環境」？

檢視我們當前目前的 POS 原型系統：
它是由一堆獨立的 .html、.css、.js 檔案組成的。剛開始看起來沒什麼，但隨著功能增加，很快就會遇到這些問題：

1. 檔案混亂：一個功能要分別修改 HTML / CSS / JS，維護起來很痛苦。
2. 無法元件化：像導覽列、頁尾這種共用區塊，每個檔案都要複製貼上。
3. 手動管理依賴：要自己在 HTML 中一個一個加 <script> 和 <link>。
4. 沒有建置流程：程式碼不會自動壓縮與最佳化，效能與維護性都不佳。

👉 這是後我們就需要導入一個「開發環境」，核心就是 建置工具 (Build Tool)。

神兵利器・Vite 登場

要建立 Vue 專案，我們需要一個工具來幫我們：Vite。
它是 Vue 作者尤雨溪開發的新一代前端建置工具。

你可以把 Vite 想像成一個「智慧管家」，開發過程中很多繁瑣的事它都會幫你處理好：

• 一鍵生成專案：自動幫你建立乾淨的專案結構。
• 內建開發伺服器：輸入指令就能在本地開一個網站，隨時預覽結果。
• 閃電般的熱更新 (HMR)：存檔後瀏覽器立即更新，不用手動重整。
• 打包與優化：專案要上線時，自動幫你壓縮、最佳化所有程式碼。

有這些功能就可以讓我們開發效率大幅提升 👍

建立第一個 Vue 專案

來吧，我們正式開始！

1. 開啟終端機 (Terminal)

• Windows 使用者：可以使用內建的 PowerShell 或 命令提示字元 (cmd)。
• macOS 使用者：直接打開 Terminal。

👉 提醒：這邊要先安裝 Node.js，並確認版本在 18+。
可以輸入以下指令檢查：

node -v
npm -v

2. 建立專案

# 使用 npm 來建立 Vue 專案

npm create vue@latest

// 接著會跑出一系列互動問答。這裡給大家一份建議的選項：

Project name: pos-vue

Add TypeScript?: No (這邊我們顯專注在 Vue，可以之後再學系TS的部分ＸＤ）。  

Add JSX Support?: No（預設用 Vue SFC (`.vue` 檔) 開發即可）

Add Vue Router?: Yes （讓我們能做 SPA 導航）

Add Pinia?: Yes （狀態管理，Day 5 提過）

Add Vitest?: No（測試工具可以先不開，等專案成熟後再導入。）

Add End-to-End Testing?: No

Add ESLint?: Yes（保持程式碼風格一致。）

Add Prettier?: Yes（自動排版程式碼）

3. 安裝與啟動

# 進入專案資料夾
cd pos-vue-refactor

# 安裝依賴套件
npm install

# 啟動開發伺服器
npm run dev

安裝完成後會出現一段連結

打開後會出現一個這樣的完成頁面！

專案結構

pos-vue-refactor/
├─ package.json     # 專案「身分證」，記錄所有套件
├─ src/             # 程式碼存放的主要位置
│  ├─ main.js       # Vue 應用的「入口點」
│  ├─ App.vue       # 根組件（外殼）
│  ├─ assets/       # 靜態資源（CSS、Img）
│  ├─ components/   # 可複用的小組件（按鈕、卡片）
│  ├─ views/        # 頁面級組件（例如 CustomerManagementView.vue）
│  ├─ router/       # Vue Router 設定檔，管理頁面切換
│  └─ stores/       # Pinia 設定檔，管理全域狀態

有了這樣的結構，我們的程式碼不再是散落一地，而是依照責任分區，乾淨明瞭。

總結

今天，我們完成了以下目標：

建立了第一個 Vue 開發環境（使用 Vite），並了解了 Vue 專案的結構與用途。

到這裡，我們的開發環境終於搭建好了！

接下來 Day 8：[Componentの呼吸・壹之型] Button工坊 - 從零打造Button元件。心を燃やせ！🔥