Storybook：HTML篇

[storybook]是一款UI组件展览工具。可以展示诸如React、Vue等写就的组件，当然也可以直接展示HTML代码咯。

Storybook for HTML

• Get started
  • Introduction
    • （过）
  • Install
    • 在工程根目录执行npx storybook init --type html
      • storybook init必须添加到已有的框架中
      • 根据https://storybook.js.org/docs/react/configure/telemetry，有几种方式opt-out
        • disableTelemetry配置成true
        • 指定命令行选项--disable-telemetry
        • 设置环境变量STORYBOOK_DISABLE_TELEMETRY为1
      • 故障排除
        • 如果出现Error: error:0308010C:digital envelope routines::unsupported，有几种办法
          • set NODE_OPTIONS=--openssl-legacy-provider
          • "start": "react-scripts --openssl-legacy-provider start"
          • 参考https://itsmycode.com/error-digital-envelope-routines-unsupported/
      • 额外信息
        • npx start-storybook --help查看建构相关的帮助
    • 执行npm run storybook来建构storybook
  • What’s a Story
    • 组件以.stories.js以及.stories.ts结尾
    • 组件其实是一个模板，可以参数，参数用来表现不同的状态
  • Browse Stories
    • Addons
      • Controls允许与一个组件的args动态交互
      • Actions帮助确认回调的结果
  • Setup Storybook
    • （待读） [storybook]: https://storybook.js.org/