UI库建立的原因
入司半年多时间,和另外3个小伙伴组成的前端小组,做了大大小小七八个项目上线使用。
从每人一套项目架构统一成一套项目架构,从单页面应用改成多页面应用,从项目ui风格差异明显到统一所有的ui风格,踩过很多坑,遇到了很多问题,有质疑,有鼓励,幸而,结果是好的。
项目架构和ui风格都统一后,后续项目开发沿用就行,是不需要做UI库的,然而事情有时候就出乎意料。
某天老大找我说:xx小组xx系统项目上线,领导很不满意,说为什么做的这么丑,怎么和我们开发的系统差距这么大。
我说:然后哩?
老大说:有啥办法统一这种差异化?
我说:UI组件风格统一就可以了。
老大:怎么做?
我说:建个公司的UI组件库吧。
就这样,立项了公司UI组件库的建设,服务于四个前端小组,保持公司所有项目UI风格的统一。
UI库的定位
每个前端小组开发的系统业务指向性大相径庭,这就对业务组件的封装有很大影响。可能A小组所做的一些系统,有一些业务功能重复的可以封装成组件,但是其他前端小组都不会用到,那这个业务组件需不需要进入UI库呢?
每个小组都有自己的业务组件是其他小组不会用到的,如果进入组件库,只服务于一个小组,那这个组件就没有成为公司UI组件库一份子的必要。
经过和组内小伙伴的讨论,慎重考虑后决定,我们只做UI,不做业务。
二次封装还是原生开发?
公司统一使用vue + element-ui库,作为公司自己的UI库来说,原生开发一套肯定更好,但是衡量之后,还是决定基于element-ui做二次开发,因为element-ui的组件和功能已经满足正常的业务开发了。而且原生开发一套,成本太高,也没有那么多精力和时间。
起步
首先,需要一个UI库使用和组件示例的文档,这个用vuepress搭建好了。
其次,需要搭建私有npm库,公司要求,不能放外网,这个用verdaccio也搭建成功。
最后,就是搭项目框架,封组件,测试,发布到私有npm库,这一步,采坑填坑的,也完成了。
展望发展
UI库的一套东西都已经准备完成,后面就一点点的向里面填充组件就行。希望在推广使用的时候,不会被其他小组的同学们吐槽的太厉害。