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

前言

当业务越来越多，我发现很长一段时间，我一直在不同的应用程序中写着类似的组件，或者把一个应用程序中的组件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: '',
  methods: {
    action: action('change')
  }
})

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

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

运行视图和事例代码：

参数：

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

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