需求背景

最近在项目中遇到了一个类似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. springboot配置文件加载位置

      springboot 启动会扫描以下位置的application.properties或者application.yml文件作为Spring boot的默认配置文件 –file:./config/ – ...

    2. B2460 [BeiJing2011]元素 线性基

      这个题是对刚才线性基的一个补充,就是中间有一些小贪心,贪心就很有意思,先按权值排序,然后就瞎搞就行了. 题干: Description 相传,在远古时期,位于西方大陆的 Magic Land 上,人们 ...

    3. Tool:ProcessOn

      ylbtech-Tool:ProcessOn ProcessOn是一个面向垂直专业领域的作图工具和社交网络,成立于2011年6月并于2012年启动.ProcessOn将全球的专家顾问.咨询机构.BPM ...

    4. 自己动手丰衣足食,为Zepto添加Slide动画效果

      一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...

    5. bzoj3687简单题(dp+bitset优化)

      3687: 简单题 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 861  Solved: 399[Submit][Status][Discuss] ...

    6. Moco模拟服务器实现请求&响应 (一)

      接口测试Moco工具 1.使用Moco模拟,首先需要下载Moco 的jar 包,下载链接: http://central.maven.org/maven2/com/github/dreamhead/m ...

    7. android平台 cocos2d-x 读取相册数据

      现已解决 方案如下: 1.使用 jni 调用 java 方法 启动相册选择框2.使用java将获取的图片保存到本地3.使用Cocos2d-x中 CCImage 读取 JAVA代码如下: //启动图片选 ...

    8. checked、disabled在原生、jquery、vue下不同写法

            以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

    9. Android 新浪微博开放平台应用 android签名怎么获得

      方法一: 通过命令行,直接生成MD5值 keytool -list -v -keystore keystorefile -storepass 其中keytool为jdk自带工具:keystorefil ...

    10. [2月1号] 努比亚全机型ROM贴 最全最新NubiaUI5.0 ROOT 极速体验

      前言 感谢在开发过程中mandfx和dgtl198312予以的帮助!本帖将整理所有Nubia手机的最新刷机包,还有少数机型未制作刷机包,需要的机油可以联系我制作recovery以及刷机包加群23722 ...