你請 AI 幫你做一個網站，它生出了一堆檔案。你看著螢幕上的 src、components、utils、hooks... 完全不知道這些是什麼、該放什麼。
這篇文章幫你一次搞懂，以後跟 AI 協作時，你就知道它在做什麼。
🎯 先搞懂一件事：前端 vs 後端
| 前端 Frontend | 後端 Backend | |
|---|---|---|
| 是什麼 | 使用者看到的畫面 | 處理資料、邏輯的伺服器 |
| 在哪裡跑 | 使用者的瀏覽器 | 你的伺服器（或雲端） |
| 常用技術 | HTML、CSS、JavaScript React、Vue、Svelte | Node.js、Python、Go Express、FastAPI、Laravel |
| 主要工作 | 顯示畫面、處理互動 | 存取資料庫、驗證身份、API |
很多小專案是「純前端」，不需要後端。如果你的工具不用存資料、不用登入，純前端就夠了。
📁 前端專案常見結構
不管你用 React、Vue 還是 Svelte，結構都長得差不多：
my-project/
├── public/ # 靜態檔案（圖片、favicon）
├── src/ # 原始碼都在這
│ ├── assets/ # 圖片、字型、CSS
│ ├── components/ # 可重用的元件
│ ├── views/ 或 pages/ # 頁面
│ ├── hooks/ 或 composables/ # 邏輯抽離
│ ├── utils/ # 工具函數
│ ├── stores/ # 狀態管理
│ ├── services/ 或 api/ # API 呼叫
│ ├── App.vue 或 App.jsx # 根元件
│ └── main.js # 入口點
├── index.html # HTML 模板
├── package.json # 專案設定、依賴
└── vite.config.js # 建構工具設定每個資料夾是做什麼的？
| 資料夾 | 放什麼 | 範例 |
|---|---|---|
components/ | 可重用的 UI 元件 | Button.vue、Modal.vue、Card.vue |
views/ | 完整的頁面 | HomePage.vue、LoginPage.vue |
utils/ | 工具函數（不含 UI） | formatDate.js、validator.js |
hooks/ | 可重用的邏輯（React） | useAuth.js、useFetch.js |
composables/ | 可重用的邏輯（Vue） | useCounter.js、useStorage.js |
stores/ | 全域狀態管理 | userStore.js、cartStore.js |
services/ | API 呼叫封裝 | authService.js、productApi.js |
assets/ | 靜態資源 | logo.png、styles.css |
🔧 後端專案常見結構
如果你的專案需要資料庫、會員系統、或複雜的業務邏輯：
my-backend/
├── src/
│ ├── controllers/ # 處理請求、回應
│ ├── services/ # 業務邏輯
│ ├── models/ # 資料模型（資料庫結構）
│ ├── routes/ # API 路由定義
│ ├── middlewares/ # 中間件（驗證、日誌）
│ ├── utils/ # 工具函數
│ ├── config/ # 設定檔
│ └── app.js # 應用程式入口
├── tests/ # 測試檔案
├── package.json
└── .env # 環境變數（密碼、API Key）每層負責什麼？
使用者請求
↓
[Routes] 路由 → 決定這個請求要給誰處理
↓
[Controllers] 控制器 → 接收請求、呼叫 Service、回傳結果
↓
[Services] 服務層 → 業務邏輯（計算、判斷、組合資料）
↓
[Models] 模型層 → 跟資料庫溝通
↓
資料庫這種分層的好處是：每層只做一件事，改 A 不會壞 B。
📝 命名規範速查表
命名一致，專案才不會亂。
| 類型 | 規範 | 範例 |
|---|---|---|
| 資料夾 | kebab-case 或 lowercase | user-profile/、utils/ |
| 元件檔案 | PascalCase | UserCard.vue、LoginForm.jsx |
| 一般 JS 檔案 | camelCase 或 kebab-case | formatDate.js、auth-service.js |
| 變數/函數 | camelCase | userName、getUserList() |
| 常數 | UPPER_SNAKE_CASE | MAX_RETRY、API_BASE_URL |
| CSS class | kebab-case | user-card、btn-primary |
🎨 常見框架的慣例
React
src/
├── components/ # UI 元件
├── hooks/ # 自訂 Hook（useXxx）
├── pages/ # 頁面（如果用 Next.js）
├── context/ # React Context
├── store/ # Redux/Zustand
└── utils/ # 工具函數Vue
src/
├── components/ # UI 元件
├── composables/ # 組合式函數（useXxx）
├── views/ # 頁面
├── stores/ # Pinia 狀態管理
├── router/ # Vue Router 設定
└── utils/ # 工具函數Node.js + Express
src/
├── routes/ # API 路由
├── controllers/ # 請求處理
├── services/ # 業務邏輯
├── models/ # 資料模型
├── middlewares/ # 中間件
└── config/ # 設定💡 給新手的五個建議
1. 一開始就請 AI 建好結構
請幫我建立一個 Vue 3 + Vite 專案，包含：
- components/ 放可重用元件
- views/ 放頁面
- composables/ 放邏輯
- utils/ 放工具函數
- stores/ 放 Pinia 狀態管理
請先建好資料夾結構和範例檔案2. 每次加功能前，問 AI 該放哪裡
我想加一個「格式化日期」的函數，應該放在哪個資料夾？AI 會告訴你放 utils/，而不是隨便塞在某個元件裡。
3. 元件拆分原則：能重用就拆
如果一段 UI 會用超過一次 → 拆成元件放 components/
如果一段邏輯會用超過一次 → 拆成函數放 utils/ 或 composables/
4. 不要什麼都塞在一個檔案
如果一個檔案超過 300 行，就該考慮拆分了。
請 AI 幫你：
這個檔案太長了，請幫我拆分成更小的模組，
並說明每個模組的職責5. 建立 RULES.md 跟 AI 約定
在專案根目錄建一個 RULES.md，寫下你的架構規則：
# 專案架構規範
## 檔案結構
- 元件放 src/components/
- 頁面放 src/views/
- 工具函數放 src/utils/
- API 呼叫放 src/services/
## 命名規則
- 元件用 PascalCase：UserCard.vue
- 函數用 camelCase：formatDate()
- 資料夾用 kebab-case：user-profile/
## 新增檔案前
請先確認要放在正確的資料夾
如果不確定，先問我每次跟 AI 對話時：
請先讀取 RULES.md，按照規範幫我加功能🚫 常見錯誤
| 錯誤 | 正確做法 |
|---|---|
| 所有程式碼塞在一個檔案 | 依功能拆分到對應資料夾 |
| 元件裡直接寫 API 呼叫 | API 呼叫放 services/，元件只負責顯示 |
| 到處複製貼上相同程式碼 | 抽成共用函數放 utils/ |
| 檔案命名不一致 | 統一用 PascalCase（元件）或 camelCase（函數） |
| 沒有 .gitignore | 排除 node_modules、.env、dist |
📋 快速檢查清單
做完專案，用這個清單檢查：
- ☐ 檔案結構清楚，有 components/、views/、utils/ 等分類
- ☐ 命名一致（PascalCase / camelCase / kebab-case）
- ☐ 沒有超過 300 行的巨大檔案
- ☐ 重複的程式碼有抽成共用
- ☐ API 呼叫集中管理，不是散落各處
- ☐ 有 .gitignore 排除不該上傳的檔案
- ☐ 有 README.md 說明如何執行
結語
架構不是為了讓事情變複雜，而是讓專案長大時不會失控。
一開始就建好結構，跟 AI 約定好規則，你會發現：
- 找東西變快了
- 改功能不會壞掉其他地方
- AI 也能更準確地幫你加功能
記住這句話：
花 10 分鐘建好架構，省下 10 小時除錯。
從下一個專案開始，先建結構、再寫程式。