自定义 Vue 组件

在 VitePress 中实现内联 Vue 组件

Markdown 文件中可以用 <script> 和 <style> 标签

如：

• <script setup>

• <style module>

警告

不能使用 <template> 标签

所有标签都应放在 frontmatter 之后

---
hello: world
---

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

const count = ref(0)
</script>

## Markdown Content

The count is: {{ count }}

<button :class="$style.button" @click="count++">Increment</button>

<style module>
.button {
  color: red;
  font-weight: bold;
}
</style>

在 Markdown 中导入组件

VitePress默认就支持在markdown中使用Vue组件，唯一的缺点是需要单独将组件文件引入， 如果一个组件只被几个页面使用，建议在使用它们的地方先引入

这使它们可以正确地进行代码拆分，并且仅在显示相关页面时才加载

<script setup>
import CustomComponent from '../../components/CustomComponent.vue'
</script>

# Docs

This is a .md using a custom component

<CustomComponent />

## More docs

...

手动创建一个components目录，然后将这个CustomComponent.vue组件引入实现