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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

加薪攻略之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.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>