搭建前端UI组件库（一）—

本文讲述了搭建组件库前期的准备工作。主要是为了更了解UI组件库相关的知识。

这是自己边看边想边构思写的文档（俗话说知己知彼才能百战百胜嘛）所以先了解一下组件库的相关知识。开发的干货在第二章（还没放上来，写好了会第一时间放上来哒嘻嘻）里噢！

先讲讲自己的心路历程吧（其实就是找个地方诉说一下，啊哈哈哈~），有点儿啰嗦。大家可以直接忽略进入正题。

从大四一直开始工作的公司是做教育的（下文中用B代替），和我以前实习的公司（下文中用A代替）完全不同。怎么说呢，A做安全相关的，一个组可能连续几个月就做一个产品，迭代就更慢了，就比如我刚进去的时候就正好在做半年前的产品的迭代，也主要做一些用户体验的优化，功能的升级。B是做教育的，产品需求变化快，一周一次迭代，一周一次发版，也就意味着可能上周做好的一个产品功能下周就要迭代，在疯狂的迭代中对于开发来说会出现一些重复性的迭代工作，虽然我们也使用了Antd的组件库，但随着公司的发展，Antd基本能满足于后台平台的使用，但是对于面向用户的前端页面，要更体现出公司的文化，满足公司将来业务的发展方向，光是Antd已经不够了。这个时候组件库的想法就来了。我比较幸运的是能加入到这个队列中，跟着大佬一起学习从0开始，让我这个小白学到了很多。从那时起我就想着自己也要搞一套组件库，作为一名前端工作者，这是一件多么有意义的事情呀。我一直对自己工作的这两家公司心怀感激，A公司的同事都很好相处，每个人都当我是小妹妹一样帮助我。B公司让我真正意义上的体验到了作为一家互联网公司高速的工作状态，虽然刚刚开始的时候我及其不适应常常感觉压力太大跟不上大佬的节奏而感到焦虑，但是公司的大佬人都超级nice啊，从带着我做项目，慢慢的开始让我独立做一些项目，在这个过程中自己学习到了很多也成长很多嘿嘿~

今年疫情的原因，年后的很多规划也停滞了，天天宅在家里不能出门（就开始恍恍惚惚哈哈哈哈~），刚刚开始的那段时间我这个平日里的乐天派也是深受精神上的折磨恍如世界末日一般整日惶恐不安难以入睡，好在自己和家人一起慢慢调整好了自己的心态（相信一定会等到春暖花开的日子，那个时候定要摘掉口罩在大马路上狂奔撒欢！！！）。想着趁着这个时间段自己找些事情来做，好好规划接下来的日子，正好也可以适当的转移一下自己的注意力。所以搭建组件库的这件事情被提上日程了。花了一天的时间在网上看了一些资料，写了一篇前期的规划文档，大致明确了自己的想法，定好了里程碑。也给自己留了锻炼休息的时间，劳逸结合呀，现在特殊时期也是要注意多锻炼啊（其实就是怕啦怕啦）。总之，这件事情就安排上了，并且随着这篇文章的产生已经开始进入正轨了~加油吧小同志！

对了，在准备搭建组件库的时候首先要明确自己的目标（可衡量的技术目标），制定里程碑（最好是以能看到效果为一个节点）督促自己按时完成（实习的时候养成了做里程碑的习惯啦，不过真是好可以约束自己的玩儿心，自己定的目标哭着也要走完呀）

现在进入正题————————————————————————————————————————————————

先了解以下几个问题......

为什么需要组件库？
什么是组件库？
组件和插件的区别？
业务型组件和基础组件？
组件库的设计思路？
确定技术方案？

为什么需要组件库？

想这个问题的时候脑子里想起就是：那还不是因为产品天天变，奇葩需求改不完。一般随着公司的发展，产品在面向用户的时候需要更体现出公司的特色由此产生的基于公司文化的组件库产生了。再加上公司大了，需要更多的工具才能满足需求了，后台系统变多，功能也增多了，很多的基础模块也能复用了，当Antd这种组件库已经满足不了产品的奇葩需求后，我们就需要搞一点儿事情了。这个事情就是搞组件库啊，其实说白了就是降低代码的冗余，规范代码使后期维护迭代也更方便了。好管理，好维护，好迭代，这么多好处何乐而不为呢，最重要的是我们不用搬一些重复的砖头了嘛，减少了一些工作量了嘿！（咱搬砖也要搬的有志气啊！！！）

什么是组件库？

说起组件库我脑子里就浮出了Antd，element ui，iview，这三大组件库是我目前接触到的，不得不承认是真的很强大啊，基本上能满足大多的业务场景了（奈何产品千千万，需求只有你想不到不准你做不到！！！）有些时候我想，把Antd，element ui，iview这类组件库看成最小单元，那么可以认为通过这些小单元来拼凑成一些逻辑小版块，而这些小版块能更好的满足公司的业务场景。

但是，到底什么是组件库呢，网上解释的实在太多了，我在一篇文章上看到了这样的说法

组件

它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖

