iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
自我挑戰組

Vue 元素美麗的轉變:前端小萌新勇闖套件的魔法陣 系列

學習 Vue3 的過程也發現套件其實是最好提高開發效率,節省開發者的時間和工作量,當然因應需求套件客製化也相對被提高,這次想分享自己在使用套件過程中遇到的阻礙和挑戰,也展現套件的魔法,不得不說,開發套件的人真的超級厲害。

因為在 vue 環境使用,所以一開始會先說明怎麼安裝 vite,然後再一一分享各個套件,其中對於日常、工作上比較常用的會再特別說自己留下的痕跡和踩過的雷。

最後感謝這個平台讓我除了「學習如何學習」外,還能分享給需要的人。

鐵人鍊成 | 共 30 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 11

時間掌控者 - Dayjs

Dayjs 是一個 JavaScript 函式庫,用於處理日期和時間。它提供了簡單、易於使用的 API,使日期和時間操作更加直觀和方便。另外,Dayjs 有內建...

2023-09-11 ‧ 由 kuku 分享
DAY 12

函式萬能包 - xe-utils

進入 Vue 的世界發現很多好神奇的套件,xe-utils 是我使用後最愛的其中之一,只需要會呼叫使用他,就可以達到想要的邏輯效果,當然也必須要懂些 JavaS...

2023-09-12 ‧ 由 kuku 分享
DAY 13

正在載入中 - vue-loading-overlay (上)

通常進入一個網頁如果轉圈時間超過一定的 3 秒,很容易讓使用者體感下降,但是有些資料載入就是需要一些時間,這時候如果有一些 loading 效果告知使用者,我有...

2023-09-13 ‧ 由 kuku 分享
DAY 14

正在載入中 - vue-loading-overlay (下)

今天要來分享應用,前面主要使用套件 vue-loading-overlay ,現在要來說說如果想要客製化,或是運用前面介紹的樣式框架內建 loading 可以怎...

2023-09-14 ‧ 由 kuku 分享
DAY 15

溫馨的提示 - Sweetalert2

製作專案的時候,如果可以跟使用者互動,或許對於彼此的信任度有加分效果,這時候提示視窗是一個很好的選擇!例如:進入活動首頁可以用彈窗說明活動內容折扣方案,引起使用...

2023-09-15 ‧ 由 kuku 分享
DAY 16

圖標的巨匠 - Font Awesome (上)

介紹到今天,接下來要進入畫面很常用到的 icon ,就像昨天介紹的 Sweetaler2 也有自己內建 icon 來表達無聲的語言。用生活化一點的例子說明:看到...

2023-09-16 ‧ 由 kuku 分享
DAY 17

圖標的巨匠 - Font Awesome (下)

Font Awesome 文件提供很多可以客製化的方法,今天來分享一下比較常使用的功能。 #應用 - icon 動畫 在官網中的 STYLE → Animati...

2023-09-17 ‧ 由 kuku 分享
DAY 18

奇幻走馬燈 - Swiper (上)

進入畫面如果讓使用者可以看到目前活動的海報或是主打商品,會很容易吸引使用者目光;就像是受到極度驚嚇的瞬間,腦袋會出現的連續畫面,再次清醒都會讓人印象深刻,Swi...

2023-09-18 ‧ 由 kuku 分享
DAY 19

奇幻走馬燈 - Swiper (下)

前面安裝後,接著就是讓我們的網頁動起來,只是今天的應用有個坑在最後一部分會特別提到,希望對夥伴們未來使用的過程中可以試試看能不能避免或是更客製化些,事不宜遲,我...

2023-09-19 ‧ 由 kuku 分享
DAY 20

畫面動起來 - AOS (Animate on Scroll)

昨天介紹 Swiper 但是感覺少了什麼,除了一開始讓人看到輪播已經有點動起來的感覺,就像 Garmin 台灣的網頁,很清楚讓消費者知道依照自己需求選擇產品。...

2023-09-20 ‧ 由 kuku 分享