monorepo里基于vitepress搭建组件库文档

36 阅读1分钟

pnpm+monorepo大多都是在各大UI组件库里使用,但是在业务里使用且有docs的项目很少,所以查了挺长时间也没找到示例,自己尝试着搞了出来。

项目结构

image.png

在根目录

pnpm vitepress init

注意在启动也要在根目录启动,因为启动时会创建cache文件夹在.vitepress文件夹里,最开始我一直在docs层启动,此时会把cache创建在docs的目录下,导致打开时404找不到资源。

它的使用文档就在这里:Markdown 扩展 | VitePress

疑问1、如何在docs里访问_public/components的组件?

在根目录的package.json中加入到pnpm的工作空间里来

image.png

image.png

然后就可以在此引入使用了

image.png

疑问2、有些组件需要调用utils里的接口怎么调用?

一直看其他库文件docs里有vite.config.js文件,所以我也引入了,它确实也会解析,但是点进vitepress的源码里发现它的defineConfig里有vite属性,然后把server proxy一配置就好了。

image.png

疑问3、我项目有用到svg-icon,这个组件该怎么初始化?

这个找了半天文档,可以在.vitepress下创建theme文件夹进行注册组件,然后再在vite里配置svg的文件路径即可

image.png

image.png