Storybook(一)
@TOC
欢迎使用Storybook
你好！ 这是你第一次使用 Storybook 这个工具。如果你想学习如何使用Storybook, 可以仔细阅读这篇文章，了解一下Storybook的基本知识。
基本用法
我们对Storybook进行了一些说明，除了标准的Storybook功能，我们整理了如下几点新功能，帮助你用它写组件：
- 初始化 项目；
- 安装依赖；
- 增加 脚本 命令；
- 新建 .storybook/config.js 文件；
- 在stories/index.js 写 story；
- 运行看效果( 组件更改可实时刷新 )；
初始化项目
mkdir story
cd story
npm init
安装依赖
npm i --save-dev @storybook/react
npm i --save react react-dom
npm i --save-dev @babel/core
npm i --save-dev babel-loader
添加 脚本 命令
{"scripts": {"storybook": "start-storybook -p 9001 -c .storybook" // 指定配置文件目录为 .storybook}
}
新建 .storybook/config.js 文件
链接: storybook.
import { configure } from '@storybook/react';function loadStories() {require('../stories/index.js'); // 指定 story 的位置// 可以是任意目录，根据自己需要写路径
}configure(loadStories, module);
在 stories/index.js 写 story
// An highlighted block
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo'; // 这里引入你想展示的组件storiesOf('Button', module).add('with text', () => ( // 一个 add 表示添加一个 story<Button>Hello Button</Button>)).add('with some emoji', () => ( // 这里是另一个 story<Button><span role="img" aria-label="so cool">
Storybook(一)相关推荐
- Storybook 5.0正式发布：有史以来变化最大的版本\n
Storybook 5.0(SB5)于近日正式发布,这是目前为止最大的一个版本.新版本的内容包括: 全新的开发者体验: 带有主题的组件库: 改进的前端插件架构: 全新的Storybook网站. Sto ...
- 前端工具Storybook简介
认识Storybook Storybook (https://storybook.js.org/) 是一个很不错的开源工具,用于帮助前端组件开发,可以支持React, Vue和Angular等框架. ...
- StoryBook 开发React组件库文档
StoryBook 开发 React 组件库文档 说明 StoryBook 是一个开源的 UI 组件库构建工具,支持 React.Vue.Angular 等主流开发框架,使用 StoryBook 将获 ...
- storybook使用教程_如何使用Storybook构建React开发游乐场
storybook使用教程 by Sarah Sweat 通过莎拉汗 如何使用Storybook构建React开发游乐场 (How to build a React development playg ...
- 【storybook】神奇工具storybook！只是用来做组件库？（浅谈CDD组件驱动开发）
前言 我一开始以为storybook是做组件库用的,随着我后面了解越来越深发现压根不是这么回事. 我在写组件库中发现,很多功能比如umi-library(现在改名umi-father)都有了,stor ...
- Storybook 完美组件开发工具
使用create-react-app 开发的组件的痛点: 入口文件不适合管理组件库 缺少行为追踪和属性调试功能 但是Storybook 可以帮我们解决这些痛点. 1.介绍 Storybook 官网地址 ...
- storybook/vue学习笔记
storybook vue学习笔记 1.使用背景 StoryBook 的应用场景是你已经有个 Vue 项目,你想要对项目中的组件做一个交互性的展示.所以如何你一开始就拿个空项目自动安装是无法运行的,会 ...
- storybook相关功能
package.json版本介绍 {"name": "lh-ui-react","version": "1.0.0",& ...
- Storybook:组件开发
title: Storybook date: 2022-08-31 23:20:04 tags: React Storybook 组件开发 categories: 框架 React 组件 Storyb ...
- 【react storybook】从零搭建react脚手架，并使用storybook发布组件库到npm，并生成可视化UI文档
storybook 成品展示 开发准备 开发组件 写MDX文档 发布文档 发布组件 成品展示 可视化UI文档页面: 可视化UI文档地址: https://guozia007.gitee.io/stor ...
最新文章
- C#中通过单例模式以及Dictionary实现键值对的映射，通过key获取value
- 【学习笔记】观察者模式
- nginx转发websocket
- 电脑故障扫描修复软件_电脑故障分析：电脑安装软件提示没有权限的解决方法...
- python蚁群算法 路径规划_蚁群算法(1) - Python实现
- webstorm编辑器的一些快捷键的用法
- （37）Verilog HDL拼接运算：拼接操作与重复操作
- mysql分段统计ceil
- ARM编译中的RO、RW和ZI DATA区段[转]
- 【CSS】关于表单样式
- openlayers3.0叠加天地图底图及注记后再叠加geoserverWMS服务
- Matplotlib中显示汉字，Times New Roman字体，公式的相关设置（1）
- Mac上下载百度云盘大文件百度云盘客户端限速怎么处理
- smb+服务器+修复,Microsoft Windows
- 教matlab唱周董的《七里香》
- 树莓派访问 群晖 里的共享文件夹
- Matlab实现 线性动态电路可视化分析
- 浏览器服务器协议,浏览器工作原理之HTTP协议
- WPS操作时会留下历史记录如何关闭历史功能保护个人隐私
- java interface 函数_Java8 函数式接口（Functional Interface），有且仅有一个抽象方法...
热门文章