自定义组件
VuePress 的页面本质上是 Vue 应用，因此可以在 Markdown 中直接使用 Vue 组件。这篇文章演示如何在 plume 主题中创建、注册并使用一个自定义组件——本页面中的彩色卡片就是最终效果。
1. 创建组件
在 docs/.vuepress/theme/components/ 目录下新建 DemoCard.vue：
<script setup>
defineProps({
title: { type: String, default: '' },
color: { type: String, default: '#2a9dff' },
})
</script>
<template>
<div class="demo-card" :style="{ '--demo-card-color': color }">
<p v-if="title" class="demo-card-title">{{ title }}</p>
<div class="demo-card-body">
<slot />
</div>
</div>
</template>
<style scoped>
.demo-card {
margin: 16px 0;
padding: 14px 18px;
border: 1px solid var(--demo-card-color);
border-left-width: 4px;
border-radius: 8px;
}
</style>组件接收 title 和 color 两个 props，并通过 <slot /> 接收 Markdown 中写的嵌套内容。
2. 注册组件
在 docs/.vuepress/client.ts 中把组件全局注册：
import { defineClientConfig } from 'vuepress/client'
import DemoCard from './theme/components/DemoCard.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('DemoCard', DemoCard)
},
})3. 在文章中使用
注册之后，任何 Markdown 文件里都可以直接书写组件标签：
<DemoCard title="这是一个自定义组件" color="#8b5cf6">
它在 Markdown 中直接使用，支持 `props` 和插槽。
</DemoCard>实际渲染效果：
这是一个自定义组件
它在 Markdown 中直接使用，支持 `props` 和插槽。
换个颜色试试
通过 `color` 属性可以改变卡片的主题色。
注意事项
- 组件名建议使用大驼峰（如
DemoCard），避免与 HTML 原生标签冲突 - 组件内的样式使用
scoped，不会污染页面其他部分 - 需要在组件里使用全局状态（如路由信息）时，可以在
enhance钩子里安装插件，或直接在组件中引入vuepress/client提供的组合式 API
版权所有
版权归属：fantasy