如何在 VuePress v.2.0.0 中添加组件？

Question

我使用的是 VuePress 版本：

"devDependencies": {
    "vuepress": "^2.0.0-beta.26"
}

我无法将简单的 .vue 组件添加到我的 .md 页面。

我的 Github LINK

在这里尝试了其他解决方案，但似乎没有任何帮助： Solution1 Solution2

我正在关注官方VuePress documentation 关于组件的指南。但我得到的只是一个零大小的组件（没有显示内容）

非常感谢任何解决方案。

编辑：

使它比检查我的 github 更简单一些。无论如何，整个项目只包含 2 个文件。

所以我所做的就是在 .vuepress/components 中创建一个新的 component.vue 文件：

<template>
<h1>Hello from my test component</h1>
</template>

<script>
export default {}
</script>

<style></style>

并尝试将其添加到我的 README.md 文件中：

# Hello VuePress

### test component

<TestComponent />

<kebab-case-test-component />

我的文件夹树的屏幕截图：

Answer 1

来自VuePress 1.x to 2.x migration docs：

.vuepress/components/

此目录中的文件不会自动注册为 Vue 组件。

您需要使用@vuepress/plugin-register-components，或者在.vuepress/clientAppEnhance.{js,ts}中手动注册您的组件。

配置自动组件注册：

1. 安装@vuepress/plugin-register-components插件：

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

2. 添加.vuepress/config.js，内容如下：

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

demo