---
# System prepended metadata

title: 第六週
tags: [Vue 直播班 - 2023 冬季班]

---

# 第六週

## **課程提醒**

1. 本週六加碼
    - 第 5 ~ 6 週作業說明
    - 下午 13:30 開始，伴你寫程式！
2. 在課程所提供的 API 中，請勿夾帶圖片（base64）
    - 圖片請用專屬的 Storage API 
4. 線上助教服務，春節持續帶你做作業（僅有 2/10 ~ 2/11 休息）
    > ![image](https://hackmd.io/_uploads/BkYxsb556.png)
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：主要的開發環境

![空白](https://hackmd.io/_uploads/S1QmIdcc6.png)


### 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

![空白](https://hackmd.io/_uploads/Sk0mUuqqp.png)


元件與頁面連結的關係表
![](https://i.imgur.com/4z7hz1v.png =400x)

- 路由是什麼
    - 路由表
- 路由結構配置 → 基本頁面結構配置
    - 配置 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

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

![空白](https://hackmd.io/_uploads/BJMaGF9ca.png)


## 補充：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

