使用组件与定制组件

在建立网站时，我们可能会希望方便地在页面中使用一些 Vue 组件。关于在 VitePress 中使用 Vue 组件，你可以参考文档。

创建与注册全局组件

1. 新建一个组件 DocHero.vue

新建目录作为组件目录 .vitepress/theme/components/，增加如下 Vue 组件：

<!--./.vitepress/theme/components/DocHero.vue-->
<template>
   <div class="box">
       <slot ></slot>
   </div>
</template>

<style scoped>
.box {
    @apply mb-16 h-[200px] rounded-2xl;
    @apply bg-purple-500 text-white font-bold;
    @apply flex items-center justify-center;
    @apply text-2xl md:text-6xl;
}
</style>

2. 注册全局组件

修改 .vitepress/theme/index.ts

import DocHero from './components/DocHero.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app, router, siteData }) {
      app.component("DocHero", DocHero );
  }
} satisfies Theme

3. 在 .md 文件中使用

<DocHero> Runtime API </DocHero>

# global component

This is a global component test page.

页面效果如下：

来自文档中说明：组件的命名规则

请确保自定义组件的名称要么包含连字符，要么采用PascalCase（大驼峰命名法）。否则，它将被视为内联元素，并被包裹在<p>标签内，这将导致水合不匹配，因为<p>标签内不允许放置块级元素。

使用已有的组件

我们也可以在 .md 中使用已有的组件，具体可参考 Team Page 的做法：https://vitepress.dev/reference/default-theme-team-page

1. 示例：使用<VPTeamMembers>

例如，如果想要在任何页面使用 <VPTeamMembers>，我们可以这样使用：

<script setup>
import { VPTeamMembers } from 'vitepress/theme'

const members = [
  {
    avatar: 'https://www.github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  ...
]
</script>

# Our Team

Say hello to our awesome team.

<VPTeamMembers size="small" :members="members" />

2. 示例：使用<VPTeamPageSection>

它包含了数个 slot，可供更方便地使用：

<VPTeamPage>
  ...
  <VPTeamPageSection>
    <template #title>Partners</template>
    <template #lead>Lorem ipsum...</template>
    <template #members>
      <VPTeamMembers :members="data" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>

更多可参考：https://vitepress.dev/reference/default-theme-team-page

我们也可以绝对路径在引用theme-default中的组件。比如，假设想使用 VPNav.vue 组件，我们可以这样导入：

import VPNav from 'vitepress/dist/client/theme-default/components/VPNav.vue'