Storybook
文檔地址： https://storybook.js.org/docs/guides/quick-start-guide/
是一個開源工具铃肯，用于獨立開發(fā)React、Vue的UI組件押逼。它能有組織和高效地構(gòu)建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 的位置
// 可以是任意目錄步藕，根據(jù)自己需要寫路徑
}
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
