VuePress添加自定义组件

最初需求

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

    • 用来放一些有意思的 .vue 组件
    • 一边练手,一边学习 Vue、VuePress 和各种插件的整合
  • 已经有可以一键部署的 VuePress,希望在现有框架上做,不想另起项目


遇到的问题

  1. 组件放在哪儿的问题

    • 放在 components 子文件夹里,如何被 Markdown 自动识别
    • <ButtonDemo /> 在 Markdown 里不显示
  2. 热更新/引用问题

    • .vue 文件后,热更新没有触发
    • 组件根本没被 VuePress 引用到
  3. 插件注册问题

    • 是否需要在 clientConfigconfig.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里边直接引入自定义的组件