本文已参与「新人创作礼」活动，一起开启掘金创作之路。

目录

• 开发
• 自定义配置
• 相关链接

docz

Docz是一套组件库文档实现方案，能解决组件库开发过程中生成文档的问题。 包含：组件列表、组件展示、组件属性列表、组件编辑调试等功能。 和Storybook相比，Storybook社区支持更强，更多配置控件，更多功能。docz则是开发成本更低，生成组件库更方便，不需要写太多多余代码。个人认为docz生成组件库样式要略微丑了些。。

开发

安装

npm install docz 
npm run docz:dev

或

yarn add docz # react react-dom

安装完成后添加命令即可

// package.json
	"docz:dev": "docz dev",
 	"docz:build": "docz build",
   	"docz:serve": "docz build && docz serve"

运行

npm run docz:dev

或

yarn docz:dev # or yarn docz dev

发布

npm run docz:build

或

yarn docz:build

组件文档

项目任意位置创建mdx文件即可，目录菜单在mdx中配置

---
name: Hello world
route: /hello
---

文档的配置

每个文档需要包含文档的基本信息：

---
name: My Document
route: /custom-route
menu: Documents
---

name: 文档的名称，用作页面的标题
route(可选) : 指向文档生成页面的路由或路径。例如:/docs/my-component
menu：包含文档的菜单，可更改这个属性将文档分组到单个菜单中。

自定义配置

根目录下创建doczrc.js文件

export default {
    dest: '/docs',    //   change the build destination 
    base: '/docs-src',
    title: '@tencent/demopage-components', // 站点标题
    typescript: true, // 组件源文件是通过typescript开发，需要打开此选项
  }

其他参数：

• 支持ts： typescript:true

输出目录配置为docs，可以搭配git page直接生成文档在线说明

相关链接

官网 文档