在 Markdown 中使用 Vue
在 VitePress 中，每个 Markdown 文件都会被编译成 HTML，然后作为 Vue 单文件组件处理。这意味着你可以在 Markdown 中使用任何 Vue 功能，包括动态模板、使用 Vue 组件或通过添加 <script> 标签来使用任意的页面内 Vue 组件逻辑。
模板语法
插值
每个 Markdown 文件首先被编译成 HTML，然后作为 Vue 组件传递给 Vite 处理管道。这意味着你可以在文本中使用 Vue 风格的插值：
输入
md
{{ 1 + 1 }}输出
text
2指令
指令也同样可以使用：
输入
md
<span v-for="i in 3" :key="i">{{ i }}</span>输出
123
使用组件
当你需要更大的灵活性时，VitePress 允许你使用自己的 Vue 组件扩展你的创作工具包。
在标题中导入
如果你的组件只在少数几个地方使用，推荐的使用方式是在使用它的文件中导入组件。
md
<script setup>
import CustomComponent from '../components/CustomComponent.vue'
</script>
# Docs
This is a .md using a custom component
<CustomComponent />
## More docs
...在主题中全局注册
如果组件将在文档的多个页面中使用，它们可以在主题中全局注册（或作为扩展默认 VitePress 主题的一部分）。查看主题指南了解更多信息。
在 .vitepress/theme/index.js 中，enhanceApp 函数接收 Vue 应用实例，因此你可以像在常规 Vue 应用中一样注册组件。
js
import DefaultTheme from 'vitepress/theme'
export default {
extends: DefaultTheme,
enhanceApp(ctx) {
// 注册全局组件
ctx.app.component('MyGlobalComponent', /* ... */)
}
}浏览器 API 访问限制
因为 VitePress 应用程序在生成静态构建时在 Node.js 中进行服务器端渲染，所以任何 Vue 使用都必须符合通用代码要求。简而言之，确保只在 beforeMount 或 mounted 钩子中访问浏览器/DOM API。
如果你正在使用或演示对 SSR 不友好的组件（例如，包含自定义指令），你可以将它们包装在内置的 <ClientOnly> 组件中：
md
<ClientOnly>
<NonSSRFriendlyComponent />
</ClientOnly>另请参阅：