介绍
@beisen/storybook-ui 是一款基于 React 开发的快速前端 UI 开发工具，借助该工具可以快速组装出漂亮、丰富的 UI 展示页面。该工具可以轻松实现在开发过程中快速开发组件的交互，提高了开发的效率和质量。
安装
# 使用 npm 安装 npm install @beisen/storybook-ui --save-dev
基本使用
在安装完成后，可以在项目的根目录下建立一个 src 文件夹，在其中创建一个 Button.tsx 文件，如下所示：
-- -------------------- ---- -------
------ ------ - -- - ---- -------
--------- ----------- -
----- ------
--------- -- -- ----
-
----- ------- --------------- - -- ----- ------- - -- -- -- -- -- -
------ -
------- ------------------
------
---------
-
-
------ ------- ------在 src 文件夹下再创建一个 index.tsx 文件，这里将引入 Button 组件并将其渲染到页面上，如下所示：
import React from 'react'
import ReactDOM from 'react-dom'
import Button from './Button'
ReactDOM.render(<Button text="Click me!" />, document.getElementById('root'))接着，在项目的根目录下，创建一个 .storybook 文件夹，在其中创建一个 main.js 文件来配置 Storybook，内容如下所示：
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(jsx|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
}在 .storybook 文件夹下创建一个 preview.js 文件用来配置 Storybook 的样式，内容如下所示：
-- -------------------- ---- -------
------ ---------------
------ ------------------
------ ----- ---------- - -
-------- - -------------- ------------ --
--------- -
--------- -
------ -----------------------
----- --------
--
--
-在 src 文件夹中新建一个 Button.stories.tsx 文件来编写 Button 组件的故事，内容如下所示：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ ---- - ---- ------------------
------ ------- - ----------- - ---- ----------
------ ------- -
------ --------------------
---------- -------
--------- -
-------- - ------- --------- --
--
- -- ----
----- --------- ------------------ - ------ -- ------- --------- --
------ ----- ------- - -----------------
------------ - -
----- -------- --------
-
------ ----- --------- - -----------------
-------------- - -
----- ---------- --------
-最后，在项目根目录下创建一个 storybook.ts 文件来运行 Storybook。在该文件中，导入 @storybook/react 和配置信息，启动 Storybook 应用程序。如下所示：
import { configure } from "@storybook/react"
configure(require.context("../src", true, /\.stories\.tsx?$/), module)在命令行运行下列命令：
npm run storybook
此时就可以在浏览器中输入 http://localhost:6006 打开 Storybook 进行预览了。
高级使用
除了基本的使用方法，@beisen/storybook-ui 还提供了更多的高级使用方法，可以进一步提高开发的效率和质量。
故事（Story）结合 Hooks 使用
在使用 hooks 的组件中，可以使用 Storybook 中提供的 useEffect 和 useCallback 来编写故事，以 useEffect 为例，编写方式如下所示：
-- -------------------- ---- -------
------ ------ - --- --------- --------- - ---- -------
--------- ------------ -
------ ------
-
----- -------- ---------------- - -- ----- -- -- -
----- ------- --------- - -----------
------------ -- -
-------------- - --
-- ---
------ -
-----
-------------- --------------
------
-
-
------ ------- -------然后在故事中写入：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ ---- - ---- ------------------
------ -------- - ------------ - ---- -----------
------ ------- -
------ ---------------------
---------- --------
- -- ----
----- --------- ------------------- - ------ -- -
----- ------- --------- - -----------
------------ -- -
---------------- -- ----- - --
-- ---
------ -------- --------- ---------------------- ---------- --
-
------ ----- ------- - -----------------
------------ - -
------ -------- ---------
-这样，当故事在 Storybook 中渲染时，可以顺利地使用 React hooks。
编写故事时传入样式
可以使用 global 包裹全局样式，也可以使用 Knobs 包装组件样式，以实现更丰富的故事展示。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------ ---- - ---- ------------------
------ - ---------- ------- - ---- ------------------------
------ ------- - ----------- - ---- ----------
------ ------- -
------ --------------------
---------- -------
----------- ------------
----------- -
----- -
-------------- -----
------------ -
---------- -- ------ -------- ------ ------------
--
--
--
- -- ----
----- --------- ------------------ - ------ -- -
------- --------- ----------------------------- ------- --
-
------ ----- ------- - -----------------
------------ - -
----- -------- --------
-在这个例子中，我们使用了 Storybook 中提供的 withKnobs 来包裹样式，让用户在故事中调整样式属性，更加细致地展示组件能力。
结论
@beisen/storybook-ui 是一个快速的前端 UI 开发工具，可以帮助开发者以最少的代码实现丰富的 UI 呈现，并且其拥有丰富的高级使用方法，使开发更加高效和质量更好。希望本文可以帮到您的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/128082