iT邦幫忙

nuxt 3相關文章
共有 89 則文章
鐵人賽 影片教學 DAY 30
Nuxt 3 快速入門 系列 第 30

技術 [影片教學] Nuxt 3 部署網站服務

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 Nuxt 3 網站部署至 Vercel 流程 前往 Verc...

鐵人賽 Vue.js DAY 30
Nuxt 3 實戰筆記 系列 第 30

技術 [Day 30] Nuxt 3 版本的升級與套件升級的管理工具

Nuxt 3 版本的升級 目前 Nuxt 3 仍積極的在修正錯誤與添加新功能,版本更新的速度也不慢,相較去年底,目前正式版釋出後已經穩定許多,與其他大型的開源框...

鐵人賽 影片教學 DAY 29
Nuxt 3 快速入門 系列 第 29

技術 [影片教學] Nuxt 3 部署前的建構打包

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建構打包專案 使用 Nuxt CLI 的 build 指令來...

鐵人賽 Vue.js DAY 29
Nuxt 3 實戰筆記 系列 第 29

技術 [Day 29] Nuxt 3 混合渲染 (Hybrid Rendering) 中的 SWR 與 ISR

前言 Nuxt 3 除了是一個 SSR 的框架外,也能允許網頁使用混合渲染 (Hybrid Rendering),混合渲染允許使用路由路徑的規則來決定不同的渲染...

鐵人賽 影片教學 DAY 28
Nuxt 3 快速入門 系列 第 28

技術 [影片教學] Nuxt 3 視覺化開發工具 Nuxt DevTools

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 展示專案 我們使用實戰部落格系列所開發的範例程式碼:http...

鐵人賽 Vue.js DAY 28
Nuxt 3 實戰筆記 系列 第 28

技術 [Day28] Nuxt 3 建構打包與部署至 Cloudflare Workers

前言 Nuxt 3 的網站應用程式,可以根據實際業務需求來決定渲染的模式,而最終專案所建構打包的專案程式碼,也會因為模式的選擇而需要部署在不同的執行環境上,例如...

鐵人賽 影片教學 DAY 27
Nuxt 3 快速入門 系列 第 27

技術 [影片教學] Nuxt 3 SEO 搜尋引擎最佳化 - 實戰部落格系列 Part 5

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 添加網站頁面的標題 調整 ./app.vue 檔案: &lt...

鐵人賽 Vue.js DAY 27
Nuxt 3 實戰筆記 系列 第 27

技術 [Day 27] Nuxt 3 產生靜態網頁部署至 Cloudflare Pages 與持續自動部署

前言 Nuxt 3 的渲染模式,可以支援我們產生靜態的頁面,而這些預渲染的靜態網頁檔案,就很適合部署至靜態的託管平台來服務,例如 Cloudflare Page...

鐵人賽 影片教學 DAY 26
Nuxt 3 快速入門 系列 第 26

技術 [影片教學] Nuxt 3 路由頁面的權限判斷 - 實戰部落格系列 Part 4

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

鐵人賽 Vue.js DAY 26
Nuxt 3 實戰筆記 系列 第 26

技術 [Day 26] Nuxt 3 錯誤頁面 (Error Page) 與錯誤處理 (Error handling)

前言 網站開發過程與上正式環境後,難免會遇到一些 Bug 導致網站處理邏輯發生異常,甚至一小段的 JavaScript 的邏輯錯誤或未處理的拋出錯誤,可能導致整...

鐵人賽 影片教學 DAY 25
Nuxt 3 快速入門 系列 第 25

技術 [影片教學] Nuxt 3 Server API 權限判斷與串接 - 實戰部落格系列 Part 3

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立伺服器中間件 在 server/middleware 目...

鐵人賽 Vue.js DAY 25
Nuxt 3 實戰筆記 系列 第 25

技術 [Day 25] Nuxt 3 深入靜態資源的使用 Public & Assets

前言 不管在 Vue 與 Nuxt 的開發,常會有需要使用圖片或靜態資源的時刻,例如,已經具有外部的圖片連結,我們很輕易的可以使用 URL 等方式來做載入,若是...

鐵人賽 影片教學 DAY 24
Nuxt 3 快速入門 系列 第 24

技術 [影片教學] Nuxt 3 建立部落格文章相關 API - 實戰部落格系列 Part 2

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立 Neon Serverless Postgres 資料...

鐵人賽 Vue.js DAY 24
Nuxt 3 實戰筆記 系列 第 24

技術 [Day 24] Nuxt 3 多國語系模組 Nuxt I18n 的進階使用方法與 SEO 搜尋引擎最佳化

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n,已經在 RC 階段準備釋出正式版,在使用上也穩定不少,這篇文章將介紹一...

鐵人賽 影片教學 DAY 23
Nuxt 3 快速入門 系列 第 23

技術 [影片教學] Nuxt 3 建立第一個網站 - 實戰部落格系列 Part 1

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

鐵人賽 Vue.js DAY 23
Nuxt 3 實戰筆記 系列 第 23

