封装属于自己的组件库

9,548 阅读11分钟

封装属于自己的组件库 - VUE

适合人群:一起聊聊组件这件事

观看时间:30min

说明:一些经验分享,欢迎探讨

前言

现目前,vue 社区下大大小小的组件库是越来越多,优秀的开源组件也越来越丰富,比如

PC:View ui,Element ui, BootstrapVue ,Ant Design Vue,微软的MS Design,地图的:vue-baidu-map,vue-amap,图表的vue-echarts,vue-easetable,还有其它很多很多

Mobild:Vux,Vant等,最近火热的Futter

那么,在框架搭建之前如何选择一个合适的组件库,在开发过程中如何挑选优秀的开源组件,公用的部分如何封装为业务组件,项目积累下来的功能组件如何去积累维护,是我们该去思考的

如何选择一个合适的组件库(选型)

不管是快餐项目型还是架构持续完善型的架构,在搭建架构时,选择一个可靠合适的 UI 组件库至关重要,关系着系统架构后期的维护,组件的积累,项目的沉淀。一旦选择了一个不成熟的组件库,整套架构就会处处踩坑。那么如何选择一个合适的组件库

  1. 对比

    1.1 对比 github-Star 的数量,能够从侧面反映开源项目的受欢迎程度

    1.2 对比组件美观和交互体验,快餐型架构可以选择特定业务关系相似的框架

    1.3 对比社区,一个相对完善和活跃的社区对组件的维护将会越来越完善

    1.4 对比 API 的稳定性,完善性,对于开发人员来说,可靠的 API 再重要不过了

  2. 实践 + 实现

    2.1 不管是组件库还是一个功能组件,实践是检验组件是否好用最真实的做法,将你选择的组件自我使用体验以得到最真实的反馈

  3. 符合业务

    根据自身业务去选择对应的技术方案,会给开发过程减少一些不必要的麻烦,业务型和展示型的业务选择对应的 UI 框架会事半功倍

  4. 咨询

    咨询一下行业大佬也是一种捷径

实例:王二狗在架构转型选择 UI 组件库的时候,对比了 iview element bootstrap 的 github-star,组件数量,组件的 API,最后也咨询了多年在前端打拼的同事,最后选择了 iview(view ui),到目前未知,一直基于 view ui 优化完善架构,积累组件,其中大量业务组件依赖于 view ui,若王二狗想要将架构转换为 element ui,就要丢弃基于 view ui 的业务组件,若两者组件库多使用,有可能造成工程庞大,维护困难,所以在 UI 组件库选型的时候,慎重考虑,很有可能就会成为一直陪伴你的伙伴了~

如何挑选优秀的开源组件

除了挑选合适的组件库之外,开发过程中遇到一些组件库没有的组件,就需要我们自己来想法搞这样的组件,那么其中一种方法就是找优秀的开源组件,如何找,先百度,再去 github 搜索,还可以去掘金/知乎等社区找,找到能够满足我们功能的组件后,实现出来,没有的组件就需要我们自己来编码实现,作为我们积累的功能组件

那么众多的组件中如何挑选出符合我们要求的组件:

  • 首先挑选出功能要求符合的组件列表
  • 其次对比扩展性和美观,扩展性好的优先,更加友好的体验优先
  • 最后,实践实践实践,组件好不好用,别人说了不算,放在我们项目实现出来

🤔 功能组件如何去积累维护

除了挑选合适的组件库之外,项目开发过程中,项目经理总会有一些莫名其妙的想法,一些奇葩的交互组件,这种情况下,有两种解决方法,一种是找到替换方案用你的三寸不烂之舌说服项目经历,第二种就是乖乖的听话去实现。工作之初通常会选择第二种,工作久了通常会选择第一种,如果你工作了 1-2 年,还是处于第二种,那么大佬可以反思一下了

🤺 那么我们自己开发的组件究竟如何积累和维护:

怎样的组件值得维护

满足以下条件的组件值得维护:

  • 较好的交互体验
  • 社区没有满足我们需要的
  • 经常使用的,但是不要我们具体的业务产生高耦合度

组件封装的思想理念

如果我们把一个组件从编码到展示分为展示层,数据处理层和 API 层

那么,我们封装组件要做的其实就是将显示层和数据定义给处理好,固定的数据格式对应我们的组件模板

