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

深藏阁楼爱情的钟 2023-06-04 11:50 10阅读 0赞

有没有曾遇过，产品要我们实现一个功能，但是 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 库。

如果以上都懂的高手，请略过。

原文地址：[https://segmentfault.com/a/1190000016896747][https_segmentfault.com_a_1190000016896747]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[https_segmentfault.com_a_1190000016896747]: https://segmentfault.com/a/1190000016896747

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-——UI组件库使用

目录一、常用组件库 1.移动端常用UI组件库 2.PC端常用UI组件库二、以Element UI （饿了么为例）三、Element-UI 按需引入（关心引入组

本是古典何须时尚/ 2024年04月06日 12:04/ 0 赞/ 107 阅读

相关 vue常用的UI组件库

1、移动端常用的UI组件库 1. Vant https://youzan.github.io/vant 2. Cube UI https://didi.github.

蔚落/ 2023年10月02日 22:25/ 0 赞/ 24 阅读

相关 Vue引入Element-ui组件库

> 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、全局引入二、按需引入 -----------------

你的名字/ 2023年09月26日 18:04/ 0 赞/ 92 阅读

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

有没有曾遇过，产品要我们实现一个功能，但是 iview 或者 elementui 不支持，我们然后义正言辞的说，不好意思，组件库不支持，没法做到。有没有曾和设计师争论得面红耳

深藏阁楼爱情的钟/ 2023年06月04日 11:50/ 0 赞/ 11 阅读

相关 vue 常用ui组件库

vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github

- 日理万妓/ 2023年01月10日 10:28/ 0 赞/ 161 阅读

相关 vue 常用ui组件库

vux github ui demo:[https://github.com/airyland/vux][https_github.com_airyland_vux] Mi

Myth丶恋晨/ 2022年06月04日 01:24/ 0 赞/ 277 阅读

相关基于 Vue.js 的 UI 组件库 iView

iView 详细介绍 iView 是一套基于 [Vue.js][] 的 UI 组件库，主要服务于 PC 界面的中后台产品。 ![iView][] 特性高质量

傷城~/ 2022年05月20日 05:19/ 0 赞/ 255 阅读

相关 Vue2.0 的 Material Design UI 组件库 Muse-UI

Muse-UI 基于 Vue2.0 的 Material Design UI 组件库 ![090934_tI8u_1782082.png][] 安装

落日映苍穹つ/ 2022年05月18日 06:52/ 0 赞/ 470 阅读

相关基于 Vue.js 的 UI 组件库 iView

iView 详细介绍 iView 是一套基于 [Vue.js][] 的 UI 组件库，主要服务于 PC 界面的中后台产品。 ![iView][] 特性高质量、功

r囧r小猫/ 2022年05月18日 06:08/ 0 赞/ 321 阅读

相关 NutUI一套京东风格的移动端Vue组件库

推荐一个东风格的移动端Vue组件库 [http://nutui.jd.com/\/intro][http_nutui.jd.com_intro] [http_nutui.

柔情只为你懂/ 2022年04月23日 14:00/ 0 赞/ 165 阅读