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

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

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

也正因为UI库对公司如此重要，但是开发过程又并不简单，所以我觉得我的这个宝贵经验可以帮助到大家。接下来我可以和大家分享一下我做整个开源项目的思路。

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

第一完全以模拟企业流程开发，内容如下：

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

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

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

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

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

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

7、我希望用最规范的企业流程来管理开源项目。

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

1、一套好的项目编写思路，让你明白先写什么，后写什么。例如我们应该先定义 css 架构，如果不先做这步，会有很多坑。

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

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

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

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

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

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

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

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

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