浅谈前端八大UI库，web开发基础

2301_76232361 2024-07-17 13:33:02 阅读 56

下面是本博客所涉及到的八个UI库

Element UI

vuetify

Ant Design

Bottstrap

layui

Vant UI

Framework7

WEUI

这是我从前端的众多 ui 库中选出来了八个，但是并不是说没有被列出来的 UI 库都不好，没有这个意思，不要把我置身于水深火热之中哈。这里之所以选出这个八个，是因为咱们的一个篇幅关系，不可能把所有的好的前端UI库都拿出来说一遍，所以我就挑出来了我个人感觉八个比较有代表性的 UI 库。那么下面我们一个一个来看。

在这里插入图片描述

Element UI

开发团队：饿了么前端

官网：https://element.eleme.cn/#/zh-CN

github（ star：44.1k ）：https://github.com/ElemeFE/element

特性：

Element-UI 是目前针对于 Vue 开发 PC 端项目的时候所使用到的一个主流 UI 库。在座的有学习 Vue 开发的同学或多或少应该都知道 Element-UI 。那我们就从它开始聊。

大家有没有想过，对于一个 UI 库来说，它是如何被广大的开发者所接受的？或者说它是如何被用户所接受的？

我认为，一个产品，具体到当前就是 Element-UI 这个库，这个库对于我们开发者来说就是产品，我们开发者就是它的用户。而一个产品之所以可以被用户所接受，所依赖的无非是三点：

**1. 产品的文档对于用户来说足够清晰

2. 产品的功能对于用户来说足够简单

3. 产品的 UI 对于用户来说足够友好**

什么意思呢？我们一个一个来解释。

首先我们来看第一个：产品的文档对于用户来说足够清晰。这是什么意思呢？大家想一下当我们买了一个东西的时候，最初我们不知道这个东西是怎么用的？那么我们一般都会去看一下它的说明书，或者直接去网上搜索一些这个产品的资料，对吧。那么这个时候如果它的说明书写的不清不楚，甚至有些地方写的根本就不对。那么你如果想要把这个东西使用熟练，是不是要花费特别大的精力。也就是我们开发者常说的，这个框架拥有了过高的学习成本，或者说这个框架学习曲线过于陡峭，不够平滑。那么这样的话无疑会劝退一部分用户。对吧。

所以说如果一个框架如果想要被开发者广为接受，那么一个清晰的文档肯定是首要的条件。那么对于 Element-UI 来说，它的一个文档就比较清晰。在组件部分，从安装 Element-UI 到各个组件的效果描述的都是非常清楚的，每一步应该如何做，这样做会产生什么样的结果都在文档上描述的很清楚。这个就是一个清晰的产品文档。

第二条：产品的功能对于用户来说足够简单。这一条也好理解。对于我们开发者来说，当我们使用一个框架的时候，我们想要的是什么？我们想要一个框架：你的功能要足够的复杂，但是你的接口要足够的简单。什么意思呢？大家可以参照一下自己的手机。现在智能手机的功能已经非常复杂了。可以打电话，可以玩游戏，可以看电影。但是一旦你熟悉了它之后，它使用起来确实非常简单的。你不会去关心它的功能是如何实现的，你关心的只是是否可以通过简单的操作来完成复杂的功能。就是这个道理放到我们开发者身上也一样。我不关心你组件封装的如何复杂，我所关心的只是你暴露出来的接口。

第三条：产品的 UI 对于用户来说足够友好。这一点是什么意思呢？其实这一点主要是对于产品经理和设计师来说的。大家有过开发经验的同学，特别是有过在公司工作过的同学。应该很清楚，你的项目最终开发出来帐什么样子，不是你决定的。是产品经理和设计师来决定的。那设计项目的 UI 他们的依据是什么呢？他们会依据产品的特性、产品的定位等等，但是绝大部分的 UI 依据都是目前用户的一个普遍审美。

大家有没有发现对于现在的 APP 、网页甚至手机来说，他们的 UI 同质化非常严重吗？差不多都是一个风格的，对吧。出现这个问题的原因就是因为大众的一个审美会定位到同一块区间，而设计根据大众的审美来定位产品的样式，所以才会出现这种同质化的问题。

