本單元簡介 Nuxt3 的基本概念與開發環境設定，並涵蓋樣式管理、視圖架構等核心內容。

• Nuxt 簡介
• Views 架構簡介
• 路由管理
• CSS 樣式

學習內容

• 理解 Nuxt.js 的核心概念與優勢
• 學會安裝與設定 Nuxt.js 開發環境
• 建立第一個 Nuxt.js 專案

參考內容1
參考內容2

學習內容

• 理解 Nuxt.js 檔案系統路由概念
• 掌握靜態與動態路由建立
• 學會使用 NuxtLink 進行頁面導航
• 理解路由參數處理
• 路由中介軟體與驗證

參考內容

1. 檔案系統路由簡介

核心概念

Nuxt.js 使用檔案系統路由，pages/ 目錄中的每個 Vue 檔案會自動建立對應的 URL 路由。這基於 vue-router 並支援程式碼分割，只載入當前路由所需的 JavaScript。

學習內容

• 掌握 Nuxt.js 中的樣式組織與引入方式
• 學習字體設定與管理
• 理解 Vue SFC 樣式特性

參考內容

1. 本地樣式表管理

assets/ 目錄結構

assets/
├── css/
│   ├── main.css
│   └── components.css
├── scss/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── main.scss
└── fonts/
    └── custom-fonts.woff2

學習內容

• 理解 Nuxt.js 中的 Views 架構概念
• 學會使用 app.vue 作為應用程式入口點
• 掌握 Components、Pages、Layouts 的建立與使用

參考內容

1. Nuxt.js Views 架構簡介

Nuxt.js 的 Views 系統由三個核心部分組成：