# 第六週

## **課程提醒**

1. 本週六加碼
- 第 5 ~ 6 週作業說明
- 下午 13:30 開始，伴你寫程式！
2. 在課程所提供的 API 中，請勿夾帶圖片（base64）
- 圖片請用專屬的 Storage API
4. 線上助教服務，春節持續帶你做作業（僅有 2/10 ~ 2/11 休息）
> 
5. 作業批改、專題助教過年休息時間
- 作業批改助教：除夕 ~ 初二
- 專題教練：除夕 ~ 初五
6. 更多獎勵：https://rpg.hexschool.com/training/39/show?embedhm=vc4MXchKTTCX0Q0iCZYiWQ

### **課程獎勵說明：**

- 2/8 **前 50%：超過 150 人挑戰成功，全班錄影加碼授權 6 個月**
- ex: 完成課程報到 -> 第四週主線
- 2/18 **前 60%：超過 120 人挑戰成功，全班錄影加碼授權 6 個月（可累加）**
- ex: 完成課程報到 -> 第五週主線

#### 上週課前測驗

- https://casper-wang.notion.site/9ad0e973288743368c1b441b198976a2?pvs=4

- https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=1397510807

## 本週作業

- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=375" target="_top">第六週主線任務：建立路由表</a>
- 心得牆開放

#### 課程範例版型：

- [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/)

## 主線說明：

- 為什麼要用 Vite
- Vite 環境安裝與了解
- 路由介紹

### 為什麼要用 Vite

- 不需從零建構環境，幾個選項後快速開發
- 快速建立「應用服務」 -> 單頁式應用程式
- Router 管理由後端轉為前端
- 整合性的工具，開發更容易
- 從 CDN 改為 NPM 統一管理

### Vite 環境安裝與了解

- $ npm create vue@latest
- 手動建置
✔ Project name: …
✔ Package name: …
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

運行方式：

- dev：運行開發環境
- build：編譯程式碼並釋出

資料夾結構說明：

- public：公開的檔案資料夾，可以放入不會被編譯的內容，裡面除了 index.html 外，其他都是直接被搬移的
- src：主要的開發環境


### Vite Composition API 轉 Option API

1. 去掉 `<script>` setup 字眼
2. 加入以下就能開始撰寫

export default {
  ...
};

### Vite 套件介紹

安裝插件：
- Vue loading: https://github.com/ankurk91/vue-loading-overlay
- npm install vue-loading-overlay@^6.0
- 可以在全域使用 loading 元件
- vue axios: https://www.npmjs.com/package/vue-axios
- 可以在 this 中直接使用 axios 方法
- Bootstrap: https://www.npmjs.com/package/bootstrap
- 增加 Sass 環境 `npm add -D sass`
- 自定義樣式
- https://getbootstrap.com/docs/5.3/customize/sass/

@import 'bootstrap/scss/bootstrap.scss';

### 環境變數

https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes

1. 新增 .env 檔案
2. 加入變數，API 網址及 Path

### Router


元件與頁面連結的關係表

- 路由是什麼
- 路由表
- 路由結構配置 → 基本頁面結構配置
- 配置 router 檔案
- router-view 視圖
- router-link 連結方式
- 準備路由架構表
- 巢狀路由 → 巢狀連結
- 動態路由 → 動態參數
- this.$router.push(), back()
- default link

示範開發

1. 請先定好完整路由架構
2. 將**路由配置對應所有頁面，開發順序：**
1. 先開頁面檔案
2. 撰寫路由配置
3. 補上 router-link
- 前端頁面
- 首頁 /
- 產品 /products → 產品列表
- 產品 /product/:id → 動態路由
- 購物車 /cart
- 登入頁面 /login
- **需驗證頁面：管理者端頁面** /admin/ —> 巢狀路由
- 產品 /products
- 訂單列表 /orders
- 優惠券... /coupons

路由架構
- 首頁
- 產品列表
- 產品單一頁面
- 購物車
- 結帳頁面...
- 登入
- 後台
- 產品管理列表
- 優惠券列表
- 訂單列表


## 補充：pathMatch

404 頁面
https://router.vuejs.org/guide/essentials/dynamic-matching.html#Catch-all-404-Not-found-Route

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/39/task?type=detail&id=375" target="_top">第六週主線任務：建立路由表</a>
- 作業範例：https://hexschool.github.io/live-vue3-training-chapter-2023/
- 團隊任務：
- https://rpg.hexschool.com/training/39/show?embedhm=HYFmNAINSJOTYdJ2bjkPQA
- 課後測驗：
- 測驗題：https://casper-wang.notion.site/7555488641404d03a1b697dae6e5b2d5?pvs=4
- 回答位置：https://docs.google.com/spreadsheets/d/1mz3yb8wwM316llf4w9PoDlmeb0iMmuVxBZRmf_MzNvo/edit#gid=1397510807
- 六角團隊提供的 Vite 模板（含 ESLint）：
- Standard 風格（較易）：https://github.com/hexschool/vite-template
- Airbnb 風格（具挑戰性）：https://github.com/hexschool/vite-template/tree/airbnb