那么这个和我们开发者有什么关系呢？大家想一下，如果一个 UI 库它能够符合大众的普遍审美，并且提供了一种良好的交互体验，那么如果你是设计师的话，你会不会参照或者直接使用 UI 库所提供的样式。因为对于这种 UI 库来说，它的样式会比大部分的设计做出来的样式还要好。

那么对于我们开发者来说，当你拿到设计稿的时候，你发现设计稿上的样式和 Element-UI 一样，你是不是到 Element-UI 上直接拿过来用就可以了呀。

并且对于 Element-UI 它额外还提供了自定义主题和国际化的功能。这些具体怎么做，文档说的很详细，我们就不展开说了。

那么总结一下 Element-UI 。

**1. Element-UI 是现在基于 Vue 的一个非常好用的桌面端 UI 组件库

2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、支持自定义主题

3. 文档清晰，学习成本低

4. 提供的组件足够使用

5. UI 的风格符合目前大众的普遍审美

6. 如果你想要做一个公司级别的产品，那么 Element-UI 基本可以满足需求，但是难免样式、风格上会同质化严重**

但是如果你想要弄一个自己的网站、自己的项目，并且希望在样式上，不喜欢那么同质化，应该怎么呢？这个时候，你可以参考下，另外一个 UI 库，就是 vuetify。

在这里插入图片描述

vuetify

开发团队：麻省理工学院开源项目

官网：https://vuetifyjs.com/zh-Hans/

github（ star：24.1k ）：https://github.com/vuetifyjs/vuetify

特性：

vuetify 是麻省理工学院的开源项目，文档同样支持全球化，它是基于 Android Material Design 风格的一个 vue 前端组件库。同样支持 @vue/cli 项目的直接添加。

不过 vuetify 的 Material Design 风格在国内并不是很大众， Material Design 是由Google开发的设计语言，第一次公开使用应该是在 Android 5.0 上面，但是在国内这种样式风格一直推行的效果不好。在国外这种风格被接受的程度还可以，但是国内你会发现很少见。

这样就导致这种设计风格不会存在大量同质化的问题。同样的如果你使用了这种风格的话，也必须要承担一定的风险。所以对于公司级项目来说，如果使用了 vuefity 的话，那么无形中就会为产品增加一些风险。不过如果你是要做一个自己的项目，并且希望你的项目拥有一些自己的个性，那么 vuetify 无疑是一个很好的选择。

对于 vuetify 本身的一个功能层面上，它的文档、它的组件都可以完全满足我们的一个日常使用，比如，在它的 UI 组件里面，我们常用到的这些组件都是比较全的。

另外它还提供了一些扩展的指令，这些指令是在 vue 的基础上做的一些扩展，可以满足一些特定的需求。

总的来说，vuetify 上手的难度会比 elementUI 要高一些，主要是因为国外的人的思维和国内的人还是有一些不同，所以这就导致了 vuetify 对于国内来说会难免有一些水土不服，而产生两个极端，也就是所谓的：喜欢他它的人很喜欢，讨厌它的人很讨厌。

总结一下 vuetify：

**1. vuetify 是国外团队进行开发的一个基于 vue 的组件库

2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、提供了定制功能（样式、颜色、主题等等）

3. 文档相对清晰，但是和国人的思维不太一样，导致学习成本相对高一些

4. 提供的组件足够使用，并且提供了 v- 开头的扩展指令，还有付费专题模块

5. UI 的风格使用的是 Google 推出的 Material Design 的设计风格，在国内推广度相对低一些

6. 使用 vuetify 在 UI 样式上，会有一些额外的风险，但是可以避免同质化的问题，比较适合一些个人或者需要彰显个性的项目**

介绍了两个都是基于 vue 的 UI 库。那么下面我们来看一下基于(常用于) React 的 UI 库。

在这里插入图片描述

Ant Design

开发团队：蚂蚁金服体验技术部

官网：https://ant.design/index-cn

