关于前端:Storybook-for-vue-前端ui组件管理神器

Storybook 是一款开源的组件开发工具，它能够运行在主程序之外，因而开发者能够用它来独立开发 UI 组件，或者用它来疾速构建 ui 组件文档。

目前 Storybook 反对的框架有：

React
React Native
Vue
Angular
Marionette.js
Mithril
Marko
HTML
Svelte
Riot
Ember
Preact
Rax

能够看到，Storybook 的性能是相当丰盛的。本文将以 Vue 为例，从零开始搭建一个本人的 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 与一开始的看到的图片几乎就是买家秀和卖家秀的区别。这是因为在 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 可照猫画虎，依据官网文档给的参数进行配置即可。

装置：

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'

到这里就能够了，从新运行一下看一下后果：

装置：

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 更加个性化，性能更加欠缺。

关于前端:Storybook-for-vue-前端ui组件管理神器

一、简介

二、装置 Storybook

三、storybook 的插件 – addons

1. story-source – 查看以后 story 源码

2. readme – 以后组件的文档阐明