# 第八週

課程範例版型：

* [https://hexschool.github.io/js-training-layout-1/](https://hexschool.github.io/js-training-layout-1/)
* [https://hexschool.github.io/js-training-layout-2/](https://hexschool.github.io/js-training-layout-2/)

範例版型原始碼：
* [https://github.com/hexschool/js-training-layout-1](https://github.com/hexschool/js-training-layout-1)
* [https://github.com/hexschool/js-training-layout-2](https://github.com/hexschool/js-training-layout-2)

### 本週提醒

- <a href="https://rpg.hexschool.com/#/training/12062117482845197190/board/content/12062117482845197203_12062117482845197214?tid=12062117482845168350" target="_top">第八週主線任務：最終任務</a>
- 心得牆開放
- [心得牆素材圖](https://hackmd.io/MbLP-CigS72ovX_ATNgzrw?view)
- [獎勵](https://rpg.hexschool.com/#/training/12062117482845197190/board/content/12062117482845197202_12062117482877498405)
- [心得回饋表單](https://forms.gle/DJaRThivvmH7rLe77)
- 線上助教服務 至 3/8

### 課後測驗：

- 測驗題：https://casper-wang.notion.site/fc7861d7c63f42099f0f6b0e76b5128c?pvs=4
- 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=895249498

### 課程獎勵說明：

- 2/8 **前 50%：超過 150 人挑戰成功，全班錄影直播加碼授權 6 個月**
- ex: 前完成課程報到 -> 第四週主線
- 2/18 **前 60%：超過 120 人挑戰成功，全班錄影直播加碼授權 6 個月（可累加）**
- ex: 前完成課程報到 -> 第五週主線
- 2/25 前 70%：菁英班錄影
- ex: 完成課程報到 -> 第六週主線 或 第五週主線 + 心得牆
- 3/3 前 80%：「星巴克雙人拿鐵兌換券」 或 Udemy 課程自選 (500 元以下) 抽 20 名
- ex: 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 3/24 100%：數位完賽獎狀
- 加碼獎勵：完成專題 / 最終作業並審核通過，加碼抽 （無痛提升 JavaScript 面試力：8 名）
- 加碼獎勵：2024/12/31 前找到工作、轉職，前端、後端、全端、網頁設計師求職成功，送求職祝賀獎學金 $1500，薪資存摺有顯示匯款薪水記錄。
- 學員須完成訪談：可參考 [本文](https://chalk-freedom-ec6.notion.site/c30efbf00a854768814de58ee963b13a)

## 作業繳交說明

- 所有繳交期限 3/24
- **最終延長繳交條件**：3/24 前完整繳交（沒有被直接退件），可延長批改至 4/14
- 直接退件的原因：
- 助教下載後，`npm run dev` 無法運行
- 作品不完整（作品內容有缺、有大量假字）

## 本日重點

- 前台示範
- 前台整合 Pinia 進行跨元件溝通

### 使用資源

- 六角團隊提供的 Vite 模板（含 ESLint）：
- Standard 風格（較易）：https://github.com/hexschool/vite-template
- Airbnb 風格（具挑戰性）：https://github.com/hexschool/vite-template/tree/airbnb

### 今日開發流程

- 環境建立（套件、環境變數、Sass）
- 版型二選一套用示範
- 頁面拆分技巧
- 產品列表、單一產品
- 分類產品動態路由
- Pinia，跨元件傳遞
- Pinia CDN 版起手教學文件：[https://hackmd.io/gPZNP9r7QXqDOvS6UEgZxw](https://hackmd.io/gPZNP9r7QXqDOvS6UEgZxw)

## 作業說明

- <a href="https://rpg.hexschool.com/#/training/12062117482845197190/board/content/12062117482845197203_12062117482845197214?tid=12062117482845168350" target="_top">第八週主線任務：最終任務</a>