---
tags: vue 直播班 - 2022 冬季班
---
# 第七週團隊任務 - VUE 班 6 組
> 討論日期及時間 > 2023/02/18 21:00-21:00
>
**組員參與名單(06 / 10)：**
- [x] christina#6185
- [ ] hungya#0773
- [x] yuyu#6310
- [x] Potatolee#7749
- [x] Tuhacrt#0008
- [ ] 灰塵貓#7994
- [x] Wei#2330
- [ ] Keith 宇凡#3890
- [ ] 阿仁#0914
- [x] 阿鑫#4346

## 挑戰一：專題的延伸技法、套件

最終專題中的可以自己想像許多技巧加入，以下是課程中會介紹的技巧以及範例：

- 關於/品牌/產品介紹…：[https://hoongyuu.github.io/Cheeto-s-Wine/#/intro](https://hoongyuu.github.io/Cheeto-s-Wine/#/intro)
- 部落格/文章：[https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist](https://bear-luo.github.io/OpenseasonWeb/#/openseason_home#newslist)
- 分類：[https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=城市導覽](https://vvvvvvii.github.io/tasteof/dist/#/product_list?search=%E5%9F%8E%E5%B8%82%E5%B0%8E%E8%A6%BD)
- 延伸產品：[https://char849.github.io/vue3-week8a-main/#/course](https://char849.github.io/vue3-week8a-main/#/course)
- 搜尋：[https://kevinhes.github.io/finalworkvue2022/#/](https://kevinhes.github.io/finalworkvue2022/#/)
- 優惠券發放活動：[https://nighthree.github.io/ChocolateShop/#/coupon](https://nighthree.github.io/ChocolateShop/#/coupon)
- 我的最愛：[https://jordan-ttc-design.github.io/fine-job/#/](https://jordan-ttc-design.github.io/fine-job/#/)
- 一堆動態效果：[https://huan5678.github.io/chill-bar/#/](https://huan5678.github.io/chill-bar/#/)

團隊成員可以一同討論，還有什麼前端技巧或套件可以加入到專題網站之中，範例：

- fullpage 滿版滾動：
- 套件：https://github.com/alvarotrigo/fullPage.js/
- 範例：https://alvarotrigo.com/fullPage/#page1

答：

> [Vue Awesome Paginate](https://www.npmjs.com/package/vue-awesome-paginate?ref=madewithvuejs.com)
> Pagination套件

> [primevue](https://primevue.org/)
> vite vue3 可以用的 UI framework ，有許多後台管理可用的components

> [V-Calendar](https://vcalendar.io/https://vcalendar.io/)
> An elegant calendar and datepicker plugin for Vuejs.

> [ShapesSlideshow](https://tympanus.net/Development/ShapesSlideshow/index.html)
> 輪播套件

> [放鞭炮的效果](https://www.youtube.com/watch?v=x8WW0DDXZ4w&list=PL55_F8KHBnb05AtsDlQUTuM5NX5NN-22H&index=34&t=417s )
> Add AMAZING Animations with LottieFiles

> [vuetify](https://vuetifyjs.com/en/)
> vue3 可以用的 UI framework

> [SpinKit](https://tobiasahlin.com/spinkit/)
> loading 動畫
> Simple loading spinners animated with CSS.

## 挑戰二：

完成團隊挑戰：https://bejewled-air-4cb.notion.site/3fe5fb56634541c1bda25e58db317b01

填寫表單：https://docs.google.com/spreadsheets/d/1JzlSExkKlN3-be11TqMb3RoTZ6y8zCkL70UUW7HWdl8/edit?usp=sharing

答：

| 題目 | 答案 | 正解及備註 |
| -------- | -------- | -------- |
| 題目01 | 3 | 3 |
| 題目02 | 1 | 1 |
| 題目03 | 3 | 3 |
| 題目04 | 2 | 2 |
| 題目05 | 2 | 2 Await不能用setTimeout()|
| 題目06 | 2 | 2 |
| 題目07 | 1 | 1 |
| 題目08 | 2 | 2 |
| 題目09 | 4 | 4 |
| 題目10 | 2 | 2 js縮排2個space |

#### 8. 如果要避免元件卸載觸發 unMounted 生命週期，可以怎麼做
> 2. 使用 keep-alive 包覆元件

## 討論紀錄



---
<!-- https://hackmd.io/91uyX4KDSLa7IOdLL1H5Tg?both -->

> 謝謝今天有參與的同學們 :100:
>
<iframe src="https://giphy.com/embed/eFdRmrg7y604pPLl7g" width="384" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/pomeranian-pom-munjo-eFdRmrg7y604pPLl7g">via GIPHY</a></p>