npm 包 bvap-storybook-readme 使用教程

简介

bvap-storybook-readme 是基于 React 和 Storybook 实现的一个文档组件库。通过将组件的使用说明放在 README.md 中，并利用 bvap-storybook-readme 将 README.md 文件中的 Markdown 语法实时渲染成展示页面，简化了组件库的开发和使用过程。

安装

通过 npm 安装 bvap-storybook-readme：

--- ------- ---------------------

使用

  1. 创建项目并初始化 Storybook：
--- ---------------- ------
-- ------
--- -- -------------- -- ---- ------ -----
  1. 安装 bvap-storybook-readme：
--- ------- ---------------------
  1. 在 .storybook/main.js 中添加 bvap-storybook-readme 的配置：
-------------- - -
  -------- --------------------------- ----------------------------------------
  ------- -------------------------- ------------------------------ -------------------------
  -- -- ---------------------
  -------------------- -
    -- -- --------- ---
    ----------- ---------------
    -- -- ------- --- -----
    ------------- - ------ ------- --
    -- -- ------ - ---- ---------
    ----------------- ----
    --------------- ----
  --
--
  1. 在 package.json 中添加启动命令：
-
  ---------- -
    ------------ ---------------- -- -----
  -
-
  1. 在 .storybook/preview.js 中导入组件，并创建展示组件的 Story：
------ ----- ---- --------
------ - ------------ - ---- -------------------
------ - ---------- - ---- ------------------------

-- ----
------ - ------ - ---- -----------

-- -- ---------
------ ------------ ---- -----------------

-- ------ ---------- --------- --------- -----
----- ----------------- - -------------------------

-- -- -----
------ ------- -
  ------ ---------
  ---------- -------
  ----------- --------------------
  ----- -
    ------ ----------
    -------- ------------
    ----- --------
  --
  --------- -
    -------- - ------- ------- -------- --
  --
  ----------- -
    ------- -
      -- -- --------- ------------ ------- -----
      -------- -------------
    --
    ----- -
      -- ---------
      ------- -
        ----- -------
      --
    --
  --
--

-- ----------- -------------------------------

示例代码

集成组件库示例

1. 创建一个组件库

在 my-app 中创建一个名为 MyComponent 的组件库：

-- ------
--- ----- ------ -----------

2. 安装 bvap-storybook-readme

在 MyComponent 中安装 bvap-storybook-readme：

-- --------------------
--- --- --
--- - --------------------- ----- --------- -----------------

3. 配置 Storybook 和 bvap-storybook-readme

修改 MyComponent/.storybook/main.js：

-------------- - -
  -------- --------------------------- ----------------------------------------
  ------- -------------------------- ------------------------------ -------------------------
  -------------------- -
    ----------- ---------------
    ------------- - ------ ------- --
    ----------------- ----
    --------------- ----
  --
--

修改 MyComponent/.storybook/preview.js：

------ - ---------- - ---- ------------------------
------ ------------ ---- -----------------
-- ---------
------ - ------ - ---- ---------------
-- -- ---------- ----
----- ----------------- - -------------------------

------ ------- -
  ------ ---------------------
  ---------- -------
  ----------- --------------------
  ----- -
    ----- ---------
  --
  --------- -
    -------- - ------- ------- -------- --
  --
  ----------- -
    ------- -
      -------- -------------
    --
    ----- -
      ------- -
        ----- -------
      --
    --
  --
--

4. 创建组件

在 MyComponent/src/Button.jsx 中创建 Button 组件：

------ ----- ---- --------
------ ------ ---- --------------------

----- ------------ - --------------
  ------ --------- -- ------------ --- --------- - --------- - ------------
  ----------------- --------- --
    ----------- --- ---------
      - --------------------------------
      - ------------------------------------
  ------- -----
  -------------- ------
  -------- ---- -----
  ------- --------
  ------------ -----
  -------- -----
  ------- -
    ----------------- --------- --
      ----------- --- ---------
        - --------------------------------
        - ------------------------------------
  -
  -------- -
    ----------------- --------- --
      ----------- --- ---------
        - ------------------------------------------
        - ----------------------------------------------
  -
