iThome 2022 鐵人賽 - Nuxt 3 學習筆記

專案簡介

大家好,我是 Ryan,今年第一次參與 2022 iThome 鐵人賽,主題為「Nuxt 3 學習筆記」,這裡將放置鐵人賽中的系列文章連結與使用到的範例程式碼,如果對這個 Nuxt 3 系列感興趣,可以至我的系列文章訂閱接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參賽資料

組別

Modern Web

主題

Nuxt 3 學習筆記

說明

在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境,為了解決該情境問題,你可能會找到使用 Vite 做預渲染或其他方式,Nuxt 3 也是其中一個解決方案,且有更多強大的功能,目前 Nuxt 3 正在 RC 階段,但已經可開始嚐鮮踩雷,等穩定版正式發布後能更快地上手。 本系列會著重在 Nuxt 3 的特色與功能學習,所以你可能需具備些 Vue 3 基礎,我將從搭建 Nuxt 3 開發環境、頁面路由與佈局一直到使用 Nuxt 3 建立 SEO 所需的資訊做些筆記及介紹,讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG,進而解決 Vue 3 SPA 不好做 SEO 的問題。

系列文章

[Day 01] 淺談 CSR、SSR 與 SSG
[Day 02] Nuxt 3 介紹
[Day 03] Nuxt 3 - 使用 nuxi 建立第一個專案
[Day 04] Nuxt 3 + TypeScript + ESLint + Prettier 環境建置
[Day 05] Nuxt 3 如何使用 Tailwind CSS
[Day 06] Nuxt 3 目錄結構與自動載入 (Auto Imports)
[Day 07] Nuxt 3 頁面 (Pages) 與路由 (Routing)
[Day 08] Nuxt 3 布局模板 (Layouts)
[Day 08] Nuxt 3 元件 (Components)