加薪攻略之UI组件库实践—storybook

领导“拍了拍”你，是时候搭建你们团队的 UI 组件文档库了

一、业务背景

项目中抽离的组件较多的时候，没有集中展示出来具体有些什么，而是分布在各个使用的业务场景中。对于新接触项目的开发人员来说，由于不清楚业务场景，考虑复用组件时不是很直观，也不便于后期组件测试，维护和升级。

二、选用方案

目前业界最流行的StoryBook，使用StoryBook——更好地管理我们的UI组件
使用StoryBook的特点:
组件驱动开发，由下至上，从底层组件开始一步步构建界面
隔离开发环境展示组件，无需运行项目
无需关心组件的依赖和要求
隔离UI组件，支持独立调试&测试，统一展示项目组件库。

使用效果

Storybook官网

三、引入分析

由于原有项目技术栈为：vue+elementui+less， 可以参考Vue版的官方指南进行安装，经过一番实践，看了很多文章，也踩了很多坑，终于总结了以下步骤，可以更好的适配我们的项目和无侵入式引入storybook。

项目结构

项目效果

四、实现步骤

• install storybook 依赖
• 新建storybook配置文件./storybook/config.js，添加相关配置，加载组件的stories
• 为storybook的组件运行添加对应的webpack配置（./storybook/webpack.config.js）
• 为组件添加story(即xxx.stories.js)
• 运行storybook

1.添加依赖

npm install @storybook/vue --save-dev
npm install vue-loader@15.3.0 style-loader css-loader less-loader  --save-dev

（注意vue-loader的版本在15以上，配合webpack4使用）

2.添加npm执行脚本

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

3.添加配置文件

.storybook/config.js

import { addParameters,configure } from '@storybook/vue';
function loadStories() {
  /*根据特定的文件名加载stories，在这个例子，用xxx.stories.js命名文件*/
  const req = require.context('./stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}
addParameters({
  options: {
    panelPosition: 'right' //操作面板在右边
  },
})
configure(loadStories, module);

根据项目情况，同样在以上文件中，做一些和项目中 main.js 相似的初始化工作：

//.storybook/config.js

import Vue from "vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";
import '@/utils/prototype';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.use(ElementUI, { size: 'mini'});

...

4.添加必要的webpack配置

创建文件 .storybook/webpack.config.js

// .storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {
function resolve(dir) {
  return path.join(__dirname, "..", dir);
}
//设置别名同项目保持一致
config.resolve = {
  extensions: [".js", ".vue", ".json", ".jsx"],
  alias: {
    vue$: "vue/dist/vue.esm.js",
    "@": resolve("src"),
    "@assets": resolve("src/assets")
  }
};    
    
config.module.rules.push({
  test: /\.(css|less)$/,
  use: ["style-loader", "css-loader","less-loader"],
  exclude:/node_modules/
});
  return config;
};

5.准备项目中的组件

src/components/Button/index.vue

<template>
  <button :class="type" class="btn">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    type: {
      type: String,
      default: "default" // default/primary/danger
    }
  }
};
</script>

<style scoped lang="less">
.btn {
  border: 1px solid transparent;
  background: #fff;
  outline: none;
  color: #333;
  padding: 5px 10px;
}
.default {
  border: 1px solid #e3e3e3;
  color: #333;
  background-color: #fff;
}

</style>

6.为组件添加story

创建 .storybook/stories/button.stories.js

import { storiesOf } from '@storybook/vue';
import vButton from '../../src/components/Button/index.vue';

storiesOf('Button', module)
  .add('with text', () => ({
    components: { vButton },
    template: '<v-button>Hello Button</v-button>',
  }))
  .add('with some emoji', () => ({
    components: { vButton },
    template: '<v-button>