下面是本博客所涉及到的八个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 同质化非常严重吗？差不多都是一个风格的，对吧。出现这个问题的原因就是因为大众的一个审美会定位到同一块区间，而设计根据