介绍

StoryBook,独立开发构建前端UI插件、页面的开源工具。可用于Vue、React、Angular的UI组件

安装

本例是采用React作为开发框架

自动安装

初始化React-App

1
2
3
4
5
# 
npx create-react-app react-app

cd react-app

React-App初始界面

初始化SotryBook

  • 全局安装storybook
1
yarn add -g sb
  • 局部安装storybook
1
yarn add sb
1
2
3
4
5
# 添加storybook
npx sb init

# 在开发模式中启动storybook
yarn storybook

storybook欢迎界面

初始化数据

新增两个文件夹

  • .storybook

存放storybook的配置文件，main.js、preview.js

  • src/stories

存放展示组件和数据，storybook初始化Button、Header、Page展示用

手动安装

创建项目文件夹react-app并npm初始化

1
2
3
mkdir react-app

cd react-app

添加react相关包

1
yarn add -D react react-dom

添加storybook的react包

1
yarn add -D @storybook/react

在根目录下增加.storybook文件夹，并创建main.js文件

1
2
3
4
// .storybook/main.js
module.exports = {
    stories: ['../**/*.stories.[tj]sx'],
};

在根目录下增加stories文件夹，文件内是作为storybook的数据和展示代码，直接从自动生成的文件拷贝过来就可以了