为公司架构一套高质量的 Vue UI 组件库

有没有曾遇过，产品要咱们实现一个功能，可是 iview 或者 elementui 不支持，咱们而后义正言辞的说，很差意思，组件库不支持，无法作到。 有没有曾和设计师争论得面红耳赤，其实也是由于组件库暂不支持。因此，我认为每个前端都应该具有能为公司架构一套 UI 组件库的能力。

由于机缘巧合，我在 Github 上发起了一次 Vue UI 组件库开源项目的活动，参与人数达到 40 多人，本觉得一套 UI 库就是一堆组件叠加在而已，40 我的，每人一个组件，应该会很快搞定吧。万万没想到，一套UI库会有那么多内容，咱们几十我的，研究探索好几个月，爬过无数坑，项目才慢慢走上正规，估计下个迭代就能够和你们见面了。

也正由于UI库对公司如此重要，可是开发过程又并不简单，因此我以为个人这个宝贵经验能够帮助到你们。接下来我能够和你们分享一下我作整个开源项目的思路。

咱们这套开源项目主要分为两点，第一是项目彻底以模拟企业流程开发；第二是用一套前端工业化知识来完成项目的。

第一彻底以模拟企业流程开发，内容以下：

一、tapd 敏捷管理工具，咱们会按照真实企业，在 tapd 上建立迭代，写需求，分配任务。

二、代码仓库工具选择 github，操做 git 工具使用企业中最经常使用的 sourceTree

三、我会安排架构师、技术经理、产品、设计师、测试等角色，让参与者彻底体验正规流程

四、我会模拟各类真实会议，需求评审会、每日站会、代码评审会、测试用例评审会、以及各类技术分享会。

五、我会模拟迭代的提测、上线等流程，来保证项目质量。

六、我积极鼓励参与者选择多种角色来进行项目实战，例如参与者除了开发工做，也能够选择尝试技术经理，或者架构师等角色，咱们这边工做人员都会辅助参与者扮演好角色。让参与者能学到更多东西。

七、我但愿用最规范的企业流程来管理开源项目。

第二是用一套前端工业化知识，内容以下：

一、一套好的项目编写思路，让你明白先写什么，后写什么。例如咱们应该先定义 css 架构，若是不先作这步，会有不少坑。

二、分支管理策略。咱们项目多是好几十我的参与，怎么样的分支策略，能让代码冲突最小化，几乎不出现任何问题呢。

三、如何打造一套 css 架构。

四、一套让全员代码风格、规范统一的策略。经过 eslint 配合 git 自动化检测代码，保证全员风格统一。

五、打造一套 scripts 前端工做流，经过命令生成统一组件、 自动更新组件引入、打包发布等。

六、站在设计模式的角度，架构和优化组件库，保证代码质量。

七、对代码进行单元测试。单元测试并非调用几个 api 而已，而是告诉你单测到底测什么，测哪些，怎么测，才能保证代码低 bug。

八、如何在没有设计师支持的状况下，前端如何为 UI 组件库制做一套字体图标。

九、经过项目思路、设计模式、css 架构、scripts 工做流、单元测试、分支策略、eslint 策略等一套标准前端工业化体系知识来构建这套 UI 库。

若是以上都懂的高手，请略过。若是对怎样编写一套 UI 组件库的具体细节感兴趣的朋友，能够加我微信：fcsboy。