iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

Nuxt 3 - 因為還不穩定,所以來踩地雷 系列

習慣 Vue 3 的寫法之後,就想嘗試使用 Nuxt 3 來處理 SSR(其實也可以用 Vite),但是 Nuxt 3 目前仍在 RC 版本,拿來正式專案上使用會有不小風險,利用這 30 天簡單的了解 Nuxt 3 使用方式,等穩定正式版上線後就能快速上手。

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

[Day21] 使用 Nuxt3 Content 建置一個部落格 - Sitemap

Sitemap 是 SEO 中的一個小環節,主要是讓 Google 能方便爬到所有的頁面資訊。 Sitemap 開始設定前,需要先安裝 sitemap 套件 n...

2022-10-06 ‧ 由 Genos 分享
DAY 22

[Day22] 使用 Nuxt3 Content 建置一個部落格 - 補充

今天來補充前面幾天沒提到的一些用法 檔案名稱的運用 加上順序編號 前面介紹的 navigation 可以用來生成導覽列,但是沒辦法控制順序,可以透過編號命名的方...

2022-10-07 ‧ 由 Genos 分享
DAY 23

[Day23] UnoCSS 介紹與 Nuxt3 安裝配置

在開始介紹前,如果沒有閱讀過 UnoCSS 作者 Anthony Fu 的這篇文章 重新构想原子化 CSS,即使你已經對 TailwindCSS、WindiCS...

2022-10-08 ‧ 由 Genos 分享
DAY 24

[Day24] UnoCSS - Preset

今天介紹 UnoCSS 中核心的設定:Presets UnoCSS 的功能是非常彈性的,需要的時候再引用 Preset 即可,而且強大之處就是可以配置成模擬 T...

2022-10-09 ‧ 由 Genos 分享
DAY 25

[Day25] UnoCSS - Preset-attributify

今天繼續介紹 UnoCSS 提供的各種 Preset Preset-attributify Preset-attributify 可以用 attribute 的...

2022-10-10 ‧ 由 Genos 分享
DAY 26

[Day26] UnoCSS - Preset-icons

今天介紹 UnoCSS 的精華之一,Preset-icons 可以用 class name 來快速套用各種 icon,大幅減少尋找、引用 icon 的時間,是超...

2022-10-11 ‧ 由 Genos 分享
DAY 27

[Day27] UnoCSS - Preset-web-fonts

今天介紹的是 UnoCSS 管理字型的工具 - [Preset-web-fonts] 目前這個套件還不是很完善,主要支援 Google Fonts 和 bunn...

2022-10-12 ‧ 由 Genos 分享
DAY 28

[Day28] UnoCSS - Preset-typography、tagify、rem-to-px

今天介紹最後三個使用機會較低的 UnoCSS 官方 Presets,其他的社群貢獻 Presets 可以在 官方 Github 查看,有的可以支援 gradie...

2022-10-13 ‧ 由 Genos 分享
DAY 29

[Day29] Nuxt3 圖片優化 - nuxt-img

有和 SEO 打交道的朋友們應該對 Web Vitals 網站體驗指標不陌生,其中包含了 LCP、FID、CLS 三大評分,今天參考了 How to use N...

2022-10-14 ‧ 由 Genos 分享
DAY 30

[Day 30] 發掘更多 Nuxt3 生態的工具 - Nuxt Module

心得 終於到了最後一天,一開始只是因為公司使用 Vue3,遇到需要 SEO 的案子,所以摸了還未進入正式版的 Nuxt3,實際上沒有詳細規劃的情況下要寫滿30天...

2022-10-15 ‧ 由 Genos 分享