返回技術堆疊

Nuxt 實戰之旅

從 Nuxt 3 到 Nuxt 4.0，掌握全端 Vue.js 框架的核心概念與實戰技巧

·Vibe Coding 系列

Best Practice 實戰專案

P1
Nuxt 3 實戰
Vibe Coding 專案

建立 Nuxt 3 + TailwindCSS 專案

從零開始建立 Nuxt 3 專案，整合 TailwindCSS 與 DaisyUI，建立現代化的全端框架開發環境

Nuxt 3 TailwindCSS 實戰專案
P2
Nuxt 4.0 實戰
Vibe Coding 專案

Nuxt 4.0 + TailwindCSS + DaisyUI 專案建立

體驗最新的 Nuxt 4.0，學習模組化安裝 TailwindCSS，整合 DaisyUI 組件庫打造現代化界面

Nuxt 4.0 TailwindCSS DaisyUI 最新版本
01 Day 1

歡迎來到 Nuxt 的世界！

入門介紹 基礎概念
02 Day 2

建立你的第一個 Nuxt 專案

專案建立 實戰練習
03 Day 3

指揮你的 Nuxt 專案

設定檔 專案配置
04 Day 4

蓋你的第一個網頁房子

專案結構 組件架構
05 Day 5

你的素材倉庫 public vs. assets

資源管理 檔案結構
06 Day 6

為你的網站穿上新衣 (基礎篇)

樣式設計 CSS 基礎
07 Day 7

為你的網站穿上新衣 (升級篇)

SCSS 預處理器 進階樣式
08 Day 8

為你的網站穿上新衣 (高手篇)

外部 CSS 函式庫 資源管理
09 Day 9

網站的導航地圖 (Routing)

路由系統 頁面導航
10 Day 10

網站的保全系統 (路由守衛)

路由中介軟體 安全驗證
11 Day 11

讓 Google 更懂你 (SEO 基礎篇)

SEO 優化 useSeoMeta
12 Day 12

打造你的百變 head (進階篇)

useHead titleTemplate
13 Day 13

讓你的網頁動起來 (頁面轉場基礎)

頁面轉場 CSS 動畫
14 Day 14

更上一層樓的轉場動畫 (進階篇)

版型轉場 View Transitions
15 Day 15

為網站裝上電話線 (資料獲取心法)

資料獲取 SSR vs CSR
16 Day 16

開始點餐吧！ (useFetch 實戰)

useFetch 實際應用
17 Day 17

特殊任務分派 ($fetch & useAsyncData)

$fetch useAsyncData
18 Day 18

跨越元件的溝通橋樑 (useState)

狀態管理 useState
19 Day 19

專業的狀態管理大師 (Pinia)

Pinia Store
20 Day 20

當網站出錯時 (致命錯誤處理)

錯誤處理 error.vue
21 Day 21

處理局部錯誤 (錯誤隔離艙)

錯誤隔離 NuxtErrorBoundary
22 Day 22

Nuxt 的秘密武器 (內建伺服器)

Nitro 引擎 全端框架
23 Day 23

專案的複製與堆疊 (Layers)

程式碼複用 專案架構
24 Day 24

預先烤好的蛋糕 (Prerendering)

靜態生成 效能優化
25 Day 25

向世界展示你的作品 (部署)

網站部署 上線發布
26 Day 26

為專案建立防護網 (測試基礎)

自動化測試 品質保證
27 Day 27

檢查零件的好壞 (單元測試)

元件測試 隔離測試
28 Day 28

整車上路實測 (端到端測試)

E2E 測試 用戶體驗
29 Day 29

專案的基石 (app.vue)

app.vue 專案架構
30 Day 30

網站的公開設定檔 (app.config.ts)

app.config.ts 響應式設定
31 Day 31

設計你的「維修中」告示牌 (error.vue)

error.vue 錯誤處理
32 Day 32

內建的部落格引擎 (content/)

Nuxt Content Markdown
33 Day 33

打造你自己的擴充包 (modules/)

本地模組 自動註冊
34 Day 34

專案的工具倉庫 (node_modules/)

node_modules 套件管理
35 Day 35

網站的公共儲藏室 (public/)

靜態資源 public vs assets
36 Day 36

打造你的專屬 API (Server 篇上)

Server API Nitro 引擎
37 Day 37

後端的好幫手 (Server 篇下)

Server Middleware Server Utils
38 Day 38

前後端的共享工具箱 (shared/)

Shared Utils Code Reuse
39 Day 39

不能說的秘密 (.env)

Environment Variables Security
40 Day 40

專案的搬家清單 (.gitignore)

Git Ignore Version Control
41 Day 41

給 Nuxt 的忽略清單 (.nuxtignore)

Build Ignore Project Management
42 Day 42

專案的便利貼 (.nuxtrc)

Quick Config Simple Settings
43 Day 43

專案的大腦中樞 (nuxt.config.ts)

Core Configuration Project Settings
44 Day 44

專案的身分證與說明書 (package.json)

Project Identity Dependencies
45 Day 45

TypeScript 的智慧管家 (tsconfig.json)

TypeScript Config Auto Configuration

為什麼選擇 Nuxt？

性能優化

內建 SSR、SSG、以及智能打包優化，提供最佳的網站性能表現

開發體驗

零配置設定、自動導入、熱更新，專注於開發而非配置

全端解決方案

整合前端與後端，從靜態網站到複雜的全端應用都能輕鬆應對