辉是暖阳辉

辉是暖阳辉

关注
发信
关注(28)粉丝(399)

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

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

一、业务背景

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

二、选用方案

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

使用效果

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

Storybook官网

三、引入分析

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

项目结构

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

项目效果

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

四、实现步骤

  • 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 [email protected] 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>🥰😊😊</v-button>',
  }))

7.运行storybook

npm run storybook

待项目启动，自动打开默认浏览器。
即可看到Botton组件的story

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

五、插件运用

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

1)动态交互展示组件属性

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

2)相关文档展示

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

看完效果，咱们就来手模手的实践下吧😊

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);

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

3.使用

编写上传组件的story

//upload.stories.js
import { 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中时，展示不出事件名和描述信息时
加薪攻略之UI组件库实践—storybook-LMLPHP

进行如下配置
加薪攻略之UI组件库实践—storybook-LMLPHP

六、结尾

怎么样，感受到storybook的魅力了吗，赶紧开启你的story吧😊

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

01-07 09:06
Powered by LMLPHP ©2024 辉是暖阳辉 0.059442