加薪攻略之UI組件庫實踐—storybook

2021 年 1 月 6 日
筆記
前端

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

五、插件運用

上面只是對組件進行了簡單的展示，如何能看到組件的交互效果和組件相關的描述文檔資訊呢？
這裡就要用到的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.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','//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吧😊

Tags: 前端