--- tags: Vue 直播班 - 2021 夏季班 --- # 第六堂：Vue Router 報到碼：HWQBHZbmwcn0 ## 課程提醒 - 本週日加碼 - 第六週作業說明 - 下午 13:30 至 16:00，伴你寫程式！ ### 課程獎勵說明： - 7/2 前 50%：超過 100 人挑戰成功，全班直播加碼授權一年 - 前完成課程報到 -> 第四週主線 - 7/9 前 60%：菁英班直播(兩個主題) + Kuro（Composition API, JS 核心觀念） - 完成課程報到 -> 第六週主線 或 第五週主線 + 心得牆 - 7/9 前 80%：菁英班錄影(包含前一梯的菁英直播 3 個主題) - 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆 - 100%：數位完賽獎狀 + 抽（008 天絕對看不完的 Vue.js 3.0 指南 3 本） - 加碼獎勵：參加線上發表會前 5 名報到 + 發表者（008 天絕對看不完的 Vue.js 3.0 指南 一本） ### 作業繳交說明 - 所有繳交期限 7/25 - **最終延長繳交條件**：7/25 前完整繳交，可再延長至 8/21 課程範例版型： - [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://rpg.hexschool.com/training/18/task?type=detail&id=184) ## 主線說明： - 為什麼要用 CLI - CLI 環境安裝與了解 - 路由介紹 ### 為什麼要用 CLI - 不需從零建構環境，幾個選項後快速開發 - 快速建立「應用服務」 -> 單頁式應用程式 - Router 管理由後端轉為前端 - 整合性的工具，開發更容易 - 從 CDN 改為 NPM 統一管理 ### CLI 環境安裝與了解 - 手動建置 - Babel - Router → **Use history mode for router? False** - CSS 預處理 → node sass - Linter → 請至少選一個：Airbnb 是最嚴格的，不熟悉的可以選另外兩個 - 新增專案，不保存預設 運行方式： - serve：運行開發環境 - build：編譯程式碼並釋出 資料夾結構說明： - public：公開的檔案資料夾，可以放入不會被編譯的內容，裡面除了 index.html 外，其他都是直接被搬移的 - src：主要的開發環境 ### Vue Cli 介面介紹 安裝插件： - Vue loading - vue axios - Bootstrap Sass @import '~bootstrap/scss/bootstrap'; ### 環境變數 [https://cli.vuejs.org/zh/guide/mode-and-env.html](https://cli.vuejs.org/zh/guide/mode-and-env.html) 1. 新增 .env 檔案 2. 加入變數，API 網址及 Path ### Router 說明：Vue Router 不一定要搭配 Cli https://next.router.vuejs.org/ 元件與頁面連結的關係表 - 路由是什麼 - 路由表 - 路由結構配置 → 基本頁面結構配置 - 配置 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 ### 本週作業 - [第六週主線任務：建立路由表](https://rpg.hexschool.com/training/18/task?type=detail&id=184) - 課後可參考章節：[Vue Router](https://courses.hexschool.com/courses/vue-2021/lectures/31862625)