[Day08] Storybook - 基本介绍 & 安装

Credit: https://www.behance.net/gallery/35988339/Style-guide-e-commerce-web-app

当要启动一个专案的时候，UI 设计师可能会先产出一份的 UI Style Guide 来让和前端工程师沟通专案可能会用到的颜色、字型以及会重复使用的 UI 元件的样式和操作行为，但有时候有些 UI 元件比较复杂很难用文字叙述来解释清楚，或者等到实作出来的时候才发现和设计师的预期不符，而导致来来回回花了很多的沟通成本。

而我们要介绍的第二个前端实战技能 Storybook 就是一个可以帮助 UI 设计师和前端工程师来沟通 UI Style Guide 的工具，甚至也能当作前端的元件库 (component library) 来攥写及示范要如何调用参数，让其他前端工程师清楚知道要如何使用这些元件。

官网上有提供非常多的实作案例，像是 Airbnb、GitLab 或是 IBM 等团队都有使用 Storybook 作为开发的辅具工具，有兴趣的朋友可以参考这个连结来看看其他团队都是怎麽建立他们的元件库。

那废话不多说了，我们马上来动手做吧。

前置作业

为了方便示范，我使用 Vue CLI 建置专案 (记得要选 Vue 3.x )。

$ npm install -g @vue/cli
$ vue create [专案名称]
$ cd [专案名称]
$ npm run serve

接着将 Storybook 安装至这个专案。

$ npx sb init

专案结构

安装完後，Storybook 会在 package.json 新增建置与执行的指令。

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

除了新增指令以外，也会自动帮我们建立很多资料夹与档案。

src/stories 资料夹 用来存放 Story 定义的资料夹，预设有提供一样范例样板，让我们知道基本的范例是如何实现的。

.storybook 资料夹 有关 Storybook 配置的设定档都会在这个资料夹中。

main.js 主要的配置文件，用来控制 Storybook Server 的行为，因此在更改之後必须重新启动 Storybook 才会生效。
preview.js 用来控制故事 (Story) 的呈现方式。

之後会再仔细说明 Storybook 的配置，在这之前有兴趣的朋友也可以查看这份文件 Configure Storybook

Browse Stories

执行 npm run storybook 就会自动在浏览器打开以下的画面了

Storybook 提供了很多辅助功能来增加我们浏览 Story 的体验，而这些辅具工具都是 Storybook CLI 安装时就自动帮我们安装的 Essential addons，你可以在 Addons Catalog 寻找想要的 addons 或者是自己建立一个满足工作流程需求的 addons 不过这部分就不会在这次的铁人赛介绍，有兴趣的朋友可以查看 Introduction to addons 。