github（ star：57.6k ）：https://github.com/ant-design/ant-design/

特性：

Ant Design 被官方定义为一种设计体系，不过设计体系这种高雅的东西，对咱们这些俗人应该认知不大，我们所认知最明确的，就是这个东西能为我们的开发带来什么帮助。所以我们下面就把它当作一个 UI 库来看。

Ant Design 在 react 中的地位，应该和 element UI 在 vue 中的地位是一样的，都可以说是最火爆的 UI 库之一。

Ant Design 同时支持 React、Vue、Angular，也就是说我们在这三个主流框架中都可以使用，但是 Ant Design 对于React 的支持是最好的，所以一般我们说到 Ant Design ，都会说他是一个基于 React UI 的一个组件库。

Ant Design 是阿里巴巴-蚂蚁金服体验技术部所设计的一个 UI 库，目前最新的是 4.x 的版本，我们看它的主页，就能够感觉出来，一个整体的设计风格是非常赞的。

同样，像国际化、定制主题的这些功能，Ant Design 也同样是支持的，这个没得说，具体怎么做，大家看文档。

Ant Design 的文档也非常的详细，无论到快速上手，到各个组件的使用，都有非常详细的文档。

另外非常值得一提的就是关于 Ant Design 的社区，它的社区中提供了非常多的精品组件和一些开发中常用的一些工具推荐，这一点是 ElementUI 上所没有的，可以说它的社区是真的很用心的在做的。

对于 Ant Design 来说，如果把它作为 React 项目的一个核心 UI 库的话，那么它是完全可以胜任的，没有一点问题。并且无论是它的开发团队也好，它的一个社区也好，都可以很好的保证该库的一个正常的升级和迭代。

总结一下 Ant Design：

**1. Ant Design 是阿里巴巴-蚂蚁金服体验技术部所设计的一个 UI 库，一般用于基于 React 的项目

2. 支持在 create-react-app（React 官方脚手架）项目的直接添加，支持按需导入、国际化、提供了定制主题

3. 文档清晰，学习成本低

4. 提供的组件足够使用，并且提供了精品社区服务

5. UI 的风格符合目前大众的普遍审美

6. 如果你想要做一个公司级别的产品，那么 Ant Design 基本可以满足需求，但是难免样式、风格上会同质化严重**

上面说的都是一些对于现阶段，也就是 web 3.0 阶段的 UI 库，然后我们来看两个适用于 web 2.0 阶段的 UI 库。

在这里插入图片描述

Bootstrap

开发团队：Twitter

官网：https://www.bootcss.com/

github（ star：139k ）：https://getbootstrap.com/

特性：

Bootstrap 前端的同学应该没有不知道。在之前的 web 2.0 阶段，可以说是大名鼎鼎了。我们这里提到了 web 3.0 和 web 2.0 ，那么给大家解释一下。

整个前端开发的历史，我把它分成了三个阶段，web 1.0 、web 2.0 和 web 3.0。

对于 web 1.0 来说， 指的就是 html、css、js的那个阶段，整个前端的交互还都是以一种原生的方式进行展示，这个时候还没有前端工程师的概念，或者说这个概念很稀薄，大部分的前端工作都是由后端的工程师来兼职进行开发的。

而 web 2.0 阶段，最大的标志就是 jQuery、bootstrap、还有各种模板引擎的库开始出现，这个时候开始逐渐有了前端开发工程师的岗位，但是前端依然不够兴盛，因为虽然这些新出现的东西使前端的开发有了一些壁垒，但是这种壁垒明显不够坚固，并且这些库并没有带来太大的本质上的变化，更多的是一种增强。

而 web 3.0 阶段，最大的标志就是 angular、react、vue 的出现。从最初 google 推出了 angular 1， angular 1 一出现，确实可以说是惊艳。他把之前零零碎碎的内容，比如数据驱动，比如模板语法，比如模块化的东西进行了整合，变成了一个大一统的框架。但是因为 angular 1 属于一个最初的尝试，所以在设计上还有很多不完善的地方，这就导致了 angular 2的变化过大，成了一个断层，就引起了很多人的不满。

