本單元簡介 Nuxt3 的基本概念與開發環境設定,並涵蓋樣式管理、視圖架構等核心內容。
5/28/2025小於 1 分鐘
本單元簡介 Nuxt3 的基本概念與開發環境設定,並涵蓋樣式管理、視圖架構等核心內容。
Nuxt.js 使用檔案系統路由,pages/
目錄中的每個 Vue 檔案會自動建立對應的 URL 路由。這基於 vue-router 並支援程式碼分割,只載入當前路由所需的 JavaScript。
assets/
├── css/
│ ├── main.css
│ └── components.css
├── scss/
│ ├── _variables.scss
│ ├── _mixins.scss
│ └── main.scss
└── fonts/
└── custom-fonts.woff2
Nuxt.js 的 Views 系統由三個核心部分組成:
本單元涵蓋 Vue 的樣式管理與 UI 框架的整合應用,特別著重在Tailwind CSS 和 PrimeVue 的運用。
PrimeVue 是一套專為 Vue.js 打造的完整 UI 元件庫,由 PrimeTek 開發,提供超過 80 種可自訂的元件,涵蓋表單、資料展示、導航、對話框、圖表等,適用於各種規模的前端應用程式。
InputText
、Checkbox
)、資料表格(DataTable
)、圖表(整合 Chart.js)、對話框(Dialog
)、導航選單(Menu
)、媒體展示(Carousel
、Galleria
)等。學習目標
步驟 1:安裝必要的套件
# 安裝 Tailwind CSS 及其依賴
npm install -D tailwindcss postcss autoprefixer
# 生成配置檔案
npx tailwindcss init -p
以下是幾個現代 Vue UI 框架的介紹,這些框架提供了豐富的元件庫與主題系統,能夠大幅加快開發具有一致風格與良好體驗的網頁應用程式:
介紹:Vuetify 是最受歡迎的 Vue UI 框架之一,基於 Material Design 設計。
支援版本:支援 Vue 2 和 Vue 3。
特點:
適用場合:偏向企業級、管理後台或有一致 UI 樣式需求的應用。