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

Question

我使用的是 VuePress 版本：

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

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

我的GithubLINK

在这里尝试了其他解决方案，但似乎没有任何帮助： 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/

Files in this directory will not be registered as Vue components automatically.

You need to use @vuepress/plugin-register-components, or register your components manually in .vuepress/clientAppEnhance.{js,ts}.

配置自动组件注册：

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

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

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

const { path } = require('@vuepress/utils')

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

demo

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

how to add a component in VuePress v.2.0.0?

vue.js

components

vuepress

.vuepress/components/