而这个时候 react、vue 也开始逐渐崛起，从 angular 手中抢走了大量的开发者。而 react、vue 所推崇的这种渐进式框架的方案，明显更被开发者所接受，所以就导致现在 react 和 vue 的开发者基数要远远的大于 angular了。不过就算是这样，没有人可以否认 angular 所带来的贡献。

angular、react、vue 完全提高了前端的壁垒，随之也逐渐出现了很多的周边库，比如前端路由库、全局状态管理工具、webpack 这种大一统的前端打包工具。

这些内容的出现，就导致了前端的学习成本变得越来越高，也就使得前端的壁垒变得越来越坚固。

再加上用户对于体验的要求越来越高，后端工程师对此逐渐开始无力，这就导致前端工程师开始出现，前后端的项目分离变成了现在的正统，大家各司其事，后端的工程师主要做后端的内容，前端工程师主要做前端的内容。

这就是整个前端的一个大概的发展历史，而对于 bootstrap 来说，他在 web 2.0 的时候，是顶顶大名的。使用它来开发的项目不计其数啊，主要原因就是因为它足够简单、易用，并且它的一个设计风格在当时相当超前的。

不过在现在的阶段，bootstrap 已经开始被使用的越来越少了，哪怕是推出了 bootstrap vue 这种拥抱现阶段的库，也只能说是表现平平。

但是对于 bootstrao 来说，它就完全没有价值了吗？不是的。如果你的项目需要兼容到 IE8，那么你就没有办法使用之前咱们提到的那些 UI 库，这个时候， bootstrap 这种纯 css 的库，会给你带来很大的帮助。关于 bootstrap，大家应该都会比较熟悉了，我们就不详细说了。

总结一下 bootstrap：

**1. Bootstrap 是 Twitter 所设计的一个 UI 库，以 css 样式为主，也提供了一些组件的功能需要配合 js 来进行使用

2. 使用简单，文档清晰，学习成本低

3. 提供的组件相对较少

4. 可以只使用框架中的 css 样式，可嵌入性较高

5. UI 的风格符合目前大众的普遍审美

6. 适合使用在对游览器兼容性有要求的项目中**

除了 bootstrap 之外，另外一个 web 2.0 阶段的 UI 库就是 layui 。

在这里插入图片描述

layui

开发团队：自由职业者（贤心）

官网：https://www.layui.com/

github（ star：21.1k ）：https://github.com/sentsin/layui/

特性：

layui 是自由职业者（贤心）进行开发的一个前端库，最低可以兼容到 IE8 ，官网介绍它是一个更加适合服务端工程师来开发前端页面的库，但是对于前端工程师来说，如果你的项目要兼容到 IE8 的话，那么使用 layui 也是一个很好的选择。

layui 的主要内容被分成了两个大的部分，1.页面元素。 2.内置模块

对于页面元素来说，主要就是一些 css 的样式，也就是一些定义好的 css 样式类，这一点和 bootstrap 很像。

对于内置模块来说，是 layui 比较推崇的一个概念。比如按需引入的模块化。当然这个概念对于现在的前端开发来说，已经变成了一个普遍的功能点了。比如我们前面说到的 Element-UI、vuetify、And Design 都拥有这个功能。但是在 web 2.0 阶段的时候，这个模块化的功能还是比较先进的。

至于 layui 中所涉及到的样式部分，按照现在的一个审美来说依然是不过时的，所以说对于现在来说，如果你对前端的技术了解的并不深，或者说你是一个服务端工程师，那么想要开发一个前端页面的话，layui 依然是一个比较好的选择。

总结下 layui：

**1. layui 是自由职业者（贤心）进行开发的一个前端库，最低可以兼容到 IE8

2. 设置的初衷是让非前端的工程师可以很方便的开发前端页面

3. 使用简单，文档清晰，学习成本低

4. 提供页面元素和模块化的概念

5. UI 的风格并不过时

6. 适合非专业前端工程师使用**

之前看了很多桌面端的组件库了，那么下面我们来看几个移动端的 UI 组件库。

在这里插入图片描述