如何用 StoryBook 展示 Vue 组件库

本文讲述的是如何用 StoryBook 展示自定义 Vue 组件库。 

00 背景

Vue 技术栈的同学通常会在项目中抽出很多组件，于是需要一个方式或者一个平台将所有组件以及用法展示出来。 

有很多方式可以做到这一点，例如 ElementUI 的官网都是通过 markdown 定义的，然后通过 markdown 转换成 HTML，并且展示所有组件以及所有源码，另外 ElementUI 也有所有组件的单元测试。所以，一方面可以将 ElementUI 处理组件的方式借鉴出来。

这里我们主要说明下 StoryBook 也可以很好的满足这个需求。 

接触 StoryBook 有很长时间了，2017 年主要用来写 React 的组件展示。 现在主要讲下在 Vue 上最佳实践。 

在写着篇文章之前，全网找了下关于 StoryBook 在 Vue 上的实践不是特别多，所以整个实践过程我会尽量写清楚一些。 

01 StoryBook 介绍

StoryBook 官网：https://storybook.js.org/

整体 github 上的趋势， 

StoryBook 趋势

StoryBook是一个可视化的组件展示平台，并为 UI 组件提供 playground. 该工具可以让开发者独立的创建可以交互展示的 UI 组件。 

UI 组件独立运行在于 StoryBook 框架无关的环境中，并且无需担心 UI 组件的特殊依赖和需求。 

下面是 StoryBook 历史版本到现在对所有框架的支持情况： 

StoryBook 的支持情况

02 开始使用

下面讲下 StoryBook 在 Vue 上的应用。 

StoryBook 的使用有两种方式，一种是自动安装，一种是手动，推荐大家用手动安装，因为自动也是容易有问题。

首先 StoryBook 的应用场景是假定你已经有个 Vue 项目，想要对你项目中的组件做一个交互性的展示。所以如何你一开始就拿个空项目自动安装是跑不起来的，会提示你装 Vue 等等依赖。 

现在手摸手、心贴心说清楚怎么跑起整个流程。 

1. vue-cli 创建一个 Vue 项目

vue create demo-elements-storybook 

cnpm i 

npm run serve 

2. 增加与 @storybook 相关的依赖 

cnpm install @storybook/vue -S 

cnpm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue -S 

3. 在 package.json 增加一个 script 

{

    "scripts": {

          "storybook": "start-storybook"

    }

}

4. 配置以及编写 Stories 

我们看下目录结构

目录结构

增加个 .storybook 目录，并增加 config.js，内容如下

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

configure(require.context('../src', true, /\.stories\.js$/), module);

在 src 下面添加 stories 目录以及 0-App.stories.js，内容如下

// import { linkTo } from '@storybook/addon-links';

import App from '../App.vue'

export default {

  title: 'App',

};

export const toStorybook = () => ({

    components: { App },

    template: '',

  });

  toStorybook.story = {

    name: 'app',

  };

最后， 

npm run storybook 

效果如下， 

当然，StoryBook 还支持搜索、导出静态资源等等好玩的功能，等我有空了再上去补充吧。