今天來分享 Nuxt.js 官方開源的 3 個基于 Nuxt + Vue 的實戰(zhàn)項目！這些項目可以幫助我們更好地理解和掌握 Nuxt 和 Vue 的概念、編寫更優(yōu)雅的代碼。

Nuxt Movies

Nuxt Movies 是一個使用 Nuxt 3、Vue 3、UnoCSS、Image Module 和 TypeScript 構(gòu)建的電影應用，其包含了電影列表、電影詳情、演員詳情、影片搜索、相關(guān)推薦等功能。Nuxt Movies 采用了服務端渲染（SSR）技術(shù)，同時也支持使用 PWA 技術(shù)使網(wǎng)站更加快速地加載和緩存內(nèi)容。

在線演示：https://movies.nuxt.space/

Github：https://github.com/nuxt/movies

Nuxt Hacker News

Nuxt Hacker News 是一個使用 Nuxt 構(gòu)建的 HackerNews 克隆，其具有以下特點：

• 服務端渲染
• 基于 Vite 的熱更新（HMR）開發(fā)環(huán)境
• 無需配置即可在任何地方部署（如 Vercel、Netlify、Cloudflare 等） ，由 Nitro 提供支持
• 代碼分割
• JS + DNS + Data 的預取/預加載功能

在線演示：https://hn.nuxt.space/

Github：https://github.com/nuxt/hackernews

Nuxt Content

Nuxt Content 是 Nuxt.js 官方維護的一個用于快速構(gòu)建靜態(tài)網(wǎng)站的應用。它基于 Vue.js 和 Markdown ，可以輕松地將 Markdown 文件轉(zhuǎn)換為渲染的 HTML 頁面并在 Nuxt.js 應用中使用。其具有以下特性：

• 使用 Nuxt 3 構(gòu)建：利用 Nuxt 3 的特性：Vue 3、自動導入、Vite 和 Nitro 服務器。
• 基于文件的 CMS：用 Markdown、YML、CSV 或 JSON 編寫內(nèi)容，并在組件中查詢它。
• 查詢生成器：使用類似 MongoDB 的 API 查詢內(nèi)容，以便在正確的時間獲取正確的數(shù)據(jù)。
• MDC 語法：在 Markdown 文件中使用 Vue 組件，支持 props、插槽和嵌套組件。
• 代碼高亮：使用支持 VS Code 主題的 Shiki 集成在網(wǎng)站上顯示漂亮的代碼塊。
• 隨處部署：Nuxt Content 支持靜態(tài)或節(jié)點服務器托管。

Github：https://github.com/nuxt/content