【前端实习】VuePress2实现组件库文档的自定义主题demo

背景

• 公司基于Element-PLUS封装的组件库已经搭建完成，但是缺少配套的组件库文档，leader让我研究一下VuePress。主要需求是：主题的自定义，如将侧边栏的显示效果与颜色进行定制化，组件代码显示隐藏的自定义动态效果展示。
• 由于是Vue3+Ts开发的组件库，优先选择VuePress或VitePress，目前VuePress版本为2.0.0 rc14预发布版本，不够稳定，所以此demo选取rc0版本。

整体流程概述

1. pnpm下载@vuepress/theme-default，layout布局和常用navbar和siderbar
2. 将node_modules的代码直接copy至自己的项目中，在其基础上二次开发
3. 获取配置数据，通过useThemeLocalData()获取主题配置项新加的任何字段和值
4. 获取页面数据，通过usePageData()获取页面的标题集合，frontmatter，路由路径和页面标题等数据

技术细节

提示：这里可以添加技术细节

1. 基础架子搭建

注意vuepress2-rc0，由于是预发布版本，有很多重大改变，最新版是rc14，打包方式已经变为vite，此demo选择rc.0版本。

pnpm add vuepress@2.0.0-rc.0 @vuepress/client@2.0.0-rc.0 @vuepress/theme-default@2.0.0-rc.0 @vuepress/bundler-vite@2.0.0-rc.0 [vue@3.3.11](mailto:vue@3.3.11) element-plus@2.4.3

2. 将@vuepress/theme-default复制到自己项目中，进行二次开发

将node_modules里面的theme-default复制至src下，在此基础上进行二次开发主题（可以引入element+等ui组件库）。

将theme-default的package.json中的sass和dependencies全部加入自己项目最外层的package.json，然后pnpm install。

3.配置主题数据的获取

在config.ts里面加入自定义字段，来看

需要在此目录下options.d.ts添加自定义字段

4. page数据获取

Headers是md内容的标题

5. 定位修改主题样式

6. 使用Element-PLUS等UI组件库自定义开发主题

在client.ts里面引入element+

在page.vue引入elbutton

小结

仍在在探索中，尤其是VitePress和VuePress技术选型的问题，欢迎各位大佬评论区批评指正。
接下来的工作：

• 使用VuePress2搭建一个个人博客，进一步熟悉VuePress2的开发
• 学习并对比VuePress和VitePress，参与组件库文档的开发。