需求背景

最近在项目中遇到了一个类似Collapse的交互需求，因此到github上找了一圈关于Vue Collapse的相关轮子，但是多少都有些问题。有的是实现问题，例如vue2-collapse，伸缩部分采用max-height指定动画，存在缺陷；还有的是扩展性问题，遇到定制场景比较棘手。因此，决定自己撸一个Collapse组件。从项目中的一个需求，到目前已将它开源并发布到npm，还是踩了许多坑的。代码虽然简单，但是过程却不太容易。因此这篇文章不是安利这款组件r-collapse-vue，仅仅是想记录一下整个开发生命周期，需要做什么，以及遇到什么问题。当然了，如果这个组件或是这篇文章对你有帮助，劳烦点进去给个star，万分感谢~

开发流程

我们的整个开发流程，可以简单的总结如下：

  1. 项目脚手架搭建（Vue CLI3）
  2. 组件功能开发
  3. 单元测试（Vue Test Utils + Jest）
  4. 文档编写（Vue Styleguidist + Github Pages）
  5. 发布NPM
  6. 持续集成配置（TravisCI）

我们来详细聊一聊每个过程是如何实施的，且遇到了哪些问题。

脚手架搭建

脚手架我们直接使用Vue CLI来搭建即可，其已经提供了丰富的功能，并且可以通过vue.config.js扩展webpack的能力。但是要注意的是，我们的构建产物是一个模块，而不是我们平时在项目中构建出一个应用。我们希望构建出来的模块是一个兼容CommonJs或是UMD，以便于使用者在不同的环境中引用。所幸，Vue CLI3也给我提供了这样一个功能，详细可参考文档。

其次，本次开发我选择了TypeScript，脚手架默认集成了vue-property-decorator。使用之后直观的感受就是，Vue的整个生态对TS的支持还不够完善，但整体还是比较爽的，期待官方在3.0中能够彻底支持TS。本文主题不是讨论TS，因此简单罗列下使用时遇到的问题：