一、简介
Storybook是一款开源的组件开发工具，它能够运行在主程序之外，因而开发者能够用它来独立开发UI组件，或者用它来疾速构建ui组件文档。
目前Storybook反对的框架有：
- React
- React Native
- Vue
- Angular
- Marionette.js
- Mithril
- Marko
- HTML
- Svelte
- Riot
- Ember
- Preact
- Rax
能够看到，Storybook的性能是相当丰盛的。本文将以Vue为例，从零开始搭建一个本人的Storybook。
二、装置Storybook
首先本人创立一下文件夹，storybook-demo。
官网文档中给的装置形式有2种，第一种是自动化装置，有点相似vue的脚手架，它会主动将环境配置好，开发者无需手动初始化相干配置文件。
npx -p @storybook/cli sb init --type vue第二种是能够手动进行配置，读者能够参照官网的教程来进行装置。附送地址：https://storybook.js.org/docs/guides/guide-vue/。
然而笔者通过尝试，应用官网的办法装置的时候会短少局部依赖导致运行失败，上面将介绍一下笔者本人应用的装置办法。
首先，装置vue脚手架，而后初始化我的项目:
vue create storybook-demo
抉择babel和css预处理， 并且在第三部抉择装置node-sass，这几项是必须的，其余可依据须要进行抉择。
脚手架装置实现后，删除无关文件，并在根目录下新建.storybook、stories文件夹，在.storybook下新建以下文件：addons.js、main.js、config.js、webpack.config.js。实现之后目录如下：
上面再进行storybook的相干装置。
装置storybook for vue:
npm install @storybook/vue --save-dev在根目录下找到package.json文件并配置疏导：
{ "scripts": { "storybook": "start-storybook" }}当然，你也能够在前面跟上-p port来设置默认端口号，如：
{ "scripts": { "storybook": "start-storybook -p 6006" }}在根目录下新建.storybook文件夹，并在外面新建main.js文件，进行相干配置：
module.exports = {
stories: ['../stories/**/*.stories.js', '../stories/*.stories.js']
};
这样零碎就会主动解析src目录下的*.stories.js、*.stories.ts文件了。
之后，在根目录下新建src文件夹，在外面新建index.stories.js文件并编写本人的组件：
import Vue from 'vue';import MyButton from './Button.js';export default { title: 'Button' };export const withText = () => '<my-button>with text</my-button>';export const withEmoji = () => '<my-button> </my-button>';export const asAComponent = () => ({ components: { MyButton }, template: '<my-button :rounded="true">rounded</my-button>'});Button.js（因为这里没有装置vue文件的解析依赖，所以只能用js文件来进行代替，如果想引入vue来代替js，可自行装置相干loader）:
export default { name: 'my-button', data() { return { buttonStyles: { border: '1px solid #eee', borderRadius: 3, backgroundColor: '#FFFFFF', cursor: 'pointer', fontSize: 15, padding: '3px 10px', margin: 10, }, }; }, template: ` <button :style="buttonStyles" @click="onClick"> <slot></slot> </button> `, methods: { onClick() { console.log('click'); this.$emit('click'); }, },};这样，一个简略的storybook就搭建实现了。在命令行输出：
就会主动关上方才的storybook。
三、storybook的插件 - addons
通过下面的搭建能够看到，咱们本人搭建的storybook与一开始的看到的图片几乎就是买家秀和卖家秀的区别。这是因为在storybook中，它提供了很多插件供开发者应用，开发者能够应用addons给每个story减少额定的性能，如应用文档、查看源码、查看事件等，使每个story的性能更加丰盛。
storybook自带的addons已足够应用，当然官网也提供了相干api能够让开发者编写本人的addon，具体实现可移步到官网文档中进行查看。
官网自带的addons可参考：
https://storybook.js.org/addons/
https://github.com/storybookjs/storybook/tree/master/addons
当然，应用addons之前必须先到https://github.com/storybookjs/storybook/blob/master/ADDONS\_SUPPORT.md查看相干addon是否反对以后框架，比如说info插件就只反对react然而不反对vue，之前笔者还在这里钻研了半天为什么info始终配置失败。
上面介绍几个笔者本人用过的addon以及配置办法，其余addon可照猫画虎，依据官网文档给的参数进行配置即可。
1. story-source - 查看以后story源码
装置：
npm i @storybook/addon-storysource --save-dev配置：
.storybook/main.js
const path = require("path");module.exports = { stories: ["../stories/**/*.stories.js", "../stories/*.stories.js"], addons: [ { name: "@storybook/addon-storysource", options: { rule: { // test: [/\.stories\.jsx?$/], This is default include: [path.resolve(__dirname, "../stories")], // 找到本人寄存stories的文件夹 }, loaderOptions: { prettierConfig: { printWidth: 80, singleQuote: false }, }, }, }, ],};其中，loaderOptions的默认值为：
{ printWidth: 100, tabWidth: 2, bracketSpacing: true, trailingComma: 'es5', singleQuote: true,}在.storybook/addons.js外面进行插件注册：
import '@storybook/addons';import '@storybook/addon-storysource'到这里就能够了，从新运行一下看一下后果：
2. readme - 以后组件的文档阐明
装置：
npm install --save-dev storybook-readme注册：
.storybook/addons.js
import 'storybook-readme/register';配置：
这里可分为全局配置和部分配置，全局配置能够在.storybook/config.js外面进行相干配置，部分配置可在制订的*.stories.js文件里进行配置。区别如下：
全局配置需调用以下办法：
import { addDecorator } from '@storybook/vue';import { addReadme, configureReadme } from 'storybook-readme';configureReadme({ // ...some code});addDecorator(addReadme);部分配置：
import { storiesOf } from "@storybook/vue";import MyButton from "./MyButton.vue";import ButtonReadme from "./MyButton.md";storiesOf("Demo", module) .addParameters({ readme: { codeTheme: "duotone-sea", content: ButtonReadme, sidebar: ButtonReadme, } }) .add("Button", () => { return { components: { MyButton, }, template: `<my-button type="primary">My Button</my-button>`, }; });因为这个addon是没有官网文档的，笔者花了好长时间才找到一个开源文档，可移步到https://github.com/tuchk4/storybook-readme进行参考，外面也有相干demo能够查看。
略微解释一下外面各办法参数的作用：
configureReadme({ /** * Wrapper for story. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */ // 组件区域的预处理，相当于在组件展现的时候里面套上一层div，组件作为插槽插入到这个div外面，在这里能够设置div的款式，如果是应用vue的话能够以vue组件格局插入，上面同理 StoryPreview /** * Wrapper for content and sidebar docs. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */ // 文档局部的款式，即插件外面的content DocPreview/** * Wrapper for header docs. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */ HeaderPreview/** * Wrapper for footer docs. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */ FooterPreview /** * Header docs in markdown format */ header: '', /** * Footer docs in markdown format */ footer: '',});
不了解preview的能够看一下上图，比方header的内容就为“用户交互组件demo”，headerPreview就是上面那层border，如果有将readme注册到addons.js外面，在绿色方框里还会有一个readme选项，能够查看文档。
在给特定story增加readme的时候，能够看到能够增加两个文档，如：
storiesOf("Demo", module) .addParameters({ readme: { codeTheme: "duotone-sea", content: ButtonReadme, sidebar: ButtonReadme, } }) .add("Button", () => { return { components: { MyButton, }, template: `<my-button type="primary">My Button</my-button>`, }; });其中，这里可能会有读者不了解。外面是content是对应图中红色方框的内容，sidebar则是对应绿色方框里的内容（如果有注册），codeTheme是md文档的款式，可自行设置。
这里还有一个小技巧，就是在编写content的时候，能够在文档中插入以下代码：
这段代码能够管制咱们的组件要在文档的哪个局部呈现。如果不填写，则默认会先显示文档内容，再显示组件内容。所以咱们最好在文档的最后面先增加上述代码，先将咱们的组件展现进去，再进行文档编写。
这就是笔者目前用过的两个addon了，其余addons读者能够本人尝试，能够让本人的storybook更加个性化，性能更加欠缺。