第十五屆 冠軍

vue-js
Nuxt 3 實戰筆記
Ryan

系列文章

DAY 1

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

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

DAY 2

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

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

DAY 3

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

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

DAY 4

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

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

DAY 5

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

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

DAY 6

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

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

DAY 7

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

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

DAY 8

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

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

DAY 9

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

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

DAY 10

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

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