---
tags: Vue 直播班 - 2022 冬季班
---

# 第八週

課程範例版型：

* [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/33/task?type=detail&id=329" target="_top">第八週主線任務：最終任務</a>
- 心得牆開放
- [心得牆素材圖](https://hackmd.io/MbLP-CigS72ovX_ATNgzrw?view)
- [加碼專區](https://rpg.hexschool.com/training/33/show?embedhm=iQ0jOThbQOiuVqNjBmX9rQ)
- [心得回饋表單](https://forms.gle/2ZHMtNQ4r1ZPtStC8)
- 線上助教服務

### 團隊任務

https://bejewled-air-4cb.notion.site/3fe5fb56634541c1bda25e58db317b01

### 課程獎勵說明：

- 2/24 **前 50%：超過 150 人挑戰成功，全班錄影直播加碼授權一年**
- ex: 前完成課程報到 -> 第四週主線
- 3/3 前 60%：菁英班直播一場 - 「Vue 思維與 React 思維」
- ex: 完成課程報到 -> 第五週主線 或 第四週主線 + 心得牆
- 3/3 前 80%：菁英班錄影(包含前一梯的菁英直播 6 個主題)
- ex: 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 3/22 100%：數位完賽獎狀
- 加碼獎勵：參加線上發表會並發表者，送 Udemy 課程自選 (500 元以下) / 或自選網址一年約 (500 元以下)
- 加碼獎勵（新）：完成專題並審核通過，加碼抽 （無痛提升 JavaScript 面試力：8 名）

## 作業繳交說明

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

## 本日重點

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

### 今日開發流程

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

## 作業說明

- <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=329" target="_top">第八週主線任務：最終任務</a>