Storybook 开源项目教程

47 0 0

Storybook 开源项目教程

storybooksNode.js app with Google OAuth项目地址:https://gitcode.com/gh_mirrors/st/storybooks

项目介绍

Storybook 是一个流行的开源工具，主要用于开发和组织前端组件。它支持 Vue、React、Angular 等主流库，使团队能够独立于应用程序的主干之外开发 UI 组件。Storybook 提供了一个环境，开发者可以在其中创建、查看和测试组件的各种状态，而无需运行整个应用。这不仅加速了UI开发流程，还提高了组件的可重用性和一致性。

项目快速启动

安装与初始化

首先，确保你的系统已安装 Node.js。接下来，通过以下命令克隆 Storybook 的示例项目：

git clone https://github.com/bradtraversy/storybooks.git cd storybooks

然后，安装所需的依赖并启动 Storybook：

npm install npm run storybook

或如果你偏好 Yarn：

yarn yarn storybook

成功执行上述步骤后，Storybook 将在默认浏览器中自动打开，通常地址是 http://localhost:6006/。

应用案例和最佳实践

创建一个简单的组件故事

以 React 为例，在 stories 文件夹下添加一个新的 .js 或 .jsx 文件。假设我们有一个名为 Button.js 的组件，我们可以这样创建它的故事：


import React from 'react';
import Button from '../components/Button';
 
export default {
  title: 'Example/Button',
  component: Button,
};
 
const Template = (args) => <Button {...args} />;
 
export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};
 
export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
};