Storybook 开源项目安装与使用指南

Storybook 开源项目安装与使用指南

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

一、项目目录结构及介绍

Storybook 是一个流行的 UI 开发工具，用于独立开发和测试React、Vue等框架的组件。以下是基于从提供的GitHub链接克隆得到的基本目录结构概览：

├── public                    # 静态资源文件夹，包含HTML入口文件index.html
├── src                       # 主要源代码存放地
│   ├── components            # 组件存放目录
│   ├── .storybook             # Storybook的配置相关文件夹
│       ├── addons.js          # 添加的插件配置
│       ├── config.js          # Storybook运行时的配置
│       ├── preview.js         # 组件预览相关的配置
│   └── stories               # 故事（stories）文件，展示组件不同状态的地方
├── package.json              # Node.js项目配置文件，包含了依赖信息和脚本命令
├── README.md                 # 项目说明文档
└── yarn.lock 或 package-lock.json # 依赖锁定文件

此结构中，.storybook 目录尤为关键，它集中管理Storybook的配置。而src/stories则存储各个组件的具体故事书实例，这些文件演示了组件的不同用法。

二、项目的启动文件介绍

在Storybook项目中，核心的启动操作不是直接通过某个单一的“启动文件”执行，而是通过npm或yarn命令来驱动。通常，启动Storybook的命令是写在package.json中的scripts部分。例如：

"scripts": {
    "start": "start-storybook -p 6006",
    ...
}

当你运行 npm start 或 yarn start 时，实际上是调用了@storybook/core-server来构建并运行你的Storybook应用，默认监听的是6006端口。

三、项目的配置文件介绍

.storybook/config.js

此文件用于设置Storybook的基础配置，比如引入特定的addon或者设置初始化参数。例子如下：

import { configure } from '@storybook/react';

function loadStories() {
  require('../stories/index.js');
}

configure(loadStories, module);

这段代码告诉Storybook去加载指定路径下的stories。

.storybook/addons.js

这个文件是用来注册额外的addons的，使得在Storybook界面可以使用这些addons的功能。如果未创建，则表示不自定义使用任何额外插件。

.storybook/preview.js

preview.js 文件允许你在所有故事渲染之前设置全局的状态或者上下文，比如全局CSS样式、Decorators等。这对于统一组件的背景色、字体或其他全局效果非常有用。

至此，我们已完成了对Storybook项目基本结构、启动机制以及关键配置文件的介绍。理解这些是开始使用和定制Storybook项目的关键步骤。

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