Skip to content

Yoshino-UI/yoshion-docs

Repository files navigation

Yoshino-Docs

Based on Yoshino!Auto genearte component docs!

Intro

一个使用yoshino组件组件库构建的文档生成工具

在线示例

Usage

git clone https://github.com/Yoshino-UI/yoshion-docs.git your-rep

cd your-rep

npm i

// 启动开发环境
npm run dev

// 打包
npm run build

Config

docs/pages/routers.tsx

配置路由进行分块打包

export default [
  {
    component: getComponentAsyncLoading(
      () => import(/* webpackChunkName: "yoshino-alert" */ './Alert')
    ),
    path: '/docs/components/alert',
  },
];

在数组里添加组件文档文件,import分块引入对应文件,path对应路由路径。

docs/pages/pageMenu.tsx

export default [
  {
    name: '反馈',
    keyId: 'feedback',
    children: [
      {
        name: 'Alert(提示)',
        keyId: 'alert',
      },
    ]
  }
];

配置左侧菜单列

Example

添加一个新的组件的文档步骤

  • 复制pages/components/Alert文件夹到pages/components/下,更名为你的组件名,例如Button
  • 修改docs/pages/routers.tsx,添加Button配置
export default [
  {
    component: getComponentAsyncLoading(
      () => import(/* webpackChunkName: "yoshino-alert" */ './Alert')
    ),
    path: '/docs/components/alert',
  },
  {
    component: getComponentAsyncLoading(
      () => import(/* webpackChunkName: "yoshino-buttom" */ './Button')
    ),
    path: '/docs/components/button',
  },
];
  • 修改docs/pages/pageMenu.tsx,添加Button配置
export default [
  {
    name: '反馈',
    keyId: 'feedback',
    children: [
      {
        name: 'Alert(提示)',
        keyId: 'alert',
      },
      {
        name: 'Button(按钮)',
        keyId: 'button',
      },
    ]
  }
];

如果不想添加到反馈模块下,可以自己新建一个模块,修改如下

export default [
  {
    name: '反馈',
    keyId: 'feedback',
    children: [
      {
        name: 'Alert(提示)',
        keyId: 'alert',
      },
    ]
  },
  {
    name: '新模块',
    keyId: 'newModule',
    children: [
      {
        name: 'Button(按钮)',
        keyId: 'button',
      },
    ]
  }
];
  • 修改docs/pages/components/Button/index.md,为Button组件添加相关描述
  • 修改docs/pages/components/Button/api.tsx,为Button组件添加api文档
  • 修改docs/pages/components/Button/demo/demo.tsx以及docs/pages/components/Button/demo/demo.md,为Button组件添加组件示例和示例描述
  • 如果需要新增示例,复制docs/pages/components/Button/demo/demo.tsx以及docs/pages/components/Button/demo/demo.md并重命名,在docs/pages/components/Button/index.tsx进行引入
import Demo from './demo/demo';
import * as DemoMd from './demo/demo.md';
const DemoCode = require('!raw-loader!./demo/demo');

<CodeBox text={DemoMd} demo={<Demo/>} code={DemoCode}/>

About

一个用yoshino组件构建的组件库文档

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published