Storybook(一)

@TOC

欢迎使用Storybook

你好！ 这是你第一次使用 Storybook 这个工具。如果你想学习如何使用Storybook, 可以仔细阅读这篇文章，了解一下Storybook的基本知识。

基本用法

我们对Storybook进行了一些说明，除了标准的Storybook功能，我们整理了如下几点新功能，帮助你用它写组件：

1. 初始化 项目；
2. 安装依赖；
3. 增加 脚本 命令；
4. 新建 .storybook/config.js 文件；
5. 在stories/index.js 写 story；
6. 运行看效果( 组件更改可实时刷新 )；

初始化项目

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 -p 9001 -c .storybook" // 指定配置文件目录为 .storybook
  }
}

新建 .storybook/config.js 文件

链接: storybook.

import { configure } from '@storybook/react';

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

configure(loadStories, module);

在 stories/index.js 写 story

// An highlighted block
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">