---
tags: Vue 實戰班
---


## 第八週主線任務 - 最終挑戰
經過八週的學習，同學們已經準備邁向最終的試煉...

請整合這八週所學的觀念，完成一個電商作品（包含前後台），最終作業不提供範例程式碼，但提供網頁模版，如果對於 HTML、CSS 可選擇套用。

課程範例版型：
- https://hexschool.github.io/js-training-layout-1/
- https://hexschool.github.io/js-training-layout-2/

範例版型原始碼：
- https://github.com/hexschool/js-training-layout-1
- https://github.com/hexschool/js-training-layout-2

本週重點：完成屬於你自己的最終作品。

### 使用者故事

在先前的課程中，已經介紹了登入、產品列表的製作，請同學完成剩下功能，並整合至 Vue Cli 中

後台頁面包含（第七週作業）
- 登入頁面
- 產品列表
- 優惠券列表
- 訂單列表
- 圖片儲存列表

前台頁面包含
- 首頁
- 產品列表
- 單一產品頁面
- 品牌介紹
- 購物車頁面
- 購物確認頁面
- 購物完成頁

### 提交難度挑戰：

無論何總難度，都必須完成基本美感要求，請在提交時同時附註：

- 基礎挑戰：我要給「卡斯伯老師」批改
- 進階挑戰：我要給「俊儀老師」批改

如果你不打算進行畫面的審核，也可附註：我僅需要程式碼建議。

- LV1：使用課程範例版型完成最終作品
- LV2：使用自製版型完成最終作品
- LV3：選擇「俊儀老師」批改，完成最終挑戰

注意：
1. 為了讓同學可以做出好作品，本最終作業會退件多次（平均 3 ~ 5 次），請儘早提交。
2. 需確保作品可以正常運作，檢查可參考：https://hackmd.io/dkDHLDfNRmOdLaaL4N8t7w

### 繳交作業流程

1. 於 [試算表](https://docs.google.com/spreadsheets/d/1DOk5jCqnz-y_z6M_aFaoNn3n-ayheFhQ6h2LLDzYaXg/edit#gid=0
)中登記繳交狀況


2. 回程式勇者村 - 任務系統回報，並補上編號：https://rpg.hexschool.com/task/127/show

### 額外挑戰

本次最終作業額外挑戰包含：
- 參與 8/31 的線上

### 作業格式 & 常見 QA

- 為了批改順利，如果有忽略 .env 檔案，請在提交作業時補上個人 UUID 以便於助教們批改
- 請務必提交 Github 原始碼儲存庫 + Github Pages 頁面
- 繳交作業教學（僅能使用 GitHub Pages）：https://hackmd.io/@hexschool/HJDbvkFqU/%2FK6GUUl_pTRioN9ZpBCeqMQ