从0到1实现VueUI库思路

组队

UI 库是很庞大的一个项目，如果个人开发，会很占用我的业余时间，所以我想到了组队，便在掘金发布一个这样的事情，很快便召集了20多个前端加入进来。

scrum 敏捷模式

这么多人加入，怎么样的流程管理能保证项目有效进行，让他们按时按量完成任务，最后保证进度，此时我采取了现在很流行的 scrum 敏捷模式来做流程管理。

选用 tapd 管理工具

国内有很多工具来做 scrum 敏捷模式管理，经投票决议而定，最终选用 tapd。

分出角色

既然打算做一个大型项目，那么就应该有项目经理、架构师、前端工程师、设计师、产品、测试等角色。

建立迭代 1

我自己担任了产品和项目经理的角色。作为产品，迭代 1 我提出的需求很简单，实现 16 个基础组件，大概是每个参与开源小伙伴，一人一个组件的量，很轻松。

迭代 1 的开发

做一个 UI 库项目，迭代 1 的开发任务至关重要，它是一个项目的源头，如果源头没有思考清楚，后面迭代将会是灾难性的。进过我们爬过的坑，我认为迭代 1 的开发应该做好如下几件事情：

eslint 策略
制定代码规范，例如 css 只能采取 BEM 命名规范
单元测试
css 架构
分支管理策略，如何让多人开发，发生代码冲突概率最小
搭建 UI 库官网，可以写组件 API
做好 pr ，这是保证代码质量最后一关

如果其中一个没有提前做好，我们可以想想后果，例如 css 架构在迭代 1 没有搭好，后面迭代 x 才去搭建的话，那么所有 css 都得按照新架构重新写，这是个巨大的坑。

迭代 2

迭代 2 需求依然是做一些基础组件。我着重说下迭代 2 的开发任务，除了实现需求，架构师将重点放在了项目架构上，主要做了如下事情：

引入新的 eslint 策略，让 eslint 仅检测自己 commit 的代码，不管其他人代码，避免代码冲突。
router 全由命令行控制一次性导入，这样不需要每个人手动将写好的组件添入 router 中
用命令行生成一个组件模版，无需每次开发组件都去新建文件

迭代 2 其实就是将很多开发上无意义的活，让命令行自动执行了，让我们将注意力放在正确的事情上。

迭代 3

有了前面两个迭代的基础，迭代 3 仅需按照已有规范继续开发新的组件即可。

迭代 x

此后迭代不断新增，不断优化组件，直到库中组件已实现足够多，也可以用此库写一个完整项目了，便可以发布第一个版本 npm 包了。

开源项目地址

地址

想参加开源？

现在项目还处于迭代 3 ，初步阶段。如果想参加开源，加我个人微信即可：fcsboy （非诚勿加）

或者扫码：