技術 [Day 23] Nuxt 3 多國語系模組 Nuxt I18n 的初入門與基本使用方法

前言 Nuxt 3 整合 Vue I18n v9.x 多國語系的模組 Nuxt I18n,已經在 RC 階段準備釋出正式版,在使用上也穩定不少,這篇文章將簡單的...

鐵人賽 影片教學 DAY 22
Nuxt 3 快速入門 系列 第 22

技術 [影片教學] Nuxt 3 靜態資源的管理 - Public & Assets

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 Public 目錄 在 Nuxt 3 的專案根目錄下,存在一...

鐵人賽 Vue.js DAY 22
Nuxt 3 實戰筆記 系列 第 22

技術 [Day 22] Nuxt 3 使用 SVG 的解決方案與更方便的使用 Icon 圖示

前言 網站的介面多多少少會放置圖示 (Icon),圖示的載入方式可以像圖片一樣以 png、jpg、webp 或 svg 等圖片格式來呈現,本篇將介紹如何在 Nu...

鐵人賽 影片教學 DAY 21
Nuxt 3 快速入門 系列 第 21

技術 [影片教學] Nuxt 3 使用 I18n 建立多國語系

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

鐵人賽 Vue.js DAY 21
Nuxt 3 實戰筆記 系列 第 21

技術 [Day 21] Nuxt 3 管理網站結構化資料標記 (Structured Data Markup) - SEO 搜尋引擎最佳化系列工具簡介

前言 在搜尋引擎最佳化 SEO 中,其中有一個最佳化項目是結構化資料標記 (Structured Data Markup),當你的網站設定好結構化的資料,將有助...

鐵人賽 影片教學 DAY 20
Nuxt 3 快速入門 系列 第 20

技術 [影片教學] Nuxt 3 Cookie 的設置與使用

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 使用 useCookie 來設定 Cookie 在 page...

鐵人賽 Vue.js DAY 20
Nuxt 3 實戰筆記 系列 第 20

技術 [Day 20] Nuxt 3 管理網站的 robots.txt 與 Robots Tags - SEO 搜尋引擎最佳化系列

前言 搜尋引擎之所以能搜尋到世界各底的網頁,全歸功於網路爬蟲 (Web crawler),也有人稱之為網路蜘蛛 (Spider),爬蟲是一種機器人即是搜尋引擎檢...

鐵人賽 影片教學 DAY 19
Nuxt 3 快速入門 系列 第 19

技術 [影片教學] Nuxt 3 串接 Google OAuth 登入

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 建立 Google OAuth 用戶 ID 前往 Googl...

鐵人賽 Vue.js DAY 19
Nuxt 3 實戰筆記 系列 第 19

技術 [Day 19] Nuxt 3 自動產生 Sitemap 網站地圖 - SEO 搜尋引擎最佳化系列

前言 Sitemap 網站地圖基本上都是由網頁開發人員進行製作,網站地圖內容包含了整個網站的連結,例如你的網站有首頁、文章列表、文章詳細頁面等,這些連結如果你想...

鐵人賽 影片教學 DAY 18
Nuxt 3 快速入門 系列 第 18

技術 [影片教學] Nuxt 3 Runtime Config & App Config

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 使用 Runtime Config 開啟專案下 nuxt.c...

鐵人賽 Vue.js DAY 18
Nuxt 3 實戰筆記 系列 第 18

技術 [Day 18] Nuxt 3 自動產生連結縮圖 OG Image - SEO 搜尋引擎最佳化系列

前言 在做網頁的 SEO 搜尋引擎最佳化時,你可以在 og:image 或 twitter:image 設定圖片的網址,來讓搜尋引擎爬蟲收錄網頁縮圖或在分享連結...

鐵人賽 影片教學 DAY 17
Nuxt 3 快速入門 系列 第 17

技術 [影片教學] Nuxt 3 使用 Pinia 進行狀態管理

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。 安裝 Pinia 與 Nuxt Pinia 模組 在專案中安...

鐵人賽 Vue.js DAY 17
Nuxt 3 實戰筆記 系列 第 17

技術 [Day 17] Nuxt 3 頁面載入效果 - 使用 NuxtLoadingIndicator 元件與實作自訂 Loading 元件

前言 當路由頁面跳轉時,可能會因為下一個頁面阻塞而導致畫面卡住,使用者無法得知頁面的載入狀況,Nuxt 3 提供一個 <NuxtLoadingIndica...

鐵人賽 Vue.js DAY 16
Nuxt 3 實戰筆記 系列 第 16

技術 [Day 16] Nuxt 3 最佳管理 Meta Tag 的方式 - 使用 useSeoMeta 與 useServerSeoMeta

前言 在 Nuxt 3 我們可以使用 useHead 來設定 Meta Tag,你可以完全的掌握與控制 Meta 標籤的撰寫,不過為了應付各個平台或眾多的自訂標...

鐵人賽 影片教學 DAY 16
Nuxt 3 快速入門 系列 第 16

技術 [影片教學] Nuxt 3 狀態管理 (State Management)

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