在 Markdown 里嵌 Vue 3

这个页面本身就是被 @mdit-vue/plugin-sfc 编译出来的 Vue SFC,所以下面三段都能直接跑。

一、使用全局 .vue 组件

组件放在 .vuepress/components/，并在 .vuepress/client.ts 注册为全局组件后，可在全站任何 Markdown 文章中直接使用标签：

<RegisterBits label="USART_CR1" :value="0xA5" />

USART_CR10x00A50000000010100101

二、同一个组件可以有独立状态

下面的实例和上面的实例互不影响,点一下寄存器位看看:

GPIOA_MODER0x0F000000111100000000

三、Markdown 内联 <script setup> + <style>

不建文件,脚本直接写在 markdown 里。sfc 会把它抽出来并合并进页面 SFC:

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

<button @click="count++">点了 {{ count }} 次</button>

实际效果:

响应式值:0;当前时间戳 1791179957382

四、能用的东西

• ref / computed / watch,onMounted 等组合式 API
• 主题已注册的全局组件,如 <Badge text="tip" type="tip" />
• SCSS 变量与主题遮罩变量:var(--vp-c-accent) 等