使用 Storybook 构建组件库

不念不忘少年蓝@ 2024-05-07 22:15 8阅读 0赞

Storybook 是一个用于 UI 开发的开源工具，允许开发人员单独构建和组织 UI 组件。它充当“研讨会”环境，您可以在其中查看组件在各种状态下的外观和行为，而无需将它们嵌入到应用程序的主 UI 中。这使得开发、测试和记录组件变得更加容易。为什么要使用它？

隔离：隔离开发组件，这意味着一个组件的更改不会影响其他组件。这意味着要查看组件在不同状态下的外观和行为，我们不需要嵌入它们并导航到特定的用户旅程。查看热门视频 sdk 的故事书 Agora。您可以看到每个组件及其提供的状态/控件。

声网故事书

您可以在这里查看他们的整个故事书

文档：自动生成文档，使共享组件的使用方式变得更加容易。通常其他开发人员不知道预先存在的组件并最终创建自己的版本，这成为维护挑战。

交互式游乐场：提供交互式 UI 来使用组件属性（旋钮）。

视觉测试：支持视觉回归测试以捕获视觉错误。通常，视觉回归很难用传统的 e2e 测试进行测试，视觉测试有助于消除手动检查

开始使用故事书  
要开始使用 Storybook，您通常会将其集成到已使用 React、Vue 或 Angular 等 UI 框架设置的项目中。以下是在 React 项目中设置它的方法：

安装故事书：

如果您设置了 React 项目，则可以通过在项目目录中运行以下命令来添加 Storybook：  
npx sb init  
运行故事书：

安装后，您可以使用以下命令启动 Storybook 服务器：

npm run storybook

此命令将在本地服务器上启动 Storybook 环境，通常可通过http://localhost:6006进行访问。

创建一个故事：

Storybook 中的故事是定义如何呈现组件的 JavaScript 模块。您编写故事来显示 UI 组件的每个状态。以下是 React 项目中简单 Button 组件的故事示例：

// Button.stories.js
     import React from 'react';
     import {
       
         Button } from './Button';
    
     export default {
       
        
       title: 'Button',
       component: Button,
     };
    
     export const Primary =

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 Storybook 构建组件库

Storybook 是一个用于 UI 开发的开源工具，允许开发人员单独构建和组织 UI 组件。它充当“研讨会”环境，您可以在其中查看组件在各种状态下的外观和行为，而无需将...

不念不忘少年蓝@/ 2024年05月07日 22:15/ 0 赞/ 9 阅读

相关 nuxt2-storybook-vite：环境搭建、基础使用 / nuxt项目组件库

一、创建 nuxt2 项目 [安装 - NuxtJS | Nuxt.js 中文网][- NuxtJS _ Nuxt.js] yarn create nuxt-a

港控/mmm°/ 2024年03月24日 20:43/ 0 赞/ 19 阅读

相关 vue3-ts-storybook：理解storybook、实践 / 前端组件库

一、理解 storybook Storybook是一个开源的工具，可以帮助前端开发者更好地构建、测试和展示组件。具体来说，Storybook可以做以下几件事情：

爱被打了一巴掌/ 2024年03月24日 00:09/ 0 赞/ 8 阅读

相关添加组件_大前端进阶-如何构建组件库

![fd26d947e639037562d7ab87c3a29bcf.png][] 在日常开发过程中，构建组件库是必不可少的一环，此篇文章就是描述如何搭建一个完整的组件库，解

绝地灬酷狼/ 2023年01月07日 08:57/ 0 赞/ 89 阅读

相关如何使用rollup打包前端组件/库

如何使用rollup打包前端组件/库目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于r

港控/mmm°/ 2022年12月29日 09:06/ 0 赞/ 608 阅读

相关 mvvm模式构建组件库 RegularJS

RegularJS 详细介绍看到 regular 的名字就能感受到扑面而来的山寨味，在开始前，我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果

àì夳堔傛蜴生んèń/ 2022年05月19日 05:37/ 0 赞/ 147 阅读

相关 mvvm模式构建组件库 RegularJS

RegularJS 详细介绍看到 regular 的名字就能感受到扑面而来的山寨味，在开始前，我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果

比眉伴天荒/ 2022年05月18日 21:18/ 0 赞/ 131 阅读

相关 mvvm模式构建组件库 RegularJS

RegularJS 详细介绍看到 regular 的名字就能感受到扑面而来的山寨味，在开始前，我还是要说明下regularjs出现绝对不仅仅是作者的造轮子情绪泛滥的结果

￡神魔★判官ぃ/ 2022年05月18日 11:15/ 0 赞/ 101 阅读

相关构建个人组件库——vue.extend和vue.component

需求：构建一个类似[elment-ui][]的组件库，打包发布到npm 个人探索：webpack打包发布到npm流程 --> 组件开发环境和组件发布环境探索

我就是我/ 2021年09月15日 08:12/ 0 赞/ 260 阅读

相关构建个人组件库，类似Element-ui使用方式，vue confirm公共弹框组件

一、要做什么？我们在引入Element-ui的时候有看到这种使用Vue.use()的用法，然后element-ui里所有的组件我们都可以全局使用，这到底是怎么做到的呢，下面

- 日理万妓/ 2021年08月28日 23:40/ 0 赞/ 212 阅读