如果我们把一个组件放在 MVVM 模型中(其中这里 VM 视图模板我把它作为了我们父组件的一种抽象控制器 Control

那么,我们封装组件要做的就是视图和模板,由父组件的控制器来控制我们的组件展示

建立文档说明

一个好的组件能让自己记忆更久的方法就是建立文档,有了文档也可以给到团队的其它成员共同使用,像常见的 UI 组件库都有自己的文档,那么我们如何来建立自己的文档

  • 文档的内容要简单明了,组件示例/props 参数说明/events 监听事件说明/slot 插槽说明,如有内部事件暴漏出去,添加其它事件说明

  • 文档模板,一,我们可以自己搭建文档维护说明;二,我们可以使用文档编写的开源项目;vue 官方推出的一款VuePress(我采用的是第一种,因为当时不知道有 VuePress 这个开源项目),感兴趣的自行了解

vue 组件开发常用 protype

  • model, 绑定 value(非默认必须是包含在 props 的), 绑定事件(如果时自定义需要通过 emit 创建事件)

  • props, 我们封装组件最好把 prop 的类型和默认值都定义了并且说明清楚,验证规则 validator 实际应用中还没有用到

  • emit, 自定义事件

  • $refs, 获取内部暴漏的事件

  • slot, 插槽,我们自定义显示内容的好方法,数据的传递,$slots都是我们需要掌握的部分。数据的传递有新的和旧的两种写法,例子

// 旧写法
<div slot="tags" slot-scope="{item, formData}">;
    // 虚拟节点实例
    <InputNumber v-model="formData[item.config.fieldId]"></InputNumber>;
</div>
// 新写法  注意:新的插槽节点必须叫template,用div不行...实际用过
<template #tags="{item, formData}">;
    // 虚拟节点实例
    <InputNumber v-model="formData[item.config.fieldId]"></InputNumber>;
</template>;

开发业务组件

业务组件,什么样的组件称为业务组件,我们在项目开发过程中,某个界面的详情,可以在系统各个地方调用,这样的组件需要我们封装为公共的业务组件供系统使用,如果有人问为什么不复制,那用 vue 干嘛呢?

👀 如何判断哪些是公共的组件?

  • 习惯,平时的开发就养成组件拆分的习惯,不管组件是否公用,都不会错!

  • 在开发中,首先了解业务,想当咸鱼的那也没办法,靠习惯吧~了解了业务,自然就知道哪些组件是需要封装出来的了

  • 在项目多处重复,在多处场景调用的组件,可以封装为公共组件

👀 封装业务组件有什么需要注意的?

  • 组件的目录存放位置要建立好,有其它成员的话要通知到

  • 组件的使用地方最好能做好注释,方便后期运维

组件封装注意事项

  • 注释,不管是公共组件还是其它组件,注释这个习惯的问题还是强调一下,最好有注释规范

  • 命名,公共组件命名一般和他人形成统一的规约,比如自定义监听事件统一‘on-’开头,参数使用驼峰命名

  • 自定义的图片路径,不要将我们的图片路径限制死,封装组件最好开放出来

  • 私有样式,避免污染其它模块,当然其它组件也要注意私有样式的属性添加

组件库的发布

为什么要发布组件库,如果你在维护很多很多的项目,那我们这些项目依赖的这些自己封装的组件总不能在每个项目进行复制吧,多孬啊~虽然之初我就是这么做的...现在最常见的就是将自己的组件包发布在npm仓库,通过npm install ** 安装到自己的项目中

那么,组件库达到什么样的一个体系值得发布也是一个值得思考的问题。其实组件库的发布不是由组件的多少决定的,而是由你的思想决定的,如果你有了这种组件抽象,组件积累的思想,那么即使是一个小组件也可发布甚至开源~像我们平时用到的很多这样的小组件,比如拖拽组件/轮播/tree等开源的单个组件也是很多的,所以组件库/组件达到什么样的体系不重要,重要的是我们封装组件的这种思想

如何发布一个自己的组件库,封装+发布

  • 封装:vue官方插件这一章节简单的介绍了vue插件的安装方法,也就是我们该如何封装; 再者,下载element ui/view ui 这种优秀的开源组件库,参考一下,站在巨人的肩膀上,我的组件库参考了view ui的封装方法

  • 发布:发布就简单了,网上的资料也是一大堆,如何发布第一个属于自己的npm包,这里我再简单说一下流程和注意事项

    1. 修改package.json的几个重要配置项
      // 包的名称
      "name": "ui",
      // 版本号,第一次发布就随便了,后面更新的版本号要递增
      "version": "1.6.8",
      // 发布出去的包默认的访问文件
      "main": "src/index.js",
      // 发布的文件集合,可以发布多个文件夹
      "files": ["src"],
    
    1. 需要自己注册npm账号,执行npm publish 发布,会自动提示输入账号密码的
      npm publish
    

    这样你的包就发布出去了,很简单吧,验证的话,就在你的项目里,npm install ui,然后在主文件导入注册...就不细说了

组件的更新

封装的组件只有有人用了才能发现问题,人无完人,何况可能没有用过的组件呢,也有不同场景可能加入一些新的支持,都是需要我们来更新组件库的。这里主要说一下更新的注意事项

注意事项:

  1. 更新的版本号每次要记得修改,同样的版本号更新会提示你无法更新的,低于版本号也会提示无法更新的

  2. 组件新增功能,新增功能的话要在原有功能不变情况新增,当然着取决于我们实际的使用情况,如果你的组件没有在任何地方用,那就随便更新了

  3. 组件有新增功能记得补充文档哦

  4. 更新记录记得补充

实践,在日常项目中,使用的组件不能支持某功能,因为没有专门的研发组,为加快进度,组件的修改直接在 node_modules 依赖包内进行修改,多的话做好记录,空闲之余再把内容更新至组件库;

结语

以上是工作过程中自身实践的一些总结,其目的就是提高开发效率,减少重复性工作;在平时封装自己的组件时,没有良好的指引,都是自己一路厮杀,尝试出来的,如果你身边有良好的维护环境,珍惜吧,如果没有,希望本文对你有帮助~工作中,能用开源的尽量用开源的,开源的真香!

公众号 前端果果