- 综合排序
- 最热优先
- 最新优先
- 来自专栏IMWeb前端团队
使用storybook管理React组件
依赖和运行脚本 "scripts": { "storybook": "start-storybook -p 9001 -c .storybook" } "devDependencies": { "[@storybook](/user/storybook)/addon-actions": "^4.0.11", "[@storybook](/user/storybook)/react 使用storybook的插件功能 storybook的很多功能都是靠插件来实现的，大多数插件都需要提前注册，在页面中有一个单独的tab来对storybook进行增强。 '[@storybook](/user/storybook)/addon-options/register'; // storybook页面自定义 import '[@storybook](/user/ storybook)/addon-links/register'; // storybook页面跳转 import '[@storybook](/user/storybook)/addon-knobs/
4.2K20发布于 2019-12-03 - 来自专栏全栈修仙之路
Angular 工具篇之Storybook
Storybook 是一个 UI 组件的开发环境。它允许你能够浏览一个组件库，查看每个组件的不同状态，以及支持交互式的方式开发和测试组件。 Storybook 在你的应用程序之外运行。 storybook。 命令： "scripts": { "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" } 上面的 storybook 命令，通过 -p 参数用于指定 storybook 的端口。 对于基础的 Storybook 配置文件，我们只需简单地告诉 Storybook 从哪里获取 stories。 getstorybook 命令运行后，会自动为我们创建一个 .storybook 目录。
2.4K20发布于 2019-11-05 - 来自专栏深度学习与python
从 Styleguidist 迁移到 Storybook
为什么选择 Storybook Storybook 是一个开源的 UI 开发和文档工具，过去几年在 Web 社区中越来越流行。 手动迁移它们是不可行的，强制要求开发人员手动用新的 Storybook 格式重写他们的示例也是不合理的。 我们希望新的 Storybook 语法与组件源代码保持一致，所以将使用 ES6。 应该让使用过 Styleguidist 的开发人员对 Storybook 中的文档也感到熟悉。 我们可以用生产环境现有的 webpack 配置来扩展 Storybook 的构建配置，这样就可以保留 Storybook 的自动 docgen 功能，以及其他一些特性，比如代码块预览。 我们能够利用 Storybook 的特性，如按需加载，通过在编译时生成更小的包来提升性能，从而缩短沙盒的启动时间。
2.1K20编辑于 2023-03-29 - 来自专栏前端博客
storybook 编写stories的story基础语法
Parameters（参数）Parameters 用以配置 Storybook 和 插件，具有全局、组件、story 三个层级。 全局定义在根目录 .storybook/preview.js 下，会影响所有的 stories。 这样配置后，每个 story 界面下都可以选择红/绿两色背景：// .storybook/preview.js export const parameters = { backgrounds: 文章内容来源：Storybook 组件驱动开发（一）-- 基本使用 https://segmentfault.com/a/1190000039308365转载本站文章《storybook 编写stories 的story基础语法》,请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8897.html
1.7K30编辑于 2023-03-18 - 来自专栏前端博客
storybook插件说明： integrations与addons推荐
官方的：https://storybook.js.org/integrations/https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md 我所推荐的的三个： yarn add -D @storybook/addon-docs @storybook/addon-design-assets @storybook/addon-storysourceStorybook Storysource Addonhttps://github.com/storybookjs/storybook/tree/next/code/addons/storysource查看 Storybook sketch设计稿，直接使用：https://storybook.js.org/addons/storybook-addon-sketch/Storybook Docshttps://github.com /ECMAScript/storybook/8896.html
1.4K20编辑于 2023-03-18 - 来自专栏云前端
在不同 webpack 版本的 Vue 项目中配置 Storybook
在之前的一篇文章中，介绍过组件化搭建工具 storybook 在 vue 项目中的安装和配置。 ": "start-storybook -p 6006 --no-manager-cache", + "build-storybook": "build-storybook" }, " ", + "@storybook/addon-essentials": "^6.2.7", + "@storybook/addon-links": "^6.2.7", + "@storybook ": "build-storybook", + "storybook": "start-storybook -p 6006" "devDependencies": { + "@storybook/addon-backgrounds": "^5.3.18", + "@storybook/addon-info": "^5.3.18", + "@storybook
1.4K10发布于 2021-04-29 - 来自专栏神光的编程秘籍
试试 Storybook
这时候我们一般都会用 Storybook。 Storybook 是非常流行的用来构建组件文档的工具。 现在有 80k 的 star 了： 那 Storybook 都提供了啥功能呢？ 然后进入项目，执行 storybook 的初始化： npx storybook@latest init 打印的日志告诉你 storybook init 是在你的项目里添加 storybook 的最简单方式 执行 npm run storybook，就可以看到这样文档： 这就是 storybook 生成的组件文档。 这三个组件不是我们自己写的，是 storybook 初始化的时候自带了三个 demo 组件。 我们可以用它来了解下 storybook 的功能。 storybook init 在项目里加了 2 个目录： .storybook 和 src/stories .storybook 下的是配置文件， src/stories 下的是组件。
79211编辑于 2023-11-14 - 来自专栏前端从进阶到入院
Storybook 7 来了：迄今为止最大的更新
这些改进还在Storybook Day的演示中进行了总结分享。 Storybook：下一个篇章 Storybook 始于 2016 年。 npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.js" 具有 MDX2 支持的文档大修 Storybook 7 对 Storybook 要升级你的 Storybook，请运行以下命令： npx storybook@latest upgrade 这将更新 Storybook 的依赖项到最新版本。它还会运行自动迁移工具。 为了减少各种问题，我们编写了一个迁移指南，以帮助你成功地从 Storybook 6.x 升级到 Storybook 7.0！ 此外，请在Storybook 仓库上创建一个问题，通知 Storybook 团队，特别是如果这是一个导致关键故障的热门插件。
1.6K30编辑于 2023-10-14 - 来自专栏前端博客
storybook组件属性详解：组件props到strorybook Args
首先我们查看官方文档：https://storybook.js.org/docs/vue/writing-docs/doc-block-argstable#customizing官方的例子么有看到v-model 这里一个是props的定义，一个是Controls先看一下官方文档，https://storybook.js.org/docs/vue/essentials/controls官方的类型只有这些：https ://storybook.js.org/docs/vue/essentials/controls#annotationData TyeControlDescriptionbooleanbooleanProvides path=/story/argtypes-typescript--unions具体写法：https://storybook.js.org/docs/vue/api/argtypesconst argTypes 组件属性详解：组件props到strorybook Args》,请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8895
1.2K30编辑于 2023-03-18 - 来自专栏前端导学
使用typescript rollup storybook创建你的react组件库
mkdir mylibrary cd mylibrary npm init -y npx -p @storybook/cli sb init --type react npm i -D fork-ts-checker-webpack-plugin typescript 配置 .storybook/main.js文件 内容如下 module.exports = { "stories": [ ".. @(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-actions", "@storybook/addon-links" ]
2.7K10发布于 2021-03-11 - 来自专栏前端博客
storybook添加全局样式与sass全局变量设置
storybook组件需要全局样式，只需在.storybook/preview.js 增加全局样式即可。import '.. @(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", @(js|jsx|ts|tsx)" ], "addons": [ '@storybook/preset-scss', "@storybook/addon-links", "@storybook /addon-essentials", "@storybook/addon-interactions" ], "framework": "@storybook/vue3", "core": 转载本站文章《storybook添加全局样式与sass全局变量设置》,请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/
2.1K10编辑于 2023-03-18 - 来自专栏腾讯IMWeb前端团队
资讯 | 从大数据看战狼二；Storybook 3.2 发布
2 Storybook 3.2 发布 Storybook 允许我们在现代组件化开发中快速地浏览独立组件；在近日发布的 Storybook 3.2 版本中，添加了对于 Vue.js 的支持。
74220编辑于 2022-06-29 - 来自专栏云前端
手摸手教你用 Storybook 改善组件库的开发
本篇的内容就是尝试优化这部分的开发体验，用业界成熟的解决方案 Storybook 解决组件的统一展示和事实调试。 / ├─storybook-static/ ├─__mocks__/ └─__tests__/ 其中，可见以下两个文件夹： ├─.storybook/ ├─storybook-static/ 分别用来存放配置和生成的静态预览页面 要设置 Storybook 环境，需要先安装必要的依赖： npm install @storybook/vue --save-dev npm install vue-loader style-loader "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, 删除默认生成的文件夹： rm -rf 运行 npm run storybook 查看效果： ? 最后发布前不要忘记 npm run storybook，生成静态页面，以便其他开发者可以直接运行查看。 ?
2.2K10发布于 2020-06-15 - 来自专栏Web 技术
在 React 中使用 Storybook，构建强大的自定义 UI 组件
NPM安装在你的机器上 如何安装 Storybook 关于Storybook和React的一大亮点便是它们能够很好地结合在一起。 在React应用中初始化Storybook 现在我们已经启动并运行了React应用程序，我们需要安装并设置Storybook的本地实例。 在本地运行 Storybook 现在让我们运行Storybook实例: npm run storybook 一旦命令成功运行，Storybook应该开始在http://localhost:port/ 在Storybook中查看story 让我们重新查看Storybook实例，并导航到我们刚刚创建的组件。 然而，如果你需要从外部应用程序的Storybook中导入它们，你应该尝试发布一个包含Storybook组件导出的npm包。
10.9K10编辑于 2022-07-29 - 来自专栏希里安
Google Gemini Storybook一键生成专属儿童绘本
Google Gemini Storybook Storybook：让每个想法都变成故事 Google于2025年8月5日为Gemini APP推出了一个令人振奋的新功能——Storybook，这一功能允许用户通过简单的文字提示或上传个人照片 打开Gemini APP或访问gemini.google.com，找到“Storybook”功能[1] 2. 输入提示，如“Create a storybook about a brave panda exploring space”，或上传照片/文件 3. 等待1-2分钟，查看你的专属故事书！想调整内容？ 试试具体描述角色、场景或情节，比如“主角是一只爱吃披萨的斑马，场景是紫色森林” 立即体验：访问gemini.google.com或下载Gemini APP，输入“Create a storybook”开始创作
1.5K20编辑于 2025-08-07 - 来自专栏前端壹栈
每个前端都值得拥有自己的组件库
阅读本文 1.您将了解到如何超快速0-1搭建并上线一个组件库 2.您将了解到什么是storybook 3.您将了解到如何使用storybook搭建组件库 4.您将了解到如何使用Chromatic部署我们的组件库 storybook-intro Storybook是一个UI组件的开发环境。 our application: npx create-react-app taskbox cd taskbox # Add Storybook: npx -p @storybook/cli sb init 复制代码 介绍目录结构 .storybook/main.js相当于我们组件库的入口 image-20211113153902925 stories表示我们的组件所在目录，Storybook 6.添加 GitHub Action 部署 Storybook 现在我们的项目托管在 Github 仓库，我们能够使用持续集成 CI 服务完成 Storybook 自动化部署。
1.8K20发布于 2021-12-01 - 来自专栏深度学习与python
服务端来自火星，客户端来自金星，RSC 开发新思路
8 开始，通过在.storybook/main.js 中开启 experimentalNextRSC 特性，@storybook/nextjs 就会自动将你的 story 封装在 Suspense 中 from '@storybook/react'; import { createMock } from 'storybook-addon-module-mock'; import { DbCard } 现在就在 Storybook 中 进行 RSC 开发吧 要使用 Storybook 进行 RSC 开发，请将 Storybook 升级到 8.0-alpha 版本： npx storybook@next 请关注我们的社交媒体或订阅 Storybook 新闻资讯，获取 Storybook 下个版本的全部信息！ 原文地址： https://storybook.js.org/blog/storybook-react-server-components/ 相关阅读： 从 Styleguidist 迁移到 Storybook
64410编辑于 2024-01-17 - 来自专栏艺述论专栏
vue 开发常用工具及配置二
2，storybook 一个组件的配置可能很多，为了让学习者直观查看，可以利用storybook写很多story，在左侧的每一项点击打开后，都是组件的一个不同的状态，这个不同的状态，就是一个story。 多个story合在一起像一本书，storybook名字由此而来。 效果大概如下所示： 如何使用它？ 先安装storybook： yarn add @storybook/cli 接下来，直接来个快速配置吧： npx -p @storybook/cli sb init 然后通过yarn storybook 运行，效果如下： storybook插件init操作，修改了package.json，添加了两个task： "storybook": "start-storybook -p 6006", "build-storybook ": "build-storybook" 并且添加了.storybook、stories目录。
1.3K20发布于 2020-02-11 - 来自专栏Cellinlab's Blog
React 应用架构实战 0x2：构建和文档化组件
使用 Storybook 的一些好处： Storybook 允许在隔离环境中开发组件，而无需重现应用程序的精确状态，从而使开发人员可以专注于他们正在构建的东西 Storybook 作为 UI 组件的目录 ，允许所有相关人员在不在应用程序中使用组件的情况下试用它们 下面命令将安装 Storybook 相关依赖，并初始化 Storybook 配置： pnpx sb init # 配置 Storybook 命令启动 Storybook 服务。 可以使用 pnpm run build-storybook 命令构建 Storybook。 命令启动 Storybook 服务，可以看到如下效果：
1.3K10编辑于 2023-05-17 - 来自专栏那些年我们学过的前端
从零开始，手摸手搭建前端组件库
预览功能首先，storyBook是啥？ Storybook的运行不依赖于项目，开发人员不用担心由于开发环境、依赖问题导致不能开发控件。Storybook支持很多主流的框架（React、Vue、Angular）。 @storybook/addon-storysource展示组件源码@storybook/addon-knobs动态展示propsstorybook-readme将markdown导入为story@storybook 预览模式 "start": "npm run storybook", "storybook": "start-storybook -p 9001 -c .storybook",// 打包storybook 静态文件 "build-storybook": "build-storybook -c .storybook",// 文档预览 端口是8081 "dev": "webpack-dev-server --
3.3K30编辑于 2023-02-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号