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的安装到各个组件的效果，文档都解释的非常清楚，每个步骤是如何执行的，得到什么结果。这是清晰的产品文档。

第2条：产品的功能对于用户来说足够简单。这很容易理解。作为开发人员，我们在使用框架时需要什么？功能应该足够复杂，但界面应该足够简单。这意味着什么？您可以通过手机查看。如今，智能手机的功能已经变得非常复杂。您可以打电话、玩游戏、看电影。然而，一旦你习惯了它，它就非常容易使用。它不关心功能如何实现；重要的是复杂的功能是否可以通过简单的操作完成。这个原则也适用于我们开发者。我不在乎组件封装有多复杂。我所关心的是我公开的接口。

第三条：产品的UI必须足够易用。这是什么意思？事实上，这主要是针对产品经理和设计师的。我们都有开发经验的学生，尤其是在公司工作过的学生。很明显，项目最终的样子并不由您决定。由产品经理和设计师来决定。那么设计一个项目的UI的依据是什么呢？这些都是基于产品特性、产品定位等，但大多数UI都是基于当前用户的共同审美。

您是否注意到当今的应用程序、网页甚至手机的用户界面都非常同质？它们的风格几乎相同。之所以会出现这种千篇一律的问题，是因为大众的审美被放在了同一个谱上，设计根据大众的审美来定位产品的风格。

那么这和我们开发者有什么关系呢？如果你是一名设计师，如果UI库符合大众的共同审美，能够提供良好的交互体验，你会参考UI库提供的样式还是直接使用它们？因为它的风格比大多数此类UI库的设计都要好。

那么对于我们作为开发者来说，如果我们拿到一个设计稿，发现那个设计稿上的样式和Element-UI是一样的，我们是不是可以直接去Element-UI中使用呢？

Element-UI 还提供自定义主题和国际化功能。文档详细解释了如何执行此操作，因此我不再赘述。

现在，我们来总结一下Element-UI。

1.Element-UI是一个非常好用的基于Vue的桌面UI组件库。 2.支持直接添加@vue/cli项目，支持按需导入、国际化、自定义主题。清晰易学。 低成本。 4. 提供的组件足以满足您的使用。 5、UI风格符合当下普遍审美。 6、如果你想打造一个公司级的产品，Element-UI基本可以满足你的需求，但风格和风格难免会同质化。

但是如果你想建立自己的网站或项目，但不喜欢风格的统一怎么办？目前，你可以参考另一个UI库：vuetify。

vuetify

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

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

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

特性：

vuetify 是一个MIT 开源项目，是一个基于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 库。

React 中Ant Design 的状态应该与Vue 中element UI 的状态相同。它是最流行的UI 库之一。

Ant Design 同时支持React、Vue 和Angular。因此，虽然您可以将Ant Design 与这三个主流框架一起使用，但Ant Design 对React 的支持最好，所以当您一般性地谈论Ant Design 时，您可以说：基于React UI的组件库。

Ant Design是阿里巴巴-蚂蚁金服体验技术部设计的UI库。当你看它的主页时，你会发现整体的设计风格非常好。

同样，Ant Design 还支持国际化、主题定制等功能。请参阅有关如何执行此操作的文档。

Ant Design 的文档也非常详细，从如何入门到如何使用各个组件。

另外值得一提的是Ant Design 社区。它的社区提供了高质量的组件和一些开发中常用的推荐工具。这是ElementUI所不具备的。这是非常小心地完成的。

对于Ant Design 来说，在React 项目中用作核心UI 库时，它可以完美运行，没有任何问题。无论是您的开发团队还是社区，您都可以确保库的定期升级和迭代。

Ant的设计可以概括如下：

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 以原生方式呈现整个前端交互。这个时候还没有前端工程师的概念。因为太瘦了，大部分前端工作都是由后端工程师兼职开发的。

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等。

随着这类内容的出现，学习前端的成本越来越高，前端的围墙也越来越坚固。

此外，随着用户体验的要求越来越高，后端工程师不再能够这样做，前端和后端项目变得分离。大家都在做自己的事情，后端工程师主要负责后端内容，前端工程师主要负责前端内容。

这是整个前端的一个粗略的发展史，但是说到bootstrapping，他却是Web 2.0中最有名的名字。使用它开发的项目不计其数。主要原因是它简单、易用，而且其设计风格在当时是非常先进的。

