Storybook

文档地址： https://storybook.js.org/docs/guides/quick-start-guide/

是一个开源工具，用于独立开发React、Vue的UI组件。它能有组织和高效地构建UI组件
以react为例:

mkdir story
cd story
npm init

npm i --save-dev @storybook/react
npm i --save react react-dom
npm i --save-dev @babel/core
npm i --save-dev babel-loader

添加脚本

{
  "scripts": {
    "storybook": "start-storybook"    // 指定配置文件目录为 .storybook
    "build-storybook": "build-storybook -c .storybook -o .public"
  }
}

新建 .storybook/config.js

import { configure } from '@storybook/react';
function loadStories() {
  require('../stories/index.js'); // 指定 story 的位置
  // 可以是任意目录，根据自己需要写路径
}
configure(loadStories, module);

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo'; // 这里引入你想展示的组件

storiesOf('Button', module)
  .add('with text', () => (  
// 一个 add 表示添加一个 story
    <Button>Hello Button</Button>
  ))
  .add('with some emoji', () => (  // 这里是另一个 story
    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
  ));

npm run storybook