需求背景

最近在项目中遇到了一个类似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,因此简单罗列下使用时遇到的问题:

  • 在template中无法做到智能提示,需要智能提示只能使用tsx,这一点是比较痛苦的
  • 定义Prop时需要加非空断言(!

    从0到1发布一个Vue Collapse组件的更多相关文章

    1. 如何开发和发布一个Vue插件

      前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...

    2. 自己编写并发布一个Vue组件

      自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...

    3. 从0到1发布一个npm包

      从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...

    4. 如何抽象一个 Vue 公共组件

      之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

    5. 如何创建并发布一个 vue 组件

      步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git re ...

    6. 用webpack发布一个vue插件包

      创建库 本来以为很简单,结果配置了webpack之后,运行build就报错了,似乎不认识es6语法,于是先后安装了几个包: @babel/core @babel/preset-env babel-lo ...

    7. 从头开始开发一个vue幻灯片组件

      首先新建项目vue init webpack projectName 安装依赖包npm i这些就不说了 接下来就是构建我们的swiper组件 因为我写的代码不规范, 通不过eslint的检测, 会频繁 ...

    8. 如何发布一个npm包(基于vue)

      前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础, ...

    9. 16款优秀的Vue UI组件库推荐

      16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

    随机推荐

    1. ExecutorCompletionService原理具体解释

      在JDK并发包中有这么一个类ExecutorCompletionService,提交任务后,能够按任务返回结果的先后顺序来获取各任务运行后的结果. 该类实现了接口CompletionService: ...

    2. 【Linux】Ubuntu 开机默认亮度改动方法

      换了ubuntu 之后.发现开机屏幕都是"最大亮度",每次都要到设置中手动调节,非常麻烦.于是想到去改动这个设置.Google一通,别人可行的办法到我这就没用了.郁闷.最后是在st ...

    3. NoSQL数据库:Redis内存使用优化与存储

      Redis常用数据类型 Redis最为常用的数据类型主要有以下五种: ●String ●Hash ●List ●Set ●Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Re ...

    4. 【Ubuntu】小技巧

      1.在 usr/share/applications/ 中可以找到 .desktop 文件,修改其内容可以修改你的桌面快捷方式, 例如图标或者分类还可以新建你的 .desktop ,如果你安装的软件没 ...

    5. 【NOIP2018】为什么这么无力啊

      菜鸡又要爆零了 辛辛苦苦背板子结果考时候脑子一片空白 第一题线段树调了半小时 看完三道题两道写暴搜一道写暴力(说是暴搜,觉得更像写了个背包) 别提暴搜还忘记剪枝. . . . . . 我觉得考场上最菜 ...

    6. 使用ALSA编写自己的音频程序【转】

      本文转载自:http://blog.csdn.net/beyondioi/article/details/6994548 Alsa是Linux高级音频接口.面对众多的音频设备,Alsa为Linux音频 ...

    7. Android WiFi开发教程(二)——WiFi的搜索和连接

      在上一篇中我们介绍了WiFi热点的创建和关闭,如果你还没阅读过,建议先阅读上一篇文章Android WiFi开发教程(一)——WiFi热点的创建与关闭. 本章节主要继续介绍WiFi的搜索和连接. Wi ...

    8. bzoj1699

      st表 我还不会st表 f[i][j]表示[i,i+2^j)区间的最值 构造就像lca一样f[i][j]=f[i][j-1] f[i][j]=max(f[i][j-1],f[i+(1<<( ...

    9. E20170915-hm

      client n. 顾客; 当事人; 诉讼委托人; [计算机] 客户端; seal  n. 密封; 印章; 海豹; 封条;  v. 密封; 盖章; 决定; 封上(信封); sheet  n. 纸; 被 ...

    10. web动画小结

      前端写动画,无非两种方案,一种是通过css,另一种是js css的方案: 1.transform的单独使用 (IE9+) rotate(90deg) 2d旋转,也可以理解为沿着3D的Z轴旋转 rota ...