配置文件设计复杂了，我自己都要看着样例写，等一个重构。

概述

这个项目的特点如下：

动态加载组件
与组件分离的props，data预设数据
即时选择并且展示已有组件

DEMO地址

一开始我只是想做一个类似于bitsrc，storybook中的组件即时预览功能，在开发过程中觉得如果只显示组件样式有些鸡肋，所以中途改变功能点，加入了预设数据的功能。

目前本项目处在一个能用的阶段，功能的实现上没设计好，导致新增数据的步骤比较繁琐，需要参考文档，在新项目中应该会有改进。

主要实现

const component = require.context('./components', true, /\.vue$/)
const requireAll = context => context.keys().map((item) => {
  return {
    module: context(item)
  }
})

this.components = requireAll(component).filter(item => !item.module.default.hide).map(item => {
  const obj = {
    instance: item.module.default
  }
  return obj
})

大致的流程是通过require.context递归式地引入./components目录下的vue文件，再从列表中筛选出“非隐藏”的（有些组件必须嵌套使用，无需单独进行预览），将默认导出返回。

require.context是webpack提供的方法，返回值是一个函数f，通过require.context().keys()取得读取到的文件item组成的列表，这个函数f的作用是通过item引入文件。有些绕，所以提取出了requireAll用于完成“根据item返回组件”的步骤。