怎么样开发电脑软件库(Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建)
#头条创作挑战赛#
该系列已更新文章：
分享一个实用的vite+vue3组件库脚手架工具，提升开发效率
开箱即用yyg-cli脚手架：快速创建vue3组件库和vue3全家桶项目
Vue3企业级优雅实战-组件库框架-1搭建pnpmmonorepo
Vue3企业级优雅实战-组件库框架-2初始化workspace-root
Vue3企业级优雅实战-组件库框架-3搭建组件库开发环境
Vue3企业级优雅实战-组件库框架-4组件库的CSS架构
Vue3企业级优雅实战-组件库框架-5组件库通用工具包
Vue3企业级优雅实战-组件库框架-6搭建example环境
前面完成了组件库的开发环境搭建和example，咱们可以在example中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用，这时候就需要通过文档来展示组件库的使用以及各个组件的API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用vitepress来实现，在之前的文章《vitepress搭建组件库文档》已经详细介绍了vitepress1.0的使用，该文章中谈到的内容本文就快速略过。
1搭建组件库文档环境1.1初始化工程
前面在工程根目录创建docs目录，在命令行中进入docs目录，使用pnpm初始化：
pnpminit
安装vitepress为开发依赖：
pnpminstallvitepress-D
修改package.json文件的name，并添加scripts：
{"name":"@yyg-demo-ui/docs","version":"1.0.0","description":"","main":"index.js","scripts":{"dev":"vitepressdev","build":"vitepressbuild","serve":"vitepressserve"},"keywords":[],"author":"程序员优雅哥","license":"ISC","devDependencies":{"vitepress":"1.0.0-alpha.28"}}1.2创建目录及文件
在docs目录下创建.vitepress、public、components、demos、guide，分别存放vitepress配置文件、公共资源目录、组件文档描述、文档中的demo、组价库的其他说明文档。放一个logo.png图片到public目录下。
继续在docs目录下依次创建下列文件：
组件库首页index.md：
---layout:hometitle:YYG-DEMO-UIeditLink:truelastUpdated:truehero:name:yyg-demo-uitext:YYGVue3企业级中后台组件库tagline:组件库描述/SLOGANimage:src:/logo.pngalt:yyg-admin-uiactions:-theme:brandtext:快速开始link:/guide/-theme:alttext:组件link:/components/foofeatures:-icon:title:功能/特点1details:功能/特点1具体描述信息。-icon:title:功能/特点2details:功能/特点2具体描述信息。-icon:??title:功能/特点3。details:功能/特点3具体描述信息。---组件库菜单components.ts：
exportconstcomponents=[{text:'Foo组件示例',link:'/components/foo'}]//end
在guide目录下分别创建index.md和quickstart.md：
guide/index.md：
#组件库介绍yyg-demo-uiYYGVue3企业级中后台组件库guide/quickstart.md：
#快速开始xxxxxx##用法全局安装组件库
在components目录下创建示例组件的说明文档foo.md：
#Foo组件示例1.3添加插件并配置vitepress安装vitepress中预览组件的插件：
pnpmadd@vitepress-demo-preview/component@vitepress-demo-preview/plugin在.vitepress目录下创建config.ts：
import{DefaultTheme,defineConfig}from'vitepress'import{componentPreview,containerPreview}from'@vitepress-demo-preview/plugin'import{components}from'../components'constnav:DefaultTheme.NavItem[]=[{text:'指南',link:'/guide/'},{text:'组件',link:'/components/foo'}]constsidebar:DefaultTheme.Sidebar={'/guide':[{text:'指南',items:[{text:'组件库介绍',link:'/guide/'},{text:'快速开始',link:'/guide/quickstart'},]}],'/components':[{items:[...components]}]}exportdefaultdefineConfig({title:'yyg-admin-ui',description:'YYGVue3企业级中后台组件库',lang:'cn-ZH',base:'/',lastUpdated:true,themeConfig:{logo:'/logo.png',siteTitle:'yyg-admin-ui',outline:3,socialLinks:[{icon:'github',link:'https://github.com/vuejs/vitepress'}],nav,sidebar},markdown:{theme:{light:'vitesse-light',dark:'vitesse-dark'},lineNumbers:true,config(md){md.use(componentPreview)md.use(containerPreview)}}})在.vitepress目录下创建theme目录，并在theme中创建index.ts
importDefaultThemefrom'vitepress/theme'import{AntDesignContainer}from'@vitepress-demo-preview/component'import'@vitepress-demo-preview/component/dist/style.css'import{EnhanceAppContext}from'vitepress'exportdefault{...DefaultTheme,enhanceApp(ctx:EnhanceAppContext){ctx.app.component('demo-preview',AntDesignContainer)}}
此时组件库的文档结构就搭建好了，可以在docs目录下执行pnpmrundev，测试服务是否能正常启动，页面是否正常显示。
2编写组件的文档
上一步已经引入了用于展示组件demo的插件，这一步就简单了。
2.1安装elementplus和组件库在docs目录下安装依赖：
pnpminstallelement-pluspnpminstall@yyg-demo-ui/yyg-demo-ui在.vitepress/theme/index.ts中引入组件库：
...importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importYygDemoUifrom'@yyg-demo-ui/yyg-demo-ui'...exportdefault{...DefaultTheme,enhanceApp(ctx:EnhanceAppContext){ctx.app.use(ElementPlus)ctx.app.use(YygDemoUi)ctx.app.component('demo-preview',AntDesignContainer)}}2.2编写demo
在docs/demos目录下创建子目录foo，在foo目录下创建两个组件：
foo-1.vue：
foo-2.vue：
在docs目录下创建vite的配置文件vite.config.ts，该文件主要配置开发端口和jsx插件：
import{defineConfig}from'vite'importVueJsxfrom'@vitejs/plugin-vue-jsx'exportdefaultdefineConfig({plugins:[VueJsx()],server:{port:3100}})2.4在组件库文档中展示demo
在docs/components/foo.md文件中展示上面两个demo：
#Foo组件示例第一个示例：
pnpmrundev
访问http://localhost:3100/components/foo.html，可以看到foo组件的说明文档：
3.2打包构建打包组件库文档：
pnpmrunbuild
打包后的文档位于：docs/.vitepress/dist中。
预览打包后的结果：
pnpmrunserve
预览的效果与本地启动服务的效果一致。
到此咱们已经完成了组件库文档的开发环境搭建和打包构建，下一篇文章将分享加速器——创建新组建的脚手架cli的开发。
感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，程序员优雅哥会持续与大家分享更多干货