从0到1实现VueUI库思路

3,919 阅读3分钟

组队

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 (非诚勿加)

或者扫码: