API 示例

本页展示了一些 VitePress 提供的运行时 API 的使用示例。

useData()

useData() 辅助函数提供对当前页面的访问权限。

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

<template>
  <div>
    <h1>{{ page.title }}</h1>
    <p>当前页面路径: {{ page.relativePath }}</p>
  </div>
</template>

useRoute()

<script setup>
import { useRoute } from 'vitepress'

const route = useRoute()
</script>

<template>
  <div>
    当前路径: {{ route.path }}
  </div>
</template>

自定义组件

你可以在 Markdown 文件中直接使用 Vue 组件。

Badge 组件

VitePress 内置了 Badge 组件：

• 新功能 new
• 警告 beta
• 危险 deprecated

动态内容

计数器: 0

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<div>
  <p>计数器: {{ count }}</p>
  <button @click="count++">增加</button>
</div>

更多资源

查看 VitePress 官方文档 了解更多 API 和功能。