这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战
动手搭建一个不论属于公司还是个人的组件库,都是一件很有意义的事情。对于公司而言,搭建一套符合公司业务的组件库,可以提升开发的效率,节省后续的研发和项目迭代成本。对于个人而言,可以在组件库搭建的过程中收获很多知识点,也可以发现很多有意思的事情,对于个人的技术成长是很有益的。
搭建一个组件库并不是一件容易的事情,需要整体思考组件库的架构,对于没有这方面经验且没有大牛带领指导的情况下,只能通过参考社区的组件库来学习和模拟搭建。
组件分类
搭建组件库,需要对组件的进行简单的分类,在Vue开发中,一般会将组件分为一下几类
路由组件
路由组件即是在业务开发中和vue-router一一对应的.vue文件,主要是每个路由页面的内容载体,也是业务开发中必不可少的组件类型,其主要是包含当前页面的数据,状态,主要的参数主要来源于vuex,router query,router params。
路由组件基本不会有太多复用场景,基本都是作为一个独立组件存在,内容会机遇一些组件进行填充,仅仅是作为一个路由容器入口存在。
业务组件
业务组件中大致分为两类,可复用和不可复用
不可复用组件:
此类组件是依赖于路由组件存在,因为其是和业务强耦合且具有一定的独特性,不会在多个路由组件中存在。
比如在一个业务逻辑比较多的路由组件中,由于其内容很多,全部编写在一个.vue文件中,会导致代码的可维护性、阅读性、扩展性降低,因此会将内容进行组件化抽离,并根据组件化的内容决定其可复用性,若是不具备可复用性,便将其作为不可复用组件抽离,一般此类组件,会保持和路由组件在同一文件夹中
- views
- index
- index.vue 路由组件
- components
- nav 不可复用组件
可复用业务组件:
主要是一个业务逻辑会存在于多个路由组件中或者具备可复用性,此类组件可以根据其使用频率决定是将其放到全局组件中,还是在使用的时候再将其引入,此类组件初步具备了真正的组件化编写的一些思想,因为其已经需要具备提供给团队其他小伙伴使用的业务场景。
比如后管项目中,table作为一个使用频率很高的组件(指的是基础组件),其主要是基于数据驱动视图的展示,例如element-ui提供的table基础组件,因为其需要应对很多的使用场景,每次使用的使用需要传递columns和rows数据,常常还需要配合分页器的使用,若是不将其进行组合封装,使用时便会CV大量的重复代码,此时便需要将其结合基础组件和业务场景进行封装,可以更加便捷的使用。
基础组件
基础组件是与业务完全解藕的,具有组件自身独特的功能,例如组件库提供的常用的table、form,button等组件,这类组件就是组件库的重要组成部分,也是搭建组件库的核心所在。
基础组件的开发难度是高于以上的路由组件和业务组件,当一个组件提供业务端使用之后,便决定其暴露的API、使用方法等不能改动,没人希望在基础组件使用过程中去改变这些,而一个好的基础组件是向前兼容的,且具备很好的稳定性和性能,友善的API使用和扩展性等。