iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

Nuxt 3 實戰筆記 系列

Nuxt 3 發布穩定版本已經過了將近一年,功能與版本也積極的在創新與維護,如果你還苦惱 Vue 或其他前端框架不好做 SEO 的問題,你一定要試試 Nuxt 3 帶給你前所未有的開發體驗,初次使用 Nuxt 3 的你也可以參考我的其他系列文章學習基礎概念,若你已經熟悉 Nuxt 3 所帶給你的開發體驗,在 SSR 與 SSG 及SEO 搜尋引擎最佳化中也已有了基本的概念,你可以藉由本系列更深入的暸解 Nuxt 3。
本系列著重在探索 Nuxt 3 更多的功能特性與模組,我將介紹 Nuxt CLI 、視覺化工具、SEO 系列、網站最佳化與分享解決方案等,讓你的網站有可能性以應付實戰需求。

鐵人鍊成 | 共 30 篇文章 | 55 人訂閱 訂閱系列文 RSS系列文 團隊啾嚕咕嚕跳起來
DAY 1

[Day 01] Nuxt 3 nuxi 介紹 - Nuxt CLI 指令說明

前言 nuxi 全名為 (Nuxt CLI, Nuxt Command Line Interface),是由 Nuxt 提供開發的標準工具,Nuxt CLI 就...

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

[Day 02] Nuxt 3 使用 nuxi 快速建立模板檔案

前言 在 Nuxt 3 開發過程中,在建立頁面、元件甚至是 Server API,我們會需要為建立檔案來完成實作,如果你還不熟悉檔案在專案放置位置,或是需要模板...

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

[Day 03] Nuxt 3 解放 Nuxt 開發者體驗 - Nuxt DevTools 視覺化工具系列

前言 Nuxt 是一個強大且完整的框架,但也因此框架的複雜程度可能導致學習與除錯成本的提升,當我們在開發上遇到錯誤或需要調整驗證的地方,可能就需要在龐大的專案內...

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

[Day 04] Nuxt 3 專案應用程式開發工具 - Nuxt DevTools 視覺化工具系列

前言 Nuxt DevTools 是一個強大的視覺化除錯工具,,整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案,進而解放開發者體驗...

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

[Day 05] Nuxt 3 專案內部伺服器與進階開發工具 - Nuxt DevTools 視覺化工具系列

前言 Nuxt DevTools 是一個強大的視覺化除錯工具,Nuxt DevTools 整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt...

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

[Day 06] Nuxt 3 專案分析開發工具 - Nuxt DevTools 視覺化工具系列

前言 Nuxt DevTools 是一個強大的視覺化除錯工具,,整合開發了許多工具與功能在除錯分析上它可以幫助你更快速的了解 Nuxt 專案,提升開發者體驗,本...

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

[Day 07] Nuxt 3 使用 Dotenv 與 .env 檔案自動載入環境變數與配置 Runtime Config

前言 我們在使用 Node 開發時,可能會碰到需要使用環境變數來設定不同情境所執行的邏輯,也可能是要避免在設定檔中或專案推送至遠端版控倉庫時暴露敏感資訊。 你可...

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

[Day 08] Nuxt 3 如何得知路由名稱與自定義頁面路由

前言 Nuxt 3 內建基於檔案的路由可以快速實現頁面的路由配置,我們只需要在 pages 目錄下建立頁面,Nuxt 將會自動載入 Vue Router 來實現...

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

[Day 09] Nuxt 3 發送 API 請求資料 - 從 $fetch 與 useAsyncData 到 useFetch

前言 在 Nuxt 3 中,你可以直接使用 useAsyncData、useFetch、useLazyAsyncData、useLazyFetch 函式來發送網...

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

[Day 10] Nuxt 3 控制伺服器端及客戶端的渲染執行與 ClientOnly 的使用

前言 如果你只習慣使用 Vue 單純做客戶端渲染 (CSR),對於 Nuxt 的伺服器端渲染 (SSR) 模式還不是那麼的熟悉,你可能會在開發過程有些時候明明記...

2023-09-25 ‧ 由 Ryan 分享