项目结构与打包配置
.husky
上传前git commit 检查
antd-tools
打包工具函数
antd-tools/cli
脚手架代码,run.js同来通过gulp.task执行gulp注册的命令,index.js用来解析命令行以及交互。
plugin目录
用来放置打包中的用到的自定义插件。
docs目录下的vueToMarkdown是识别.vue文件的自定义docs区块,将vue文件转化为生成markdown文件,完整保留了源码格式,将组件说明文档放在vue文件的自定义docs区块里与代码放在一个文件中,docs在转换过程分步解析,并支持中英文翻译。
md目录下的markdownToVue插件是将markdown文件转化为vue文件,采用gray-matter解析文件的前端内容,用到markdown-it插件的自定义规则来识别并解析vue文件中的markdown内容,将template,script,style,scriptContent文件内容识别出来,提取数据为pageData,然后处理文件内容,加入标签以及插槽,采用transformSync将ts代码内容转化为js内容并保存为sourceCode和jsSourceCode,最后重新组装生成一个vue格式文件内容返回为vueSrc。
site目录
组件库文档,npm run dev启动,命令行执行npm run predev && npm run routes && vite serve site,依次进行install安装,动态生成routes,vite serve启动项目
site/scripts目录
site的package.json运行的脚本文件
genrateRoutes.js是根据components来动态生成路由文件demoRoutes.js,globby插件用于模式匹配目录文件,采用gray-matter解析文件的前端内容,fs.writeFileSyncyo生成文件
site/layouts目录
组件库文档的布局文件,Demo是用于组件文档页展示的文件,通过markdownToVue插件转化,插槽展示components中每个组件的demo的index.vue文件
site/components目录
DemoBox.vue组件是不同组件示例的使用说明,通过markdownToVue方法将组件的docs中的每个组件示例包装成DemoBox组件
demoSort.vue组件是用来将不同组件示例进行排序