下面是完整的“Vitepress的文档渲染基础教程”的攻略。

Vitepress的文档渲染基础教程

简介

Vitepress 是一种基于 Vue 的静态站点生成器，适用于构建技术文档等静态站点。

Vitepress 充分利用 Vue 的单文件组件（SFC）能力，并在 VuePress 的基础上通过 Vite 构建实现高效的站点构建。 Vitepress 可以让你使用 Vue 的全套能力编写文档和示例代码，并以标准 Markdown 的格式编写文档。

安装和使用 Vitepress

环境要求

如果您想要使用 Vitepress，需要先确认您的电脑上已经安装以下工具：

• Node.js v12.0.0 +
• npm 或 Yarn

安装 Vitepress

运行以下命令来全局安装 Vitepress：

npm install -g vitepress

或者你可以使用 Yarn 安装 Vitepress：

yarn global add vitepress

使用 Vitepress 创建一个新项目

当你在电脑上安装了 Vitepress 后，可以使用以下命令创建新的 Vitepress 站点：

vitepress dev

其中，dev 是 Vitepress 提供的一个默认命令，它会在当前目录创建一个新的站点，并启动 dev 服务器以预览你的站点。

渲染 Markdown 内容

编写 Markdown 文件

我们习惯在 Vitepress 站点上写 Markdown 文档来描述文档内容。 Vitepress 支持在 Markdown 文件中使用 Vue 单文件组件以及使用约定的 Markdown 扩展。

以下是一个简单的 Markdown 文件示例 example.md:

---
sidebar: auto
---

# Hello, Vitepress!

This is an example article written in markdown!

该示例文件使用 YAML frontmatter 语法定义了一个 sidebar: auto 选项，该选项告诉 Vitepress 生成的站点侧边栏内容根据标题（#）内容自动生成。

在 Vue 单文件组件中使用 Markdown

在 Vue 单文件组件（.vue）中，可以使用以下语法定义 Markdown 内容：

<template>
  <div>
    <h1>{{ title }}</h1>

    <Markdown :source="markdownContent" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Markdown from 'vitepress/components/Markdown.vue'

export default defineComponent({
  name: 'MyComponent',

  components: {
    Markdown,
  },

  data() {
    return {
      title: 'Hello, Vitepress!',
      markdownContent: `
        This is an example article written in markdown!

        ${"```"}js
        const example = 'Hello, World!'
        ${"```"}
      `,
    }
  },
})
</script>

示例中，使用了 Vitepress 与 Markdown 相关的两个 API： <Markdown :source="..." /> 和 vitepress/components/Markdown.vue。

<Markdown :source="..." /> 用于渲染 Markdown 内容，而 vitepress/components/Markdown.vue 是一个 Vitepress 内置组件，用来处理 Markdown 渲染的工作。

结束语

以上就是 Vitepress 的文档渲染基础教程的完整攻略。希望可以帮助到初学者更好地理解如何使用 Vitepress 渲染 Markdown 内容。