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
