Storybook速成指南：创建属于你的专属控件开发环境

2023-11-01 03:57:29

手把手教你快速搭建专属的storybook

什么是Storybook？

Storybook是一个辅助UI控件开发的工具。通过story创建独立的控件，让每个控件开发都有一个独立的开发调试环境。Storybook的运行不依赖于项目，开发人员不用担心由于开发环境、依赖问题导致不能开发控件。Storybook支持的框架覆盖主流的框架（React、Vue、Angular等），并提供丰富的功能和插件，大大提高了控件开发的效率和质量。

搭建专属Storybook的步骤

安装Storybook CLI
```
npm install -g @storybook/cli
```
创建一个新项目
```
npx create-storybook-app my-storybook
```
启动Storybook
```
cd my-storybook
npm start
```

创建你的第一个story

touch src/stories/Button.stories.js

import React from 'react';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary',
  variant: 'secondary',
};