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

0 Like 0 留言 851 瀏覽

鐵人賽 Vue.js DAY 16

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

技術 D16：Nuxt 3.x Meta Tags 與 SEO 搜尋引擎優化

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Nuxt3 搭配 Unhead 套件，讓我們可以在專案內動態控制 <head> 標籤...

claire chang ‧ 2023-09-27

0 Like 0 留言 595 瀏覽

鐵人賽影片教學 DAY 11

Nuxt 3 快速入門系列第 11 篇

技術 [影片教學] Nuxt 3 模組 (Modules)

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

Ryan ‧ 2023-09-26

0 Like 0 留言 1292 瀏覽

鐵人賽 Vue.js DAY 11

Nuxt 3 實戰筆記系列第 11 篇

技術 [Day 11] Nuxt 3 自訂共用的函式 - 組合式函式 (Composables) 與通用函式 (Utils) 的差異和選擇

前言 Nuxt 3 預設的自動載入 (Auto Imports)，其中包含了 composables 與 utils 目錄，這兩個目錄通常會用來定義一些專案中常...

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

0 Like 0 留言 1112 瀏覽

鐵人賽 Vue.js DAY 15

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

技術 D15：Nuxt 3.x Server API 整合 MongoDB 實作，邁向全端第一步

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Nuxt3 搭配了新的伺服器引擎 Nitro，讓我們能輕鬆建立 Server API，並在 Nu...

claire chang ‧ 2023-09-26

0 Like 0 留言 748 瀏覽

鐵人賽影片教學 DAY 10

Nuxt 3 快速入門系列第 10 篇

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

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

Ryan ‧ 2023-09-25

0 Like 0 留言 2205 瀏覽

鐵人賽 Vue.js DAY 10

Nuxt 3 實戰筆記系列第 10 篇

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

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

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

1 Like 0 留言 1069 瀏覽

鐵人賽 Vue.js DAY 14

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

技術 D14：Nuxt 3.x Server 目錄－建立 API

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Nuxt3 搭配了新的伺服器引擎 Nitro，讓我們能輕鬆建立 Server API，並在 Nux...

claire chang ‧ 2023-09-25

0 Like 0 留言 506 瀏覽

鐵人賽影片教學 DAY 9

Nuxt 3 快速入門系列第 9 篇

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

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

Ryan ‧ 2023-09-24

1 Like 1 留言 2579 瀏覽

鐵人賽 Vue.js DAY 9

Nuxt 3 實戰筆記系列第 9 篇

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

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

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

0 Like 0 留言 2099 瀏覽

鐵人賽 Vue.js DAY 13

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

技術 D13：Nuxt 3.x API 請求方法－$fetch、useAsyncData、useFetch

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Nuxt3 提供了全域可使用的內建函式庫 $fetch 以及 composables useFe...

claire chang ‧ 2023-09-24

0 Like 0 留言 584 瀏覽

鐵人賽影片教學 DAY 8

Nuxt 3 快速入門系列第 8 篇

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

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

Ryan ‧ 2023-09-23

0 Like 1 留言 1417 瀏覽

鐵人賽 Vue.js DAY 8

Nuxt 3 實戰筆記系列第 8 篇

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

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

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

0 Like 0 留言 704 瀏覽

鐵人賽 Vue.js DAY 12

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

技術 D12：Nuxt 3.x Assets vs Public 目錄－靜態資源管理

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Nuxt3 提供兩個資料夾 assets/ 以及 public/，用來管理靜態資源，像是圖片、CS...

claire chang ‧ 2023-09-23

0 Like 0 留言 706 瀏覽

鐵人賽影片教學 DAY 7

Nuxt 3 快速入門系列第 7 篇

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

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

Ryan ‧ 2023-09-22

0 Like 2 留言 2863 瀏覽

鐵人賽 Vue.js DAY 7

Nuxt 3 實戰筆記系列第 7 篇

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

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

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

0 Like 0 留言 972 瀏覽

鐵人賽 Vue.js DAY 11

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

技術 D11：Nuxt 3.x Middleware 目錄－監聽路由變化

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Middleware 為 Nuxt 內的路由守衛（Navigation Guards），相當於...

claire chang ‧ 2023-09-22

1 Like 0 留言 617 瀏覽

鐵人賽影片教學 DAY 6

Nuxt 3 快速入門系列第 6 篇

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

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

Ryan ‧ 2023-09-21

0 Like 0 留言 1045 瀏覽

鐵人賽 Vue.js DAY 10

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

技術 D10：Nuxt 3.x Plugins 目錄－搭配第三方套件

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Plugins 目錄協助我們在 Nuxt 擴充套件功能。前端開發常會搭配第三方套件（packag...

claire chang ‧ 2023-09-21

0 Like 0 留言 564 瀏覽

鐵人賽 Vue.js DAY 6

Nuxt 3 實戰筆記系列第 6 篇

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

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

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

0 Like 0 留言 942 瀏覽

鐵人賽影片教學 DAY 5

Nuxt 3 快速入門系列第 5 篇

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

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

Ryan ‧ 2023-09-20

0 Like 0 留言 693 瀏覽

鐵人賽 Vue.js DAY 9

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

技術 D9：Nuxt 3.x Composables vs Utils 目錄－自訂共用方法

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀定義在 composables 以及 utils 資料夾的檔案 Nuxt 都會自動引入（auto-...

claire chang ‧ 2023-09-20

0 Like 0 留言 770 瀏覽

鐵人賽 Vue.js DAY 5

Nuxt 3 實戰筆記系列第 5 篇

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

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

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

0 Like 0 留言 738 瀏覽

鐵人賽 Vue.js DAY 4

Nuxt 3 實戰筆記系列第 4 篇

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

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

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

0 Like 0 留言 867 瀏覽

鐵人賽影片教學 DAY 4

Nuxt 3 快速入門系列第 4 篇

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

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

Ryan ‧ 2023-09-19

0 Like 0 留言 706 瀏覽

鐵人賽 Vue.js DAY 8

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

技術 D8：Nuxt 3.x Layouts 目錄－自訂模板

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Layouts 資料夾協助我們定義共用模板，將重複使用的版面提取到模板內全域共用，看起來跟昨天介紹...

claire chang ‧ 2023-09-19

1 Like 1 留言 2346 瀏覽

鐵人賽影片教學 DAY 3

Nuxt 3 快速入門系列第 3 篇

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

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

Ryan ‧ 2023-09-18

0 Like 0 留言 699 瀏覽

鐵人賽 Vue.js DAY 7

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

技術 D7：Nuxt 3.x Components 目錄－建立共用元件

本篇文章同步更新於個人部落格，歡迎交流指教～謝謝您的閱讀 Components 目錄用來定義 Vue 共用元件，元件的特性為將部分模板、程式碼進行封裝，讓我...

claire chang ‧ 2023-09-18

1 Like 1 留言 1356 瀏覽

鐵人賽 Vue.js DAY 3

Nuxt 3 實戰筆記系列第 3 篇

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

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

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

0 Like 1 留言 1185 瀏覽

鐵人賽 Vue.js DAY 2

Nuxt 3 實戰筆記系列第 2 篇

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

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

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

1 Like 0 留言 1092 瀏覽

鐵人賽影片教學 DAY 2

Nuxt 3 快速入門系列第 2 篇

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

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

Ryan ‧ 2023-09-17