簡介

Nuxt3 是一個強大的 Vue.js 框架，它結合了服務器端渲染（SSR）和靜態站點生成（SSG）的優勢，同時提供了出色的開發體驗。本文將帶您深入了解 Nuxt3，探討如何利用它與 TypeScript 和 UnoCSS 構建高性能的服務器端渲染應用。我們將介紹 Nuxt3 的核心概念，包括其底層的 Nitro 服務器，以及如何配置和使用 Nuxt3 來創建現代化的 Web 應用。

讓我們開始吧

步驟 1: 安裝 Nuxt3

首先，讓我們通過 npm 創建一個新的 Nuxt3 項目：

bunx nuxi init nuxtapp-demo
# 如果不想選擇可以輸入以下指令
bunx nuxi init --gitInit --pacakgeManager=bun nuxtapp-demo
bun install

這將創建一個基本的 Nuxt3 項目結構，並安裝所需的依賴。

步驟 2: 安裝和配置 UnoCSS

接下來，我們將安裝 UnoCSS 並將其集成到 Nuxt3 項目中：

bunx nuxi module add unocss

配置檔的部分和 unocss 一樣使用 uno.config.ts

步驟 3: 了解 Nuxt3 的文件結構

Nuxt3 遵循約定優於配置的原則，主要的目錄結構如下：

my-nuxt3-app/
├── pages/
├── components/
├── layouts/
├── public/
├── server/
├── app.vue
├── nuxt.config.ts
└── tsconfig.json

• pages/: 路由頁面
• components/: Vue 組件
• layouts/: 頁面佈局
• public/: 靜態資源
• server/: 服務器端 API 路由
• app.vue: 應用的主要入口點
• nuxt.config.ts: Nuxt 配置文件

步驟 4: 配置 Nuxt3

更新 nuxt.config.ts 文件，配置 Nuxt3 的各種行為：

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // 模塊
  modules: [
    '@unocss/nuxt',
  ],
})

這裡我們啟用了 SSR，配置了嚴格的 TypeScript 檢查，並添加了 UnoCSS 模塊。

步驟 5: 創建一個 SSR 頁面

在 pages 目錄中創建一個新文件 index.vue，並使用 UnoCSS 樣式：

<template>
  <div class="p-4 bg-gray-100">
    <h1 class="text-2xl font-bold mb-4 text-blue-600">Welcome to {{ title }}</h1>
    <p class="text-gray-700">Server rendered at: {{ renderTime }}</p>
  </div>
</template>

<script lang="ts" setup>
const title = shallowRef('My Nuxt3 App')
const renderTime = new Date().toISOString()
</script>

這個頁面將在服務器端渲染，並使用 UnoCSS 的原子化 CSS 類進行樣式設置。

步驟 6: 使用 Nitro 創建服務器 API

Nitro 是 Nuxt3 的服務器引擎。讓我們在 server/api 目錄下創建一個 API 路由：
(檔案: server/api/hello.ts)

export default defineEventHandler((event) => {
  return {
    message: 'Hello from Nitro!'
  }
})

步驟 7: 在客戶端使用 API

現在，我們可以在 Vue 組件中使用 $fetch 來調用這個 API：

<script lang="ts" setup>
    const { data: response } = await useFetch('/api/hello')
</script>

<template>
  <div class="p-4 bg-gray-100">
    <h2 class="text-xl font-semibold mb-2">API Response:</h2>
    <p class="text-green-600">{{ response.message }}</p>
  </div>
</template>

步驟 8: 理解 SSR 和 SPA 模式

Nuxt3 支持兩種主要的渲染模式：

1. SSR（服務器端渲染）：頁面在服務器上渲染，然後發送到客戶端。這提高了首次加載性能和 SEO。

2. SPA（單頁應用）：初始頁面加載後，後續的頁面轉換在客戶端進行，提供更流暢的用戶體驗。

您可以在 nuxt.config.ts 中通過設置 ssr: false 來禁用 SSR，使應用以純 SPA 模式運行。

步驟 9: 使用 TypeScript 增強開發體驗

Nuxt3 原生支持 TypeScript。例如，我們可以為 API 響應定義類型：

(檔案: types/api.ts)

export interface HelloResponse {
  message: string
}

// 在組件中使用
const { data: response } = await useFetch<HelloResponse>('/api/hello')

步驟 10: 部署 Nuxt3 應用

Nuxt3 應用可以輕鬆部署到各種平台。例如，要部署到 Node.js 環境：

1. 運行 bun run build 構建應用。
2. 將 .output 目錄部署到您的服務器。
3. 運行 node .output/server/index.mjs 啟動服務器。

結論

Nuxt3 為 Vue 開發者提供了一個強大的框架，使構建高性能的服務器端渲染應用變得簡單。通過利用 TypeScript、Nitro 服務器和 UnoCSS，開發者可以創建既快速又可維護的 Web 應用。UnoCSS 的引入進一步增強了開發體驗，提供了更靈活和高效的樣式解決方案。

Nuxt3 的約定優於配置的方法，結合其靈活的配置選項，使得它適用於各種規模的項目。無論您是構建一個小型的個人博客還是大型的企業應用，Nuxt3 都能提供所需的工具和性能。

隨著 Web 開發的不斷演進，Nuxt3 與 UnoCSS 的結合代表了現代 Web 應用開發的前沿。通過本文介紹的步驟和概念，您已經有了開始使用 Nuxt3 和 UnoCSS 的堅實基礎。繼續探索和實踐，您將能夠充分利用這些強大工具的功能，創建出色的 Web 應用。