TIP

Markdown文件使用自定的组件

效果

下面是使用两个组件

Vuepress Using Vue Component

点击查看代码

<hello display-text="test" />

<common-test />

配置

使用插件register-components

npm i -D @vuepress/plugin-register-components@next

需要将自定义的组件注册为全局组件

const { path } = require('@vuepress/utils')
module.exports = {
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: path.resolve(__dirname, './components'),
      },
    ],
  ],
}

定义组件

1. 在.vuepress文件夹下创建components文件夹
2. 创建自定义组件
   1. 可以直接在components创建组件，如hello.vue,使用的使用直接在markdown文件<hello />
   2. 创建自己的文件夹，在这个文件夹下面自定义组件，使用的时候需要将文件夹的名称带上，如<common-test />

参考

register-components | VuePress (vuejs.org)