Hi，我是贝格前端工场，看到上面四个概念，是不是经常混淆，其实他们是完全不同的概念，就是因为有部分厂商啥活都干，让你误以为四个概念差不多，本文给大家讲解下。老规矩、点评论、点赞、分享、转发，有事小窗私信。
一、UI组件库
UI组件库是一套预先设计和实现的用户界面组件，用于构建用户界面。它包含了各种可复用的UI元素，如按钮、表单、导航栏等，开发人员可以直接使用这些组件来快速构建用户界面，提高开发效率和一致性。
UI组件库本质上是UI，比如按钮、弹窗、进度条等等，这些没有开发成代码之前，都已图片或者设计源文件的形式存在，前端无法直接用。
这是UI设计师的输出成果，一般用来快速组合页面，或者说搭建原型，比如咱们熟悉的Element UI，antdesign，墨刀里面的组件库等等，都是UI组件库。
二、前端框架
前端框架是一种基础架构，用于帮助开发人员构建Web应用程序。它提供了一整套的解决方案和工具，包括路由管理、状态管理、数据请求等，以便开发人员可以更高效地开发和管理复杂的前端应用程序。
前端框架本质上是一个工具和方法，可以理解为一套武功心法，你只有学会了这套心法，才能以不变应万变，开发各种组件和页面，开发出来的组件就可以叫前端组件，当然这些组件未必要用框架开发，原生开发亦可。
比如咱们常见的vuejs、React、Angular.js、Electron等都是前端框架，前端框架提供给你的更多是前端架构规则、理念、思维和API接口。
三、UI框架
UI框架是在前端框架的基础上，进一步提供了UI组件库和相关的样式、布局等资源。它将UI组件库与前端框架结合起来，为开发人员提供了一套完整的UI解决方案，可以快速构建美观、可用的用户界面。
用前端框架把UI组件库开发出代码，组合成页面，就成了UI框架，你可以拿着这个框架去搞B端项目。
市面上有很多现成的B端系统框架，其实都是UI框架，比如Admin Plus、X-admin、若依、easyUI、Easyweb、Ele admin pro等等。
前端框架是作用于代码领域，UI组件库是作用于UI领域，UI框架（或者叫UI前端框架）是UI+前端（拿来即用）
四、前端库
前端库是一种轻量级的工具或库，提供了一些特定功能或工具函数，用于解决特定的前端开发问题。它通常不涉及UI组件和整体架构，而是关注于某个特定的功能领域，如日期选择器、图表绘制等。开发人员可以根据需要选择和使用前端库来满足自己的需求。
最常见的就是jquery，swiper、axios、wow这些，解决页面上的某个功能需求。
总结：UI组件库是一套可复用的用户界面组件，前端框架是一种基础架构，UI框架是在前端框架基础上提供UI组件库和相关资源，前端库是解决特定问题的轻量级工具或库。它们在前端开发中各有不同的作用和应用场景。
五、举个栗子，讲明白。
比如antdesign本质上是一套B端设计思路，它为B端设计注入了理论、方式和方法，但是空有理论是苍白的，所以他给出一套UI组件库，贝格前端工场有这套组件库的Axure格式，所以经常用它来画原型。
而又有人将这套组件库结合React的方法开出来代码，就成了前端组件库了，当然也可以用vue或者Angular的框架来开发，只要有需要就行。
还有人更进一步，直接把前端组件（UI+框架）组合成了页面，而且把常见的页面都做好了，比如登录页、控制台、列表页、结果页、个人中心、用户权限等等都做好，让用户直接拿去用吧，这就是UI框架。
只有前端库在那里瑟瑟发抖，UI组件库干不来、前端框架不带玩、UI框架都搞定了，前端库开始发话了，各位前端框架和UI框架老大，有某个功能点实现起来困难，过来找小弟我吧。
明白了吗？老铁们
文章来源
您阅读本篇文章共花了：
发表评论