系列文章
Day 21 – Nuxt 3 Images
在開發專案時，通常需要使用到一些靜態檔案，比如圖片和字形等等。這些檔案應該被妥善地存放在一個統一的地方，以便有效地管理和使用，一起來看看靜態檔案的存放位置有哪些...
Day 22 – Nuxt Image
Nuxt Image 提供兩個元件 <NuxtImg> 及 <NuxtPicture>。<NuxtImg> 渲染的會是 HT...
Day 23 – ESLint
ESLint 是一個 JavaScript 程式碼的分析工具，可以用來檢查 JavaScript 程式碼中的錯誤、風格問題和潛在的問題，也可以根據自己的需求定義...
Day 24 – UnoCSS
Nuxt 3 整合許多 Vue 生態系常見的 UI 框架，包含官方推出的 Nuxt UI、基於 Google 的 Material Design 指南開發的 V...
Day 25 – UnoCSS Config
昨天我們建立了 uno.config.ts，這個檔案是 UnoCSS 的設定檔，可以用來自定義 CSS 規則和變數以滿足專案的樣式需求，以下是一個 uno.co...
Day 26 – UnoCSS Presets
Presets 是將一組樣式規則與其他設定項目打包成可重複使用的 Preset，這些設定會和 uno.config.ts 中的其他主要設定合併在一起，讓我們輕鬆...
Day 27 – Nuxt Content Install & Directory
今天來介紹另一個厲害的模組：Nuxt Content，它能夠解析專案中結構化的 .md、.yml、.csv 或 .json 將內容呈現在頁面中，不需要繁瑣的設定...
Day 28 – Nuxt Content Components
延續昨天的範例，我們在 pages/[...slug].vue 使用了元件 <ContentDoc />。今天就來談談 <ContentDoc...
Day 29 – 實作一個部落格
連續兩天介紹了 Nuxt Content 的用法，今天就試著用 Nuxt Content 和前幾天介紹過的 UnoCSS、Nuxt Image 來實際建立一個簡...
Day 30 – Nuxt 3 Deployment
終於來到最後一天啦！今天會介紹如何編譯及佈署開發完的網站，Nuxt 3 可以部署在 Node.js 伺服器上，也可以 SSG 方式部屬到靜態檔案伺服器，讓我們繼...