介绍

Nuxt.js 是一个用于构建 Vue.js 应用程序的流行开源框架。随着 Nuxt 3 的发布，开发者可以访问新功能和改进来简化开发过程。其中一个功能是 Nuxt Content v2，它允许你以简单高效的方式创建和管理内容。在这篇博客文章中，我们将指导你完成将 Nuxt Content v2 与 Nuxt 3 连接的步骤。

步骤 1：安装必要的依赖

第一步是安装 Nuxt Content v2 的必要依赖。为此，运行以下命令：

npm install @nuxt/content@next

步骤 2：配置 Nuxt Content v2

安装依赖后，你需要在 Nuxt 3 项目中配置 Nuxt Content v2。为此，在项目根目录中创建一个名为 nuxt.config.js 的新文件并添加以下代码：

export default {
  // 启用 Nuxt Content 模块
  modules: [
    '@nuxt/content'
  ],

在上面的代码中，我们启用了 Nuxt Content 模块并设置了存储内容的目录。

步骤 3：创建内容文件

配置 Nuxt Content v2 后，你可以在指定目录中创建内容文件。默认情况下，Nuxt Content v2 支持 Markdown 和 YAML 文件格式。你可以在

目录中创建一个具有以下结构的新文件：

---
title: '你好，世界！'
---

# 欢迎使用 Nuxt Content v2

这是使用 Nuxt Content v2 创建的 Markdown 文件示例。

在上面的代码中，我们创建了一个带有标题和示例内容的 Markdown 文件。

步骤 4：在页面上显示内容

现在我们已经创建了内容文件，我们可以在页面上显示内容。为此，在 components 目录中创建一个新的 Vue 组件，代码如下：

<script setup lang="ts">
const { path } = useRoute()
const articles = await queryContent(path).findOne()
</script>

<template>
  <main>
    <div>
      <ContentRenderer :value="articles">
        <template #empty>
          <p>No content found.</p>
        </template>
      </ContentRenderer>
    </div>
  </main>
</template>