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

### 本週作業

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

### 加碼直播 - 第六週作業解說（老婆大人發火啦，最後一次）

直播時間：2/12(日) 下午 13:30

時長：可能約 2 小時

### 上一週的團隊作業討論：

https://bejewled-air-4cb.notion.site/cc157776b9c240819c178ec45930a95f

## 主線說明：

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

### 為什麼要用 Vite

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

### Vite 環境安裝與了解

- 手動建置
- Select a framework: › Vue
- 👉 Select a variant: › Customize with create-vue
- 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

運行方式：

- 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.2/customize/sass/

@import 'bootstrap/scss/bootstrap';

### 環境變數

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://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes

## 作業說明

- 本週作業：
- <a href="https://rpg.hexschool.com/training/33/task?type=detail&id=327" target="_top">第六週主線任務：建立路由表</a>
- 團隊任務：
- https://rpg.hexschool.com/training/33/show?embedhm=91uyX4KDSLa7IOdLL1H5Tg