--

------ ----- ------ - -- ----- -------- ------ -------- -------- -- -- -
  ------------- ----------------- ------------- ----------------- --------------------
    ------
  ---------------
--

------------------- - -
  ------ ----------
  -------- ------------
  --------- ------
--

5. 创建 Storybook 示例

在 MyComponent/src/Button.stories.js 中创建 Button 的 Story：

------ ----- ---- --------
------ - ---------- - ---- ------------------------

------ - ------ - ---- -----------
------ ------------ ---- -----------------

----- ----------------- - -------------------------

------ ------- -
  ------ ---------
  ---------- -------
  ----------- --------------------
  ----- -
    ----- ---------
  --
  --------- -
    -------- - ------- ------- -------- --
  --
  ----------- -
    ------- -
      -------- -------------
    --
    ----- -
      ------- -
        ----- -------
      --
    --
  --
--

------ ----- ------- - ------ -- ------- --------- ---

导入 MyComponent，使用 bvap-storybook-readme：

------ ----- ---- --------

------ - ---------- - ---- ------------------------
------ ----------------- ---- -----------------

------ - ------- - ---- ------------------------------

----- ----------------- - ------------------------------

------ ------- -
  ------ --------------
  ----------- -
    ------- -
      -------- ------------------
    --
  --
  ----------- --------------------
--

------ ----- ------ - -----------------
----------- - -
  ----- ------------ --------
--

结语

bvap-storybook-readme 简化了组件库的开发和使用过程，让开发者可以更加专注于组件的实现和文档的编写。同时，由于 bvap-storybook-readme 基于 Storybook，因此具有 Storybook 功能的组件库依旧可以使用 bvap-storybook-readme 提供的相关功能。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8fccdc64669dde5709

阅读全文

