修改 views/uBikeTable/uBikeTable.vue
檔案,並完成以下功能:
- 將搜尋的部分拆出來變成子元件
views/uBikeTable/components/search.vue
- 將表格的部分拆出來變成子元件
views/uBikeTable/components/uBikeTable.vue
- 將分頁的部分拆出來變成子元件
views/uBikeTable/components/pagination.vue
- 再將它們組合起來
- 修改
views/MatchGame/MatchGame.vue
- 點擊卡片,卡片會翻開
- 點擊兩張不同的卡片,卡片會翻回去
- 點擊兩張相同的卡片,卡片會消失
- 當所有卡片都消失時,顯示「恭喜破關,再來一局?」的對話框,按下確定後重置遊戲
- 將卡片部分獨立抽出為 Card.vue 元件
- 成品參考: https://kuro.tw/vue-card-match-game/
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm install
npm run dev
npm run build