组件文档-react-styleguidist

React components style guide generator（组件风格指导生成器）

只需要在代码的地方写好注释，然后自动生成可交互的文档。

一、参考文档

https://react-styleguidist.js.org/

https://react-styleguidist.js.org/examples/basic/

二、原理

Styleguidist依赖 代码注释， 类型定义， 声明，组件文件夹的 markdown文件而生成组件文档。

 

三、安装

用creat-react-app初始化一个项目，并安装styleguidist。

npm install --save-dev react-styleguidist

四、配置package.json文件

npx styleguidist server

npx styleguidist build

五、配置styleguide.config.js

module.exports = {
    sections: [
      {
        name: '介绍',
        content: 'docs/introduction.md'
      },
      {
        name: '项目文档',
        sections: [
          {
            name: '安装',
            content: 'docs/installation.md',
            description: '介绍安装哪些第三方包'
          },
          {
            name: '配置',
            content: 'docs/configuration.md'
          },
          {
            name: '在线案例',
            external: true,
            href: 'https://react-styleguidist.js.org/examples/basic/'
          }
        ]
      },
      {
        name: 'UI组件',
        content: 'docs/ui.md',
        components: 'src/components/**/*.js',
        exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
        usageMode: 'expand' // 'hide' | 'collapse' | 'expand'
      }
    ]
}  

六、写组件

在src/components目录下新建组件目录，比如button，里面添加button.jsx, button.css, button.md.

七、添加指引文档

在src/docs目录下新建不同的md文件。

转载于:https://www.cnblogs.com/camille666/p/react-styleguidist.html