iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
影片教學

Nuxt 3 快速入門 系列

在使用 Vue 3 開發網站可能會面臨需要做 SEO 的情境,為了解決該情境問題,你可能會找到使用 Vite 做預渲染或其他方式,Nuxt 3 也是其中一個解決方案,且有更多強大的功能,目前 Nuxt 3 已是穩定版本,你可以使用它來實現 SSR 來解決 SEO 痛點。
本系列以影片教學搭配筆記的方式來快速入門 Nuxt 3,所以你可能需具備些 Vue 3 基礎,我將從搭建 Nuxt 3 開發環境、頁面路由與佈局一直到使用 Nuxt 3 建立 SEO 所需的資訊做些分享及介紹,讓你有個概念並嘗試用 Nuxt 3 來做 SSR 或 SSG,進而解決 Vue 3 SPA 不好做 SEO 的問題。

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

[影片教學] Nuxt 3 - 使用 nuxi 建立第一個專案

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 環境準備 Node.js - 建議安裝 v18 版本以上VS...

2023-09-16 ‧ 由 Ryan 分享
DAY 2

[影片教學] Nuxt 3 - nuxi (Nuxt CLI) 指令介紹

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 前置作業 為了確保 Nuxt CLI 不存在快取或版本上的差...

2023-09-17 ‧ 由 Ryan 分享
DAY 3

[影片教學] Nuxt 3 + ESLint + Prettier 環境建置

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 設置 ESLint 環境 安裝 ESLint 套件 npm...

2023-09-18 ‧ 由 Ryan 分享
DAY 4

[影片教學] Nuxt 3 安裝與使用 Tailwind CSS

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 設置 Tailwind CSS 環境 安裝 Nuxt Tai...

2023-09-19 ‧ 由 Ryan 分享
DAY 5

[影片教學] Nuxt 3 目錄結構與自動載入 (Auto Imports)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 專案目錄結構 .nuxt 目錄 開發環境下由 Nuxt 產生...

2023-09-20 ‧ 由 Ryan 分享
DAY 6

[影片教學] Nuxt 3 頁面 (Pages) 與路由 (Routing)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立第一個路由頁面 在 pages 目錄下建立一個檔案 ./...

2023-09-21 ‧ 由 Ryan 分享
DAY 7

[影片教學] Nuxt 3 布局模板 (Layouts)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立第一個布局模板 在 layouts 目錄下建立一個檔案...

2023-09-22 ‧ 由 Ryan 分享
DAY 8

[影片教學] Nuxt 3 元件 (Components)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立與使用第一個元件 在 components 目錄下建立一...

2023-09-23 ‧ 由 Ryan 分享
DAY 9

[影片教學] Nuxt 3 組合式函式 (Composables)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立與使用組合式函式 在 composables 目錄下建立...

2023-09-24 ‧ 由 Ryan 分享
DAY 10

[影片教學] Nuxt 3 插件 (Plugins)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立插件來整合 Vue 3 套件 安裝 Vue Scroll...

2023-09-25 ‧ 由 Ryan 分享