不过现阶段，bootstrap 使用的并不多，即使包含这个阶段的bootstrap vue 这样的库出来了，其性能也只能用平庸来形容。

但对于bootstrao 来说，它一点价值都没有吗？如果你的项目需要兼容IE8，目前还没有办法使用上面提到的UI库。像Bootstrap 这样的纯CSS 库会非常有帮助。 bootstrap相信大家都很熟悉了，我就不多赘述了。

总结一下引导程序，它看起来像这样：

1. Bootstrap是Twitter设计的UI库。它主要使用CSS样式，还提供了一些你需要在js中使用的组件功能。 2. 简单易用，文档清晰，学习成本低。提供的组件相对较少。 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也是一个不错的选择。

Lauiui的主要内容分为两大部分。 1. 页面元素。 2. 内置模块

对于页面元素来说，主要包括一些CSS样式，一些与Bootstrap非常相似的定义的CSS样式类。

内置模块是layui极力推荐的一个概念。例如，按需部署的模块化。当然，这个概念已经成为现代前端开发的一个共同特征点。比如我前面提到的Element-UI、vuetify、Design，都有这个功能。 不过，在Web 2.0阶段，这种模块化功能还是比较先进的。

至于Lauiui中涉及到的风格部分，按照现在的审美来看，它仍然是永恒的，所以就目前来说，如果你对前端技术没有很深入的了解，或者如果你是一个服务器工程师，那么前端如果你想要开发页面，layui还是一个更好的选择。

雷维总结一下：

1.lauiui是一个自由职业者（闲心）开发的前端库，至少兼容IE82。这样设置的最初目的是为了让非前端工程师更容易开发前端页面。使用方便，文档清晰，学习成本低低4. 提供页面元素和模块化概念5. UI 风格不落伍6. 适合非专业前端工程师

现在我们已经了解了许多桌面组件库，接下来让我们看看一些移动UI 组件库。

Vant-UI

开发团队：有赞前端团队

官网：https://youzan.github.io/vant/#/zh-CN/

github（ star：12.9k ）：https://github.com/youzan/vant

特性：

Vant-UI是有赞前端团队开发的基于vue的移动组件库。然而，移动组件库与桌面组件有很大不同。

例如，大多数移动设备的官方文档和组件库文档通过类似手机的UI 表单一次性列出了整个项目的所有组件。

这在PC端的UI库中恐怕是很少见的。我个人比较喜欢这种方法。这样开发者就可以很容易的知道这个UI库中各个组件的样式效果是否能够满足自己的个人需求。

另外在兼容性方面，它是一个移动组件库，所以它可以在手机上运行，并且在手机上，不存在IE与PC浏览器的兼容性问题。这与手机系统版本有关。以Vant-UI为例，在浏览器支持方面，说明支持Android 4.0、IOS 8.0开始的所有现代浏览器和系统。

不会存在兼容性的问题了。
​ 还有就是组件的样式风格上，因为对于移动端设备来说，毕竟大小、尺寸、操作方式都不一样，所以在 UI 的一个整体设计风格上，肯定和 PC 端上有很大的不同。
​ 然后还有最重要的一点，也是考验移动端组件库的一个非常重要的难点。就是流畅性的问题。这个问题在桌面端组件库上一般不会是一个太大的难点。但是在移动端上面就不太一样了。手机使用的流畅度的问题，在咱们现在依然还是一个大家都非常关注的点，并且对于现在的用户来说，对于移动端流畅度的要求，要更加苛刻，这种苛刻的程度远高于 PC 端。所以说如果你开发了一个 web app 或者 web 端网页的话，如果很卡，那么无论你的 UI 样式做的再好，估计也会大大减分的。
​ 所以说对于一个移动端的 UI 库来说，它如果要做好其实要比 PC 端的组件库难度更大上一些。而 Vant-UI 在基于 Vue 的移动端组件库中，各方面都是非常不错的。无论是文档、组件的丰富性、易用性上，我个人都比较喜欢。
​ 另外对于 Vant-UI 来说他还提供了几个非常有意思的组件，我们来看一下。

