如何在VuePress v2.0.0版本中添加.vue组件并在md页面正常渲染

问题根因 #

你遇到的问题由两个常见错误共同导致：

1. VuePress v2 早期beta版本未内置组件自动注册能力，需要手动安装对应插件完成配置
2. 组件文件名和调用名不匹配，自动注册逻辑会直接映射文件名到可用组件名

具体解决方案 #

1. 安装组件注册插件

执行如下命令安装对应版本的注册插件：

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

2. 配置插件

在你的.vuepress/config.js配置文件中添加插件声明，指定组件存储目录：

module.exports = {
  // 其他原有配置保持不变
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: './components'
      }
    ]
  ]
}

3. 修正组件文件名

将.vuepress/components目录下的component.vue重命名为TestComponent.vue，也可以命名为test-component.vue，两种命名方式都会被自动识别为PascalCase格式的TestComponent组件，支持两种格式调用。

4. 验证效果

重启本地开发服务后，你在README.md中写的<TestComponent />或<test-component />都可以正常渲染出内容。

内容的提问来源于stack exchange，提问作者Dariusz Legizynski