iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 910 瀏覽

鐵人賽影片教學 DAY 20

Nuxt 3 快速入門系列第 20 篇

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

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

Ryan ‧ 2023-10-05

0 Like 0 留言 840 瀏覽

鐵人賽 Vue.js DAY 20

Nuxt 3 實戰筆記系列第 20 篇

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

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

Ryan ‧ 2023-10-05 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 656 瀏覽

鐵人賽 Vue.js DAY 25

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 25 篇

技術 D25：Nuxt 3.x 套件應用－CKEditor 5 文字編輯器

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 CKEditor 版本：v39.0.0 CKEditor 是一套歷史悠久且功能完整、輕量的富...

claire chang ‧ 2023-10-06

1 Like 0 留言 1282 瀏覽

鐵人賽 Vue.js DAY 24

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 24 篇

技術 D24：Nuxt 3.x 套件應用－VeeValidate v4.x 表單驗證

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 vee-validate 是使用於 Vue.js 的輕量表單驗證套件（參考 php 框架 lar...

claire chang ‧ 2023-10-05

1 Like 1 留言 1293 瀏覽

鐵人賽影片教學 DAY 19

Nuxt 3 快速入門系列第 19 篇

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

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

Ryan ‧ 2023-10-04

0 Like 0 留言 1002 瀏覽

鐵人賽 Vue.js DAY 19

Nuxt 3 實戰筆記系列第 19 篇

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

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

Ryan ‧ 2023-10-04 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 584 瀏覽

鐵人賽影片教學 DAY 18

Nuxt 3 快速入門系列第 18 篇

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

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

Ryan ‧ 2023-10-03

0 Like 0 留言 1316 瀏覽

鐵人賽 Vue.js DAY 18

Nuxt 3 實戰筆記系列第 18 篇

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

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

Ryan ‧ 2023-10-03 ‧團隊啾嚕咕嚕跳起來

1 Like 0 留言 854 瀏覽

鐵人賽 Vue.js DAY 23

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 23 篇

技術 D23：Nuxt 3.x 替網站增加 Sitemap 網站地圖

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Sitemap 是一種用來提供網站資訊的檔案，記錄網站內的網頁、圖片等，主要功用為協助搜尋引擎快速...

claire chang ‧ 2023-10-04

0 Like 0 留言 875 瀏覽

鐵人賽 Vue.js DAY 22

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 22 篇

技術 D22：Nuxt 3.x 導入 I18n 實作多國語系

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 @nuxtjs/i18n 版本：v8.0.0-rc.3 多國語系讓我們的網站邁向國際市場，本...

claire chang ‧ 2023-10-03

1 Like 0 留言 1193 瀏覽

鐵人賽影片教學 DAY 17

Nuxt 3 快速入門系列第 17 篇

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

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

Ryan ‧ 2023-10-02

0 Like 1 留言 1678 瀏覽

鐵人賽 Vue.js DAY 17

Nuxt 3 實戰筆記系列第 17 篇

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

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

Ryan ‧ 2023-10-02 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 1711 瀏覽

鐵人賽 Vue.js DAY 21

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 21 篇

技術 D21：Nuxt 3.x 狀態管理 State Management (3)－Pinia Plugin Persistedstate 維持狀態

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀前一篇文章說明了在 Nuxt3 搭配 Pinia 狀態管理工具全域共享狀態，本篇將介紹 pini...

claire chang ‧ 2023-10-02

2 Like 0 留言 1326 瀏覽

鐵人賽 Vue.js DAY 16

Nuxt 3 實戰筆記系列第 16 篇

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

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

Ryan ‧ 2023-10-01 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 477 瀏覽

鐵人賽影片教學 DAY 16

Nuxt 3 快速入門系列第 16 篇

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

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

Ryan ‧ 2023-10-01

0 Like 0 留言 732 瀏覽

鐵人賽 Vue.js DAY 20

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 20 篇

技術 D20：Nuxt 3.x 狀態管理 State Management (2)－Pinia

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀專案開發過程中常會有狀態共享的需求。昨天介紹了 Nuxt3 useState Composabl...

claire chang ‧ 2023-10-01

0 Like 0 留言 520 瀏覽

鐵人賽影片教學 DAY 15

Nuxt 3 快速入門系列第 15 篇

技術 [影片教學] Nuxt 3 資料獲取 (Data Fetching)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立 Server API 在 server/api 目錄下...

Ryan ‧ 2023-09-30

1 Like 0 留言 2286 瀏覽

鐵人賽 Vue.js DAY 15

Nuxt 3 實戰筆記系列第 15 篇

技術 [Day 15] Nuxt 3 使用 useHead 動態設定 HTML Head 與 Meta Tag

前言如果要在 Vue 中更改頁面的標題或 HTML Meta Tag，你可能使用或聽過 vue-meta，它能幫助你方便的更改 HTML Head、Meta...

Ryan ‧ 2023-09-30 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 855 瀏覽

鐵人賽 Vue.js DAY 19

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 19 篇

