本單元簡介 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 的樣式管理與 UI 框架的整合應用，特別著重在Tailwind CSS 和 PrimeVue 的運用。
相關頁面
5/14/2025小於 1 分鐘
PrimeVue 是一套專為 Vue.js 打造的完整 UI 元件庫，由 PrimeTek 開發，提供超過 80 種可自訂的元件，涵蓋表單、資料展示、導航、對話框、圖表等，適用於各種規模的前端應用程式。
🔧 主要特色
✅ 元件豐富且模組化
- 涵蓋表單控制項（如
InputText、Checkbox）、資料表格（DataTable）、圖表（整合 Chart.js）、對話框（Dialog）、導航選單（Menu）、媒體展示（Carousel、Galleria）等。 - 支援按需引入，減少打包體積，提升效能。
5/14/2025大约 2 分鐘
學習目標
- 了解 Vue 組件中的樣式處理方式
- 掌握 Tailwind CSS 在 Vue 專案中的設置方法
- 學習如何合理組織 Tailwind 樣式
- 實現響應式設計並理解其在 Vue 中的應用
- 掌握 Tailwind 與 Vue 組件的最佳實踐
1. Tailwind CSS 在 Vue 專案中的設置
1.1 安裝與配置
步驟 1：安裝必要的套件
# 安裝 Tailwind CSS 及其依賴
npm install -D tailwindcss postcss autoprefixer
# 生成配置檔案
npx tailwindcss init -p5/14/2025大约 6 分鐘
課程目標
- 瞭解如何使用 PrimeVue 的 Unstyled 模式與 Tailwind CSS 結合，建立自訂的 UI 元件樣式。
- 學習如何使用 primevue-tailwind-preset-template 模板，快速開始自訂樣式的開發。
- 掌握如何設定 Tailwind CSS 的語意化色彩與暗黑模式支援。(tailwind.primevue.org)
5/14/2025大约 3 分鐘
以下是幾個現代 Vue UI 框架的介紹，這些框架提供了豐富的元件庫與主題系統，能夠大幅加快開發具有一致風格與良好體驗的網頁應用程式：
🌟 1. Vuetify
-
介紹：Vuetify 是最受歡迎的 Vue UI 框架之一，基於 Material Design 設計。
-
支援版本：支援 Vue 2 和 Vue 3。
-
特點：
- 完整實作 Material Design 的設計原則。
- 元件數量齊全（按鈕、表單、對話框、表格等）。
- 提供主題系統、可自訂的樣式與響應式設計。
-
適用場合：偏向企業級、管理後台或有一致 UI 樣式需求的應用。
5/14/2025大约 2 分鐘