共计 5407 个字符，预计需要花费 14 分钟才能阅读完成。
一、简介
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 更加个性化，性能更加欠缺。