组件库

组件的集合

我觉得说的很nice啊，通俗易懂（我咋就说不出来这样的话呢？），我常常这样想我们前端的工作就像是搭积木，我们需要各种各样的小单元最后完成这个积木的搭建。这些小单元我们可以认为他是基础组件，我们用这些基础组件又拼成了一些模块，最后这些模块完成了积木的搭建。我觉得也可以认为他是插件，这样一来问题又来了，那组件和插件有什么区别呢？嘿嘿，莫慌，继续往下看~

组件和插件的区别？

组件：我理解为，组件就是模块。我们将一个网页拆分成多个模块（组件）。组件之间是独立的，组件可依赖于宿主。

插件：就是独立的一个apk。我认为它的重心更偏向于实现某个独立的功能。(比如游戏里的某个皮肤)

这里引入学习的一篇文章，我觉得讲的很清楚，点击 -> 关于组件和插件的区别

业务型组件和基础组件？

记得在公司的时候，mentor问了我一句话，你是想做业务型组件还是基础组件？当时我就是黑人问号脸啊，这有啥区别吗？不都是组件吗？当时模模糊糊的阐述了一下自己对这两个概念的理解，然后让我自己下来再多学习了解一下然后组织一个会议和大家讨论。于是乎又开始热火朝天的翻资料写app......

先上一张图来说说它们之间的关系：

再来说说，业务型组件其实是和公司的业务高度相关的，可以说业务型组件是体现公司的文化，更加符合公司产品的用户体验，也是根据产品经理对于产品未来的规划所产生的通用的部分。可能某些模块的存在，对于公司多个项目来说都会用到，可能它不如类似Form表单这种基础表单的普遍性高，但是它确实有抽离成组件的意义。

组件库的设计思路？

开发组件库目的在于实现降低代码冗余，抽离出复用性更高的模块。所以本着更容易维护和扩展的原则：

统一的代码风格和规范
具备可扩展性
按需引入
覆盖测试用例
完整的开发文档

确定技术方案

因为是想在Antd的基础上做二次扩展，本着第一次尝试不增加太大难度，然后发布到npm上即可。重于学习组件库的细节，原理以及框架的类比，所以这次开发是直接把Antd的源码拉下来，然后在沿着Antd做二次扩展。希望在这个过程中能够摸清Antd的原理哒。

前期主要就是做了这些准备，明确自己的目标，了解相关理论知识，才能更好的进入开发阶段啊。冲冲冲！

如有什么不当的地方，欢迎各位大佬指正，小女子虚心接受，在此谢过啦~

搭建前端UI组件库（一）—— 构思相关推荐

PrimeVue - 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库
来自国外的一个优秀的前端 UI 组件库,基于 Vue 3 很有特色,值得研究学习和上手使用. PrimeVue 介绍 PrimeVue 是一套非常优秀的 Vue UI 组件库,支持 Vue 3 的 w ...
Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
非大厂 KPI 项目!开源三天就收获 800 Star,还获得 Vue 作者尤雨溪的官方推荐. 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript ...
推荐 8 个支持 Vue3 的前端 UI 组件库，免费开源、漂亮美观，涵盖常用的业务组件
Vue3 正式发布已经快2年了,今年2月也正式变成 Vue 项目的默认版本,今天分享8个优秀的 Vue3 UI 组件库. Element Plus 相关网址:https://www.thosefree ...
Element-UI 前端UI 组件库
目录 Element-UI 前端UI 组件库配置Element-UI 组件库通过 UI 界面方式实现配置插件遇到的问题 Element-UI 前端UI 组件库个人博客地址: Element- ...
与element-UI相媲美的前端UI组件库ArcoDesign 开源啦
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统.在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,我们开源了 ArcoDesign 设计系统.旨在 ...
十大常用web前端UI组件库，赶紧收藏
今天主要介绍web前端常用的UI库,这些网站基本都是背靠互联网大厂,值得web前端开发者收藏,当然还是要多多学习使用. Vant 一款有赞出品轻量.可靠的的移动UI组件库,目前支持 Vue2.Vue3 ...
一些热门的前端UI组件库(附用例)
1.Vuetify(Vue) Vuetify 官网是一个纯手工精心打造的 Material 样式的 Vue UI 组件库. 不需要任何设计技能 - 创建叹为观止的应用程序所需的一切都触手可及. 这是 ...
热门的前端UI组件库
移动端移动端组件库名称及简述官网链接 Vant,轻量.可靠的移动端 Vue 组件库 Vant 移动端组件库 Mint UI,基于 Vue.js 的移动端组件库 MintUI 移动端组件库 Vant ...
十大常用前端UI组件库
Vant 一款有赞出品轻量.可靠的的移动UI组件库,目前支持 Vue2.Vue3.React,微信和支付宝小程序,并由社区团队维护 React 版本和支付宝小程序版本. 官网的文档清晰易懂,如果你熟悉 ...

搭建前端UI组件库（一）—— 构思

搭建前端UI组件库（一）—— 构思相关推荐

最新文章

热门文章