vitepress中使用vue
上一章vitepress中MarkDown扩展 - 掘金 (juejin.cn)
原理：在 VitePress 中，每个 Markdown 文件都被编译成 HTML，而且将其作为 Vue 单文件组件处理。
理解：
vitepress中的markdown文件会被当成vue组件处理
也就是说可以把markdown文件当成vue文件使用
也可以存在script标签和style标签和templete标签等
用法案例
<script setup lang="ts">
import {ref} from 'vue';
const count = ref(0);
</script>
<templete>
<div>templete模板</div>
{{count}}
</templete>
<style module>
</style>
效果：
templete模板
{{count}}
vue中嵌套markdown语法
<script setup lang="ts">
import {ref} from 'vue';
const count = ref(0);
</script>
<templete>
<div>templete模板</div>
{{count}}
</templete>
> [!NOTE] 提示
> 强调用户在快速浏览文档时也不应忽略的重要信息。
<style module>
</style>
效果：
templete模板
{{count}}
[!NOTE] 提示 强调用户在快速浏览文档时也不应忽略的重要信息。
使用外部vue组件文件
外部vue文件
<!-- docs/views/helloView.vue -->
<script setup lang="ts">
</script>
<template>
<div>
内部组件文件
</div>
</template>
使用外部vue组件：
<script setup lang="ts">
import {ref} from 'vue';
import helloView from './views/helloView';
</script>
<templete>
<div>templete模板</div>
<helloView></helloView>
</templete>
<style>
</style>
效果：
templete模板
[!TIP] 结论 由此可见，在vitepress中使用vue语法没有任何问题，并且可以利用一些vue的特性，让文档更加的简洁
注意：
由于一个vue文件中只能存在一个script标签，所以虽然我上面写了很多，但其实并不是，我只是在md文件中的上面写了一个script，里面包含了需要的内容，然后在下面使用的地方并没有再次去写script标签
例如：
<script setup lang="ts">
import {ref} from 'vue';
import helloView from '/views/helloView.vue';
const count = ref(0);
</script>
<!-- 第一个模板 -->
<templete>
<div>templete模板</div>
{{count}}
</templete>
<style module>
</style>
<!-- 第二个模板 -->
<templete>
<div>templete模板</div>
{{count}}
</templete>
> [!NOTE] 提示
> 强调用户在快速浏览文档时也不应忽略的重要信息。
<style module>
</style>
<!-- ... -->
如果不这样写，就会出现报错提示
[!CAUTION] [vitepress] Internal server error: Single file component can contain only one
<script setup>element
就是只允许出现一个<script setup>标签
