【前端工程】前端组件化之设计组件库系统(一)

前言

当业务越来越多，我发现很长一段时间，我一直在不同的应用程序中写着类似的组件，或者把一个应用程序中的组件copy到另外一个应用程序中，有的时候甚至把一个已经有的组件修改成适合当下业务的新组件。

不仅仅是曾经的我，当我们的前端团队越来越大，发现内部也有很多和我一样的人。由于内部成员沉淀过的组件不够公开化，其他人无法立即知道团队内部现有组件的沉淀情况，而不断重复造组件。

很明显的在组件复用这块，团队的问题很大，如果组件沉淀的足够具有可复用性，团队内部业务开发效率将得到很大提升。

所以就在思考，有没有什么高效的方法，可以让我们把业务中经常需要复用的组件抽出来，然后可以可视化，还要附带具体的组件使用说明文档？很幸运已经有了storyBook，它完美的满足了我想要的需求。

storyBook创建组件库系统

storyBook的一些好处

• 支持不同框架
• 组件文档自动化生成
• 组件可运行看效果同时支持代码复制
• 易上手

组件界面如下：

storyBook搭建组件库系统

以设置vue组件库系统为例

1、初始化项目

npx -p @storybook/cli sb init --type vue

2、安装解析Vue文件的相关依赖

npm install vue --save 
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev
//安装样式加载器，用于解析vue文件中的样式部分
npm install -D sass-loader node-sass

安装样式加载器之后，需要在main.js中做如下配置：

webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    })

    // Return the altered config
    return config
  }

3、编写组件
默认会执行.stories.js结尾的文件，所以需要将组件放入此文件中，组件才会显示。

.vue文件和我们平常写的vue文件一样，.stories.js文件内容如下：

import {
  action
} from '@storybook/addon-actions'
import {
  linkTo
} from '@storybook/addon-links'

import ForchangeInput from './ForchangeInput'


export default {
  title: 'Input',
  component: ForchangeInput
}

export const Text = () => ({
  components: {
    ForchangeInput
  },
  template: '<ForchangeInput class="input"></ForchangeInput>',
  methods: {
    action: action('change')
  }
})

4、运行npm run storybook
以自定义的input组件为例子：

<template>
  <input
    class="input-field"
    ref="input"
    v-bind="$props"
    :value="inputValue"
    @input="changeValue"
    :type="type"
    @keyup="handleKeyUp"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="changeHander"
  />
</template>

<script>
const COMPONENT_NAME = 'enroll-input'
const EVENT_INPUT = 'input'
const EVENT_BLUR = 'blur'
const EVENT_FOCUS = 'focus'
const EVENT_CHANGE = 'change'
const EVENT_KEYUP = 'keyup'
const EVENT_INPUT_CHANGE = 'inputChange'

export default {
  name: COMPONENT_NAME,
  data() {
    return {
      inputValue: this.value,
      isFocus: false,
      isOnComposition: false,
      emittedInput: false
    }
  },

  props: {
    value: [String, Number],
    type: {
      type: String,
      default: 'text'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: String,
    readonly: {
      type: Boolean,
      default: false
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    autocomplete: {
      type: [Boolean, String],
      default: false
    }
  },

  watch: {
    value(newValue) {
      this.inputValue = newValue
    }
  },

  mounted() {},

  beforeDestroy() {},

  methods: {
    handleInputChange(e) {
      this.$emit(EVENT_INPUT_CHANGE, e)
    },

    handleKeyUp(e) {
      this.$emit(EVENT_KEYUP, e)
    },

    changeValue(e) {
      let newValue = e.target && e.target.value
      this.$emit(EVENT_INPUT, newValue.trim())
    },

    changeHander(e) {
      this.$emit(EVENT_CHANGE, e)
    },

    handleFocus(e) {
      this.$emit(EVENT_FOCUS, e)
    },

    handleBlur(e) {
      this.$emit(EVENT_BLUR, e)
    }
  }
}
</script>

<style lang="scss" scoped>
.input-field {
  width: 100%;
  background: #fff;
  border: solid 1px #dbdada;
}

input {
  border: none;
  font-size: 28px;
  color: #383333;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  height: 44px;
  text-align: right;
}

input:-ms-input-placeholder {
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #c3c1c1;
}

input:disabled,
textarea:disabled {
  -webkit-text-fill-color: #383333;
  -webkit-opacity: 1;
  color: #383333;
}
</style>

最后运行的组件效果：
在docs选项可以看到有效果、事例代码、有自动根据组件的props对象生成的配置参数列表、methods中的方法生成的事件列表。

运行视图和事例代码：

参数：

这就是storyBook的入门搭建，还有很多可以挖掘的，可以帮助我们更高效率的构建可共享的清晰的组件库系统。

参考资料：
组件化
storyBook创建组件系统
storyBook