在 Markdown 中使用 Vue

VitePress 中每个 Markdown 文件都会被当作 Vue 单文件组件处理，所以可以直接写 Vue 代码。

插值语法

{{ 1 + 1 }}

渲染结果：2

指令

<span v-for="i in 3">{{ i }}</span>

输出：1 2 3

使用 <script> 和 <style>

在 Markdown 中可以直接写 Vue 的 <script setup> 和 <style>：

---
title: 我的页面
---

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

# 计数器

当前计数：{{ count }}

<button @click="count++">+1</button>

<style>
button {
  background: var(--vp-c-brand-1);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}
</style>

避免 <style scoped>

在 Markdown 中用 <style scoped> 会给每个元素加特殊属性，显著增大页面体积。建议用 <style module> 代替。

导入组件

局部导入

只在一个页面用的组件，直接在 Markdown 里导入：

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<MyComponent />

全局注册

多个页面都用的组件，在 .vitepress/theme/index.ts 里全局注册：

import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册全局组件
    app.component('MyComponent', MyComponent)
  }
}

访问页面数据

用 useData() 可以在任意位置获取当前页面的元数据：

<script setup>
import { useData } from 'vitepress'
const { page, frontmatter, theme } = useData()
</script>

<pre>当前路径: {{ page.path }}</pre>
<pre>页面标题: {{ frontmatter.title }}</pre>

转义 Vue 语法

不想让 Vue 解析的内容，用 v-pre 包裹：

<span v-pre>{{ 这里不会解析 }}</span>

代码块默认不受 Vue 影响。如果要在代码块里用 Vue 插值，语言后加 -vue：

```js-vue
Hello {{ 1 + 1 }}
```

CSS 预处理器

VitePress 内置支持 .scss、.less、.styl 文件。只需安装对应的预处理器：

npm install -D sass   # 或 less / stylus

然后直接写：

<style lang="scss">
.title {
  font-size: 20px;
}
</style>