本單元簡介 Nuxt3 的基本概念與開發環境設定，並涵蓋樣式管理、視圖架構等核心內容。
5/28/2025小於 1 分鐘
學習內容
- 理解 Nuxt.js 檔案系統路由概念
- 掌握靜態與動態路由建立
- 學會使用 NuxtLink 進行頁面導航
- 理解路由參數處理
- 路由中介軟體與驗證
1. 檔案系統路由簡介
核心概念
Nuxt.js 使用檔案系統路由，pages/ 目錄中的每個 Vue 檔案會自動建立對應的 URL 路由。這基於 vue-router 並支援程式碼分割，只載入當前路由所需的 JavaScript。
5/28/2025大约 5 分鐘
學習內容
- 掌握 Nuxt.js 中的樣式組織與引入方式
- 學習字體設定與管理
- 理解 Vue SFC 樣式特性
1. 本地樣式表管理
assets/ 目錄結構
assets/
├── css/
│ ├── main.css
│ └── components.css
├── scss/
│ ├── _variables.scss
│ ├── _mixins.scss
│ └── main.scss
└── fonts/
└── custom-fonts.woff25/28/2025大约 2 分鐘
學習內容
- 理解 Nuxt.js 中的 Views 架構概念
- 學會使用 app.vue 作為應用程式入口點
- 掌握 Components、Pages、Layouts 的建立與使用
1. Nuxt.js Views 架構簡介
Nuxt.js 的 Views 系統由三個核心部分組成：
5/28/2025大约 3 分鐘
本單元涵蓋 Vue 的進階功能與實用技術，包含路由管理、狀態管理以及部署方案，為開發更複雜的 Vue 應用提供全方位指南。
相關頁面
- Vue Router 路由管理：學習如何使用 Vue Router 建立單頁應用，管理路由、導航守衛與動態路由
- Pinia 狀態管理：掌握使用 Pinia 進行集中式狀態管理的方法，包含 store、state、getters 與 actions
- Vercel 快速部署：了解如何將 Vue 應用快速部署到 Vercel 雲端平台
5/21/2025小於 1 分鐘
學習目標
- 了解狀態管理的概念與必要性
- 學會安裝和配置 Pinia
- 掌握 Store 的創建與使用
- 理解 state、getters、actions 的運用
- 學會組件間的狀態共享與持久化
核心概念解釋
什麼是狀態管理？
狀態管理是指在應用程式中統一管理和控制資料狀態的方式。在大型 Vue 應用中，組件間需要共享狀態時，傳統的 props/emit 方式會變得複雜且難以維護。
為什麼選擇 Pinia？
5/21/2025大约 8 分鐘
學習目標
- 了解單頁應用（SPA）路由的概念與原理
- 學會安裝和配置 Vue Router
- 掌握路由定義、導航與參數傳遞
- 理解嵌套路由與路由守衛
- 學會程式化導航與路由元資訊
核心概念解釋
什麼是 Vue Router？
Vue Router 是 Vue.js 的官方路由管理器，用於建構單頁應用（SPA）。它提供：
- 宣告式路由：使用
<RouterLink>進行導航 - 程式化路由：使用 JavaScript 控制路由跳轉
- 動態路由匹配：支援參數與通配符
- 嵌套路由：支援複雜的頁面結構
- 路由守衛：控制導航權限與流程
5/21/2025大约 8 分鐘
學習目標
- 了解 Vercel 平台的特點與優勢
- 學會將 Vue 應用部署到 Vercel
- 掌握環境變數配置與域名設定
- 理解自動化部署與 CI/CD 流程
- 學會監控應用效能與分析
核心概念解釋
什麼是 Vercel？
Vercel 是一個現代化的雲端平台，專為前端框架和靜態網站設計，提供：
- 零配置部署：自動識別框架並優化建構
- 全球 CDN：快速內容分發網路
- 自動 HTTPS：免費 SSL 憑證
- 無伺服器函數：Edge Functions 和 API Routes
- 即時預覽：每個 Git 分支自動生成預覽連結
5/21/2025大约 3 分鐘
本單元涵蓋 Vue 的樣式管理與 UI 框架的整合應用，特別著重在Tailwind CSS 和 PrimeVue 的運用。
相關頁面
5/14/2025小於 1 分鐘