技術 D19：Nuxt 3.x 狀態管理 State Management (1)－useState

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀專案開發過程中常會有狀態共享的需求。父子元件間資料傳遞可以使用 Props 和 $emit，或是...

claire chang ‧ 2023-09-30

0 Like 0 留言 413 瀏覽

鐵人賽影片教學 DAY 14

Nuxt 3 快速入門系列第 14 篇

技術 [影片教學] Nuxt 3 渲染模式 (Rendering Modes)

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。客戶端渲染 Client-Side Rendering (C...

Ryan ‧ 2023-09-29

0 Like 1 留言 2297 瀏覽

鐵人賽 Vue.js DAY 14

Nuxt 3 實戰筆記系列第 14 篇

技術 [Day 14] Nuxt 3 最佳化圖片動態調整請求控制圖片大小 - Nuxt Image

前言 Nuxt Image 是 Nuxt 的一個模組，顧名思義讓你可以在 Nuxt 專案中使用圖片時，可以幫助你最佳化圖片，Nuxt Image 它所做的是，使...

Ryan ‧ 2023-09-29 ‧團隊啾嚕咕嚕跳起來

0 Like 0 留言 1356 瀏覽

鐵人賽 Vue.js DAY 18

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 18 篇

技術 D18：Nuxt 3.x 搭配 CSS Framework－以 Bootstrap 5 為例

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Bootstrap 版本：v5.3.1Sass 版本：v1.63.6 在 Nuxt 專案中，我...

claire chang ‧ 2023-09-29

1 Like 0 留言 555 瀏覽

鐵人賽影片教學 DAY 13

Nuxt 3 快速入門系列第 13 篇

技術 [影片教學] Nuxt 3 Server API

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。建立第一個 Server API 在 server/api...

Ryan ‧ 2023-09-28

0 Like 0 留言 2397 瀏覽

鐵人賽 Vue.js DAY 13

Nuxt 3 實戰筆記系列第 13 篇

技術 [Day 13] Nuxt 3 使用路由中間件（Middleware）實作身份驗證與實作技巧

前言 Nuxt 3 提供了一個路由中間件的框架，我們只要再專案目錄 middleware 下定義好路由中間件，就可以在路由切換之間來實現一些功能，包含了身份驗證...

Ryan ‧ 2023-09-28 ‧團隊啾嚕咕嚕跳起來

0 Like 1 留言 925 瀏覽

鐵人賽 Vue.js DAY 17

Nuxt.js 3.x 筆記－打造 SSR 專案系列第 17 篇

技術 D17：Nuxt 3.x 自訂 Loading 效果

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Nuxt3 提供了預設進度條元件 <NuxtLoadingIndicator>，在路...

claire chang ‧ 2023-09-28

0 Like 0 留言 1932 瀏覽

鐵人賽 Vue.js DAY 28

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 28 篇

技術 DAY 28 - Nuxt 使用 useFetch 串接 API

DAY 28 - Nuxt 使用 useFetch 串接 API 前言延續上篇 ...DAY 27 - Nuxt Server 模擬 RESTful AP...

阿蘇蘇 ‧ 2023-10-13 ‧團隊大船要開囉

1 Like 0 留言 1117 瀏覽

鐵人賽 Vue.js DAY 23

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 23 篇

技術 DAY 23 - Nuxt 將 component、page 、layout 整合，嘗試寫一個模板

DAY 23 - Nuxt 將 component、page 、layout 整合，嘗試寫一個模板驗收學習成果再這篇我們會試著整合前面所學的，將 app...

阿蘇蘇 ‧ 2023-10-08 ‧團隊大船要開囉

0 Like 0 留言 1159 瀏覽

鐵人賽 Vue.js DAY 22

深入 Vue.js 世界 : 30 Days 核心概念與實作系列第 22 篇

技術 DAY 22 - Nuxt 自動引入 (Auto Imports)

DAY 22 - Nuxt 自動引入 (Auto Imports) Nuxt3 有個很重要的特性，那就是自動引入 (Auto Imports)，大幅增加你...

阿蘇蘇 ‧ 2023-10-07 ‧團隊大船要開囉

0 Like 0 留言 547 瀏覽

鐵人賽影片教學 DAY 12

Nuxt 3 快速入門系列第 12 篇

技術 [影片教學] Nuxt 3 路由中間件 (Route Middleware)

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

Ryan ‧ 2023-09-27

0 Like 0 留言 1019 瀏覽

鐵人賽 Vue.js DAY 12

Nuxt 3 實戰筆記系列第 12 篇

技術 [Day 12] Nuxt 3 使用插件 (Plugin) 整合載入第三方套件 - 導入支援 Vue 3 的套件或插件

前言為了不重複造輪子，在專案中導入現成的套件是常見的做法，但若這個套件在 Nuxt 3 沒有專用的模組或插件，再導入的過程中可能會遇到一些問題，多數情況我們可...

Ryan ‧ 2023-09-27 ‧團隊啾嚕咕嚕跳起來