vue-33（实践练习：使用 Nuxt.js 和 SSR 构建一个简单的博客）

实践练习：使用 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