VuePress添加自定义组件

最初需求

• 想在 VuePress 里开一个 “广场栏目”

  • 用来放一些有意思的 .vue 组件
  • 一边练手，一边学习 Vue、VuePress 和各种插件的整合

• 已经有可以一键部署的 VuePress，希望在现有框架上做，不想另起项目

遇到的问题

1. 组件放在哪儿的问题

   • 放在 components 子文件夹里，如何被 Markdown 自动识别
   • <ButtonDemo /> 在 Markdown 里不显示

2. 热更新/引用问题

   • 改 .vue 文件后，热更新没有触发
   • 组件根本没被 VuePress 引用到

3. 插件注册问题

   • 是否需要在 clientConfig 或 config.js 里注册组件
   • 找官方文档关于个性化组件注册的参考

4. 依赖安装冲突

   • 安装 @vuepress/plugin-register-components@next 报依赖冲突
   • 升级 VuePress 和 bundler 时出现 peer dependency 问题

5. Node 兼容性问题

   • crypto.hash is not a function 报错
   • 与 Vite 7 使用的 Node API 不兼容

6. 路径/模块引用问题

   • path is not defined
   • Cannot find package '@vuepress/utils'

7. pnpm/nvm/Windows 环境问题

   • Node 版本切换、pnpm 是否需要重新安装
   • Windows 下 nvm 使用注意事项

8. 最终组件显示

   • Markdown 中 <ButtonDemo /> 正确显示后，才确认组件注册和引入生效

最终实现的效果

可以在md里边直接引入自定义的组件