猜你喜欢

  • npm 包 byr-bbs-top-ten 使用教程

    byr-bbs-top-ten 是一个基于 Node.js 的 npm 包，用于获取北邮人论坛的热门帖子排行榜。该包可以方便地在前端项目中使用，并通过 API 获取最新的热门帖子数据，让用户可以即时了...

    4 年前
  • npm 包 byrne-systems 使用教程

    简介 byrne-systems 是一个方便前端开发的 npm 包，提供了一系列优秀的样式和组件。通过使用该包，可以快速搭建出美观且高效的网页。 安装 通过 npm 安装 byrne-systems：...

    4 年前
  • npm 包 bypasscors 使用教程

    在开发前端应用时，经常会遇到跨域问题。通常情况下，我们可以使用 JSONP 或者代理服务器来解决这个问题。不过，这些方法都有各自的弊端，JSONP 只适用于 GET 请求，而代理服务器可能会影响应用的...

    4 年前
  • npm 包 burningsoul-api 使用教程

    最近，社区上新推出了一个前端常用工具包 burningsoul-api，该包主要是用于处理前端应用中的一些骨架屏、loading、资源加载等问题。本篇文章将向您详细介绍 burningsoul-api...

    4 年前
  • Burnish-styles 使用教程

    前言 在现代 Web 开发中，前端工程师通常会使用许多工具和库。其中之一就是 NPM 包。通过使用 NPM 包，开发人员可以轻松地共享代码，降低代码复杂性，并加速开发速度。

    4 年前
  • npm 包 bz-semantic-ui-demo 使用教程

    前言 在前端开发中，UI组件库是必不可少的。而Semantic UI是一个比较流行的UI组件库，它提供了非常多的UI组件且用法简单。同时，bz-semantic-ui-demo是为了方便开发者更好地使...

    4 年前
  • npm 包 burp-parse 使用教程

    背景与介绍 burp-parse 是一个由 Node.js 编写的 npm 包，旨在提供一个简单易用的工具，帮助开发者解析 Burp Suite 扫描结果文件。Burp Suite 是一款广受欢迎的 ...

    4 年前
  • npm 包 bz-semantic-ui-dimmer 使用教程

    在前端开发中，UI 组件是一个非常重要的部分。而 Semantic UI 是一个设计美观、易于使用的前端框架，它提供了很多常用的 UI 组件。其中包含的 Dimmer 组件可以帮助我们实现页面中的半透...

    4 年前
  • npm 包 bz-semantic-ui-divider 使用教程

    在前端开发中，UI 组件是不可或缺的一部分。其中，Semantic UI 是一套流行的 UI 框架，它提供了许多可复用的基础组件。而 bz-semantic-ui-divider 则是 Semanti...

    4 年前
  • npm 包 bz-semantic-ui-dropdown 使用教程

    介绍 在前端开发过程中，使用 UI 组件库能够提升开发效率，降低代码量。而 Semantic UI 是一款流行的 UI 组件库之一，在这里介绍其下的 dropdown 组件（下拉框），并且使用 npm...

    4 年前
  • npm 包 cached-npm-install 使用教程

    在前端开发中，使用 npm 包管理工具是非常常见的。但是，每次安装 npm 包都需要从官方源进行下载，时间可能非常长，尤其是当网络状况较差时，这将会极大地影响开发效率。

    4 年前
  • npm 包 burnie 使用教程

    简述 burnie 是一款用于制作动态火焰效果的 npm 包，它基于 WebGL 技术实现，可以在前端页面中显示非常逼真的火焰效果，且支持自定义参数来实现不同的火焰效果。

    4 年前
  • npm 包 cached-firebase 使用教程

    前言 随着互联网技术的发展，前端开发变得越来越重要。前端工程师需要在不断学习新技术的同时，增强自己在项目中的实力。在这篇文章中，我将介绍一个非常实用的 npm 包：cached-firebase，并详...

    4 年前
  • npm 包 cached-method 使用教程

    在前端开发中，我们经常需要通过后端 API 来获取数据，然而每次请求都需要向后端发起一次网络请求，这既浪费资源又影响效率。如何避免重复请求呢？这就需要使用缓存技术，即将请求的结果缓存起来，在下一次请求...

    4 年前
  • npm 包 cached-method-proxy 使用教程

    在前端开发中，我们经常会遇到需要频繁调用重复的函数或请求的情况。如果每次都重新调用这些函数或请求，不仅会增加服务器的负担，还会影响应用的性能。为了避免这些问题，我们可以使用 npm 包 cached-...

    4 年前
  • npm 包 `bz-semantic-ui-form` 使用教程

    前端开发中，UI 表单的制作往往是重复性劳动，且风格统一性难以保证。为了方便开发者，社区中常常出现一些好用的 UI 库和框架，如 Semantic UI。但 Semantic UI 使用起来可能会有些...

    4 年前
  • npm 包 bz-semantic-ui-header 使用教程

    前言 在前端开发过程中，我们经常需要使用到各种各样的 UI 库来构建页面。而 Semantic UI 是一个优秀的 UI 库，它提供了一系列简单易用的组件供开发者使用。

    4 年前
  • npm 包 bz-semantic-ui-grid 使用教程

    在前后端分离的时代，前端开发变得越来越重要，而使用优秀的工具包可以大大提高我们的开发效率。在本文中，我们将介绍一个叫做 bz-semantic-ui-grid 的 npm 包，它可以帮助开发者轻松地创...

    4 年前
  • npm 包 bz-semantic-ui-image 使用教程

    bz-semantic-ui-image 是一个用于在 Semantic UI 框架中添加图片属性的 npm 包，可以大大简化前端开发人员的工作。 如何安装 bz-semantic-ui-image ...

    4 年前
  • npm 包：bz-semantic-ui-input 使用教程

    前言 bz-semantic-ui-input 是一个基于 Semantic UI 框架的组件，提供了更简单、美观、易于使用的 input 输入框。在前端开发中，输入框是非常常见的 UI 元素，因此在...

    4 年前

相关推荐

    暂无文章