2025-02-15-目錄分曾及模組化

專業開發的「模組化」與「目錄分層」習慣。你可以這樣整理你的目錄：

├── javascript_8
│   └── components
│       ├── Calendar.vue
│       ├── CountryInfo.vue
│       ├── Notes.vue
│       ├── SplitBill.vue
│       ├── Stopwatch.vue
│       ├── WeatherQuery.vue
│       ├── weightTrackerApp.vue
│       └── utils
│           └── weatherApi.js

---

✅ 優點：

1. 清楚分工：
   components/ 放畫面元件，components/utils/ 放邏輯模組或工具函式（像 API 封裝、資料轉換等）。

2. 未來可擴充：
   若你之後有更多 API、轉換工具（如金額格式、日期處理），都能集中放在 utils。

3. 容易導入測試或重用：
   utils/weatherApi.js 這種純 JavaScript 函式，也容易做單元測試，或其他元件使用。

---

🔧 接下來的步驟建議：

1. 建立檔案：
   src/lily_learning/javascript_8/components/utils/weatherApi.js

2. 寫一個封裝好的函式（稍後我可以幫你一步步寫）

3. 在 WeatherQuery.vue 中這樣引入：

   import { fetchWeatherData } from './utils/weatherApi.js'

---

❓補充：為什麼放在 components 裡面？

因為你的學習專案目前是放在：

src/lily_learning/javascript_8/components/

為了不要跨太多層目錄（避免 ../../../utils 這種麻煩的引入），把 utils 放在這一層是很實用、易管理的選擇。
等你未來做更大型的專案，再把共用的工具抽到 src/utils/ 或 src/composables/ 等全局目錄。

---