vuepress的markdown中引入vue单文件组件

前言

有这个需求，需要封装一些组件 在markdown中使用。

找遍官方文档发现没有,顶多也就支持可以在md里定义<script setup>将md作为一个vue组件去使用 Markdown 与 Vue SFC，但是这无满足我的需求。

最后发现官方提供了一个plugin-register-components插件，可以支持此需求

安装

yarn add --dev @vuepress/plugin-register-components@next

使用

vue组件放在这个位置

你的项目
   |---docs
      |---vuepress
        |---components

配置文件启用此插件

const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')

module.exports = {
  plugins: [
    registerComponentsPlugin({
      // 配置项
       componentsDir: path.resolve(__dirname, './components'),
    }),
  ],
}

进阶

vue单文件组件获取md信息

如上引入的这个单文件组件，如何获得当前md的文件信息呢。如下即可

<script setup>
import { usePageData } from "@vuepress/client";

const pageData = usePageData();
console.log(pageData);
</script>

<template>你好世界</template>

usePageData是vuepress提供的一个钩子，隶属于客户端api中，更多细节可以去看它的官方文档

通过客户端配置文件 注册vue单文件组件

除了上边说的 通过客户端配置文件也可以注册全局vue组件 提供md使用

├─ docs
│  ├─ .vuepress
│  │  ├─ client.js   <--- 客户端配置文件
│  │  └─ config.js   <--- 配置文件
│  └─ README.md
├─ .gitignore
└─ package.json

客户端配置文件里增加如下代码

import { defineClientConfig } from '@vuepress/client'
import MyComponent from './MyComponent.vue'

export default defineClientConfig({
  enhance({ app }) {
    app.component('MyComponent', MyComponent)
  },
})

tips: 除了全局的客户端配置文件，插件和主题都可以通过clientConfigFile属性来设置配置客户端