​ 大家打开 Vant-UI的官网，在业务组件部分，它提供了一些目前商城类系统所常用到的业务模块。比如商品规格，像这种拥有相对固式样式的业务，它提供了成套的业务组件，并且这些业务组件，我们也可以使用 Vue 中的 插槽 功能去进行一些定制这个我觉得是非常非常好的一个功能。
​ 总结一下 Vant-UI：
1. Vant-UI 是有赞前端团队所设计的一个 UI 库，一般用于基于 Vue 的移动端项目2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、提供了定制功能（样式、颜色、主题等等）3. 文档清晰，学习成本低4. 提供的组件足够使用，性能不错，并且提供了基于商城业务的成套组件5. UI 的风格以及交互操作可以达到现在的主流标准6. 适用于 web app 或者 基于移动端的网页开发
然后我们来看另外一个移动端组件库

Framework7

开发团队：独立开发者（github名：Vladimir Kharlampidi）

官网：http://www.framework7.cn/

github（ star：15.3k ）：https://github.com/framework7io/framework7/

特性：

​ Framework7 是独立开发者开源的一个全功能框架。可以用来构建 IOS、Android和桌面应用程序。注意我们这里说的是框架，不再是一个简单的 UI 组件库了。
​ 由组件库变成了框架，那么显然带来的问题就是复杂度直线上升了。但是复杂度上升的同时，它能够给我们带来的东西也完全不一样了。打开官网，我们一起来看一下。
​ 打开官网，首先我们能看到它的一个功能演示。我们主要看 IOS 和 android 这两个部分。

​ Framework7 针对 IOS 和 Android 的不同风格提供了不同的展示样式。对于 IOS 是标准的苹果风。对于 Android 则提供了基于 Material Design 的一种设计风格。并且 Framework7 提供了一种很牛的功能，这个功能是其他的 UI 组件库所没有的，那就是基于移动端不同页面的一个过场动画。
​ 对于 Framework7 因为它是一个框架，所以说它不需要再依赖于向 vue、react 这种其他的框架，它本身就可以完整的去开发一个项目。同时如果你想要基于 vue 或者 react 来配合 Fragment7 使用的话，那么也是可以的。Fragment7 同时也提供了 Framework7 Vue 和 Framework7 React 这两个框架。
​ 另外对于 Framework7 提供了很多新的概念，比如 Framework7 CLI 、DOM 7 等等，咱们再这里就不在详细说了。
​ 总结一下 Framework7 ：
1. Framework7 是独立开发者所设计的一个全功能框架。可以用来构建 IOS、Android和桌面应用程序。2. 本身是一个独立的框架，同时也可以配合 vue 和 react 来使用。整体比较重3. 文档汉化不是很好，具有一定的学习成本。4. 提供的功能组件、交互视图足够强大，并且也有很多新的概念，性能优秀。5. UI 的风格以及交互操作可以达到原生 APP 95%的体验6. 适用于没有资深前端开发工程师的公司使用。
最后我们来看一个由 微信团队开发的 weui

WEUI

开发团队：微信官方团队

官网：https://weui.io/

github（ star：24.2k ）：https://github.com/Tencent/weui

特性：

​ weui 是微信官方团队开发的一套同微信原生视觉体验一致的基础样式库。提供了一些组件和样式的简单使用。主要应用于微信内部网页和微信小程序。
​ 对于 weui 的文档没有放到官网上，而是在 guthub 中。这个大家注意下，别找不到文档就可以。不过微信的文档是相对比较乱的，并且有一些示例代码的地址已经打不开了（2020-03 时测试）。这就导致大家如果想要学习 weui 的使用，那么只能从 github 上下载一下实例代码来学习了。
​ weui 的话我们不做过多介绍，简单总结下：
1. weui 是微信官方团队开发的一套同微信原生视觉体验一致的基础样式库。2. 因为只应对微信内部网页和微信小程序，所以所提供的功能相对简单。3. 文档稍微乱一些。4. 提供的功能组件有限，主要还是应对场景的问题。5. UI 的风格同微信原生视觉体验一致6. 适用微信内部网页和微信小程序。
合理的运用 UI库 ， 可以大大的提升我们的开发效率，并且保证我们的项目设计维持在一个平均水平之上。
但是合理的使用，并不代表着完全依赖，UI 库 可以帮助我们解决设计上 80% 的问题，但是 UI 库也会给我们带来一些限制，比如风格上和设计上。
所以我们大家需要合理的看待 UI 库的存在。
作者：LGD_Sunday