加薪攻略之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-devnpm 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.jsimport 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.jsconst 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>???</v-button>\',}))
7.运行storybook
npm run storybook
待项目启动，自动打开默认浏览器。
即可看到Botton组件的story

五、插件运用
上面只是对组件进行了简单的展示，如何能看到组件的交互效果和组件相关的描述文档信息呢？
这里就要用到的storybook的插件了，这些有趣的插件在Storybook官方或社区都有，
这里主要介绍两款Knobs 和 Vue-info，来看看效果：
1)动态交互展示组件属性

2)相关文档展示

看完效果，咱们就来手模手的实践下吧?
Knobs
动态交互展示组件属性，官方地址
1.安装
npm install @storybook/addon-knobs --save-dev
2.注册
1）创建.storybook/addons.js  进行注册
import \'@storybook/addon-knobs/register\';
2） 在.storybook/config.js   全局配置
import { withKnobs } from \'@storybook/addon-knobs\';...addDecorator(withKnobs);

3.使用
编写上传组件的story
//upload.stories.jsimport { storiesOf } from \"@storybook/vue\";import { text, boolean, number } from \'@storybook/addon-knobs\';import ExcelUpload from \'../../src/components/Upload/index.vue\';let stories = storiesOf(\'上传组件\', module)stories.add(\'演示\', () => ({components: { ExcelUpload },props: {visible:{default: boolean(\'visible\', true)},uploadURL:{default: text(\'uploadURL\',\'http://www.xxx.com/queryQackItemStoreToExcel/lesseeCompanyId.xlsx\')},limitSize:{default:number(\'limitSize\',200)}},template: \'<excel-upload :visible.sync=\"visible\" :uploadURL=\"uploadURL\" :limitSize=\"limitSize\" @loadDataList=\"uploadFinish\"></excel-upload>\',methods: {uploadFinish(val) {console.log(val);},},}));
vue-info
vue组件信息展示插件，官方地址
1.安装
npm install --save-dev storybook-addon-vue-info
2.注册
1）创建.storybook/addons.js  进行注册
import \'storybook-addon-vue-info/lib/register\'
2） 在.storybook/config.js 全局配置
import { addDecorator } from \'@storybook/vue\'import { withInfo } from \'storybook-addon-vue-info\'addDecorator(withInfo)
3.在没进行全局配置时，可单独引入使用
在编写的组件的story中
import { storiesOf } from \'@storybook/vue\'+ import { withInfo } from \'storybook-addon-vue-info\'storiesOf(\'MyComponent\', module)+ .addDecorator(withInfo).add(\'foo\',() => ({components: { MyAwesomeComponent },template: \'<my-awesome-component/>\'}),{info: {summary: \'Summary for MyComponent\'}})
踩坑点：
使用storybook-addon-vue-info 插件来描述vue-component中时，展示不出事件名和描述信息时

进行如下配置

六、结尾
怎么样，感受到storybook的魅力了吗，赶紧开启你的story吧?