写在前面

由于本文主要集中关注与工具使用,所以不可能完全介绍工具的所有功能,所以要想了解更多,可以自己去各自官方网站上查看。

什么是UI开发环境

UI开发环境专注于用户体验设计师与开发人员之间的协作(UI dev environments),为UI组件的快速迭代提供了综合环境。

通俗点来讲,目前主要应用于个项目中组件的测试、开发以及文档编写中,这样设计人员和开发人员可以通过组件预览的方式来指定设计规范。

目前可以使用的工具主要有:StorybookReact StyleguidistCompositorMDX。本文会重点介绍storybook以及React Styleguidist

各工具之间的比较归纳

Tools React/Angular/Vue 上手程度 主题自定义 附加功能(插件) 测试环境
Storybook ✔️ / ✔️ / ✔️ 中等 简便、颜色变化 丰富(源码/viewport/backgrounds...) 提供了各种测试案例
React Styleguidist ✔️ / X / X 简单 简便、颜色结构变化 Enzymejest
Compositor ✔️ / X / X 简单 暂不支持 Enzymejest
MDX ✔️ / X / ✔️(Beta) 简单 简便、可以完全自定义 一般(remark/rehype ) Enzymejest

StoryBook

storybook的界面清新脱俗,至少个人认为还是比较好看的,像下面这样:

同时,storybook可以更换主题,具体可以戳这里,更换的只是配色系统,结构方面改动的话可能有点困难。

storybook 可以支持多种语言,包括react,vue,angular...等主流前端库。

storybook中的一个重要概念就是story,翻译过来就是故事,不过可以通俗的理解为一个组件的一种状态。当然这个状态是你自己添加的,如果添加的故事越多,同时也就表明了你编写的组件复杂度就很高了,这时候你就可以考虑是否要拆分组件来使得组件的功能变得单一纯粹了,这样组件维护的成本才会变少,同时可用性也会更加高。

简单的入门

下面以一个React小项目来练手,如果对Vue以及Angular感兴趣的童鞋,可以去官网了解一下,官方网站上有大量的例子以及新手教程。

Step 1: 创建一个项目名为stroybook, 同时创建package.json文件

mkdir stroybook
cd storybook
yarn init

填写你要初始化的信息,下一步。

Step2: 安装依赖

yarn add @storybook/react react react-dom babel-loader @babel/core --dev

Step3: 添加npm脚本

{
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"serve": "yarn build-storybook && npx http-server ./storybook-static"
}
}
  • storybook: 运行这个脚本会起一个本地服务器,监听在6006端口
  • build-storybook: 通过webpack进行打包,生成静态文件
  • serve: 使用node服务运行静态文件

Step4: 创建配置文件,让storybook能够找到stories

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

// 手动添加所有stories
function loadStories() {
require('../stories/index.js');
// You can require as many stories as you need.
} /**
* 或者匹配指定文件夹下的所有stories
* function loadStories() {
const req = require.context('../stories', true, /\.stories\.js$/);
req.keys().forEach(filename => req(filename));
} */ configure(loadStories, module);

Step5: 编写组件故事

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo'; storiesOf('Button', module)
.add('with text', () => (
<Button>Hello Button</Button>
))
.add('with emoji', () => (
<Button><span role="img" aria-label="so cool">

UI_DEV_Environment 之 StoryBook的更多相关文章

  1. storybook实践

    很久之前就听说过storybook,一直想实践一下

  2. storybook配置之基本配置和webpack配置

    默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...

  3. storybook构建vue组件

    最近在研究业务型组件的使用,因为在单独开发组件的时候需要调试,所以为每一个组件都编写一个webpack开发环境,然后上传上去为了其他人可以直接使用又把webpack上传上去,这样会有两个问题: 1:每 ...

  4. 手动建立storybook

    1. Add @storybook/react npm i --save-dev @storybook/react 2. Add react, react-dom, and babel-core np ...

  5. [React Storybook] Get started with Storybook for React

    Storybook is a UI component development environment for React, Vue, and Angular. With that, you can ...

  6. 加薪攻略之UI组件库实践—storybook

    目录 加薪攻略之UI组件库实践-storybook 一.业务背景 二.选用方案 三.引入分析 项目结构 项目效果 四.实现步骤 1.添加依赖 2.添加npm执行脚本 3.添加配置文件 4.添加必要的w ...

  7. Storybook 最新教程

    Storybook 最新教程 Storybook is the most popular UI component development tool for React, Vue, and Angul ...

  8. 使用react搭建组件库:react+typescript+storybook

    前期准备 1. 初始化项目 npx create-react-app react-components --template typescript 2. 安装依赖 使用哪种打包方案:webpack/r ...

  9. 2017 年值得一瞥的 JavaScript 相关技术趋势

    跨年前两天,Dan Abramov在Twitter上提了一个问题: JS社区毫不犹豫的抛出了它们对于新技术的预期与期待,本文内容也是总结自Twitter的回复,按照流行度降序排列.有一个尚未确定的小点 ...

随机推荐

  1. STM32F4 阿波罗寄存器 进阶版LED灯

    上一节通过使用操作地址的方式进行了寄存器的操作,接下来通过两个部分,实现进阶版的操作寄存器(将寄存器的地址进行命名,然后使用名字进行调用  比如商场的A座5楼345号为卖玩具的,我们可以定义地址为sh ...

  2. 基于VMware Workstation下CentOS的搭建

    网络安全学习内容 二.VMware安装CentOS系统 需要准备的文件: 从http://mirrors.huaweicloud.com/centos/7.7.1908/isos/x86_64/中下载 ...

  3. 开放下载 | 《Knative 云原生应用开发指南》开启云原生时代 Serverless 之门

    点击下载<Knative 云原生应用开发指南> 自 2018 年 Knative 项目开源后,就得到了广大开发者的密切关注.Knative 在 Kubernetes 之上提供了一套完整的应 ...

  4. git删除中间某次提交

    git log获取commit信息 commit 58211e7a5da5e74171e90d8b90b2f00881a48d3a Author: test <test@36nu.com> ...

  5. Local Model Poisoning Attacks to Byzantine-Robust Federated Learning

    In federated learning, multiple client devices jointly learn a machine learning model: each client d ...

  6. 【JS】332- 为什么我更喜欢对象而不是 switch 语句

    昨天偷懒了,欢迎点击关注???这样我就多更大的动力日更了- 正文从这里开始~~~ 最近(或者不是最近,这完全取决于您什么时候阅读这边文章),我正在跟我的团队伙伴讨论如何去处理这种需要根据不同的值去处理 ...

  7. CSS中的变量使用,var()语法

    参考博客:https://blog.csdn.net/qq_34206361/article/details/53690414

  8. JS基础-事件队列

    为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaSc ...

  9. Django项目BBS博客论坛

    BBS 项目开发逻辑梳理 第一步:先进行数据库设计 数据库设计规则是: 1.先创建基表:用户表.站点表.文章表.标签表.分类表.文章2标签第三张关系表.点赞点踩表.评论表 2.书写表中的基本含有的字段 ...

  10. LinuxMint配置GitHub(图文教程)

    1.生成秘钥(直接回车,秘钥存放路径看命令行信息) 2.打开秘钥,需要注意的是.ssh可能是隐藏的,这时需要Ctrl+H显示隐藏文件夹 3.复制秘钥,添加到GitHub(Settings), 4.添加 ...