storybook专题

storybook使用

文中有部分名词可能不准确，见谅本文主要介绍storybook+shadcn/ui+tailwindcss的storybook代码编写。相关lib版本 “storybook”: “^8.2.4”, “tailwindcss”: “^3.4.1”, 一、简介首先，使用storybook开发一个组件需要两个文件，一个是组件*.tsx一个是story*.stories.ts/*.sto

封装Vue组件库（三）、Storybook 可视化的展示组件的平台

Storybook 介绍 Storybook 是开发组件库的必备开发工具，翻译为“故事书”。我们可以把每一个组件想象成一个故事，Storybook就好像在讲一个个故事。 Storybook 是一个可视化的展示组件的平台使用 Storybook 可以在独立的环境中，创建组件，并在隔离的开发环境中，以交互式的方式展示组件Storybook 在主程序之外运行，因此用户可以独立开发组件库，而不必

前端工具Storybook简介

认识Storybook Storybook （https://storybook.js.org/）是一个很不错的开源工具，用于帮助前端组件开发，可以支持React, Vue和Angular等框架。正如它的名字所预示的一样，使用它可以写出组件库的活的用户故事（user story）。它的网站首页这样说道：storybook 为UI组件提供一个独立的沙箱环境，在这里无论是edge case还是

storyBook浅试

目录开发快速安装配置ts编写组件说明文档常用的Addon 自定义配置自定义html头自定义标题链接等自定义主题优缺点对比相关链接开发快速安装 npx -p @storybook/cli sb init# 也可以全局按照cli后getstorybook命令initnpm run storybook 配置ts 配合cra的话，首先看一下react-scripts版本

Vue 集成 storybook

一、storybook 介绍 storybook是一个开源的组件管理、文档UI展示工具，用来在大型的项目中，让团队成员一个可以知道到团队已开发的组件，避免编写重复的组件，减少团队沟通时间和开发成本二、storybook 环境搭建 1. 依赖安装 npm install @storybook/vue --save-devnpm install vue-loader vue-te

storybook react使用

storybook react react 创建你的项目的文件夹（此步为用VSCodeIDE编写需要，如果用的是WebStorm在新建文件的时候可以直接选择建一个create-react-app的） create-react-app demo //demo是指项目文件夹的名字，可自取进入项目目录 cd demonpm start //打开React官网界面，即启动成功

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

一、理解 storybook Storybook是一个开源的工具，可以帮助前端开发者更好地构建、测试和展示组件。具体来说，Storybook可以做以下几件事情： 1、为每个组件提供一个独立的页面，可以快速展示或调试组件。 2、管理多个组件，按需展示和测试，帮助开发者更好地理解和组织组件库。 3、可以用各种状态（例如不同的props和事件触发）的快照测试组件，保证在不同状态下组件的正确性。

在不同 webpack 版本的 Vue 项目中配置 Storybook

在之前的一篇文章中，介绍过组件化搭建工具 storybook 在 vue 项目中的安装和配置。相比于其成文的时间，vue 项目依赖的工具多有发展；并且在实际应用中，多种历史版本的项目并存的状况比比皆是，用官方提供的 npx sb init 往往会出现配置失败的情况，而较新或过旧的资料都在网上难觅 -- 所以在此特别补充一篇，记录新、旧两种典型配置下，storybook 可用的手动配置方法：

storybook vue@3.0

Storybook是一个开源工具，用于独立开发React、Vue和Angular的UI组件。它能有组织和高效地构建UI组件。这里介绍vue@3.0 1、初始化项目 npx sb@next init 2、直接运行 npm run storybook 运行结果 3、配置scss 需要安装sass-loader和node-sass,这里是自己写的FFButton,icon用的是e

storybook生态初体验

前言上一篇文章简单介绍了一下storybook，这一篇用个实例来做一下。生态首先因为是配合React和CRA使用，所以需要一下几个插件： @storybook/addon-info@types/storybook__addon-inforeact-docgen-typescript-loader 第一款是为了展示源代码等信息用的，第二款是类型文件，第三个是一款webpack插

从零开始搭建react storybook

1.创建项目文件夹Library 2.命令行执行以下语句 cd Librarycnpm init -ycnpm i --save-dev @storybook/reactcnpm i --save react react-dom 3.进入package.json 找到script，增加“storybook”属性 {"scripts": {"storybook": "start-st

vue2 使用 storybook 6.x

背景说明在已存在的项目中加入storybook支持, 且该项目是一个组件项目(用于封装独立组件, 供其他项目使用) storybook版本: 6.x vue版本: 2.x 引入storybook 项目根目录执行: npx sb init 执行完成之后, package.json中会增加storybook的devDependencies依赖, 且会新增storybook, build-s

从别的项目迁移storybook

项目中storybook问题随记：一、当前项目引入别的项目的storybook 开发的项目引入别的项目包，想在要求在当前项目安装同样的storybook。直接复制引入项目的storybook相关配置即可。 package 文件复制依赖到当前项目，按照项目需要放到对应目录项，比如我们项目要求放到devDependencies下，因为storybook实质上就是给开发看的用例。复

storybook 用react写组件

storybook 用react写组件笔者也是最近两天才开始接触的React和storybook，初步学习了组件部分的知识。在学习的时候也查阅过不少文章，对新手来说，有些确实看得不太懂，所以写下这篇文章。继上一篇文章简单使用React写组件放到storybook中，现在要讲一下如何自己创建组件并放在storybook中，可能语言表达不是很精确，请见谅。在项目中的src文件夹下新建一个co