實踐練習：使用 Nuxt.js 和 SSR 構建一個簡單的博客
使用 Nuxt.js 和 SSR 構建一個簡單的博客是鞏固你對服務器端渲染理解以及 Nuxt.js 如何簡化這一過程的好方法。這個練習將帶你完成設置基本博客結構、獲取數據并以用戶友好的格式展示，同時利用 SSR 的優勢來提升 SEO 和性能。我們將專注于與構建博客相關的 Nuxt.js 核心概念，例如目錄結構、asyncData 和 fetch 方法，以及動態路由。
設置 Nuxt.js 項目
首先，讓我們創建一個新的 Nuxt.js 項目。打開你的終端并運行以下命令：
npx create-nuxt-app nuxt-blog
CLI 會提示你幾個問題。這里是一個適用于簡單博客的建議配置：
- 項目名稱：nuxt-blog
- 編程語言：JavaScript
- 包管理器：npm 或 yarn（根據你的喜好選擇）
- UI 框架：無（我們將使用基本的 HTML 和 CSS）
- Nuxt 插件：Axios（用于獲取數據）
- 代碼檢查工具：ESLint（可選）
- 測試框架：無
- 渲染模式：通用（SSR）
- 部署目標：服務器（Node.js 托管）
- 開發工具：jsconfig.json（推薦）
創建項目后，導航到項目目錄：
cd nuxt-blog
理解 Nuxt.js 目錄結構
Nuxt.js 遵循特定的目錄結構，簡化了開發。以下是我們的博客的關鍵目錄分解：
pages/: 此目錄包含您應用程序的頁面和路由。此目錄中的每個.vue文件都根據其文件名自動成為一條路由。例如，pages/index.vue成為根路由 (/)，而pages/blog/_slug.vue（稍后更多介紹）將處理動態博客文章路由。layouts/: 此目錄包含您應用程序的布局。除非指定了不同的布局，否則default.vue布局將用于所有頁面。components/: 此目錄包含可在您的頁面和布局中使用的可重用 Vue 組件。static/: 此目錄包含靜態資源，如圖像、字體和其他無需 Webpack 處理的文件。nuxt.config.js: 該文件包含您的 Nuxt.js 應用的配置，例如模塊、插件和構建設置。
創建博客文章數據結構
在這個示例中，我們將使用一個簡單的 JSON 文件來存儲我們的博客文章數據。在現實世界的應用中，你通常會從數據庫或 API 中獲取這些數據。
在項目的根目錄下創建一個名為 data 的新目錄，并在其中創建一個名為 posts.json 的文件。添加以下示例數據：
[{"slug": "first-post","title": "My First Blog Post","content": "This is the content of my first blog post. It's a great start to my blogging journey!","date": "2024-01-26"},{"slug": "second-post","title": "Another Interesting Post","content": "This is another blog post with some interesting content. I hope you enjoy reading it!","date": "2024-01-27"}
]
構建索引頁面
索引頁面將顯示所有博客文章的列表。在 pages 目錄下創建一個名為 index.vue 的文件，并添加以下代碼：
<template><div
