适合后端开发的UI库(前端开发UI)

Element UI开发团队：饿了么？前端官网：https://element.eleme.cn/#/zh-CNgithub(Star:44.1k):https://github.com/ElemeFE/element特点：Element-UI是目前为Vue开发PC端项目时使用的主流UI库。在座所有学习Vue开发的同学，应该或多或少都知道Element-UI。那我们就从它开始说吧。你有没有想过一个UI库是如何被开发者接受的？或者说是如何被用户接受的？在我看来，一个产品，目前就是库元素——UI，是给我们开发者的产品，我们开发者就是它的用户。一个产品之所以能被用户接受，取决于三点：1。产品文档对用户来说足够清晰；2.产品的功能对用户来说足够简单；3.产品的UI对用户来说足够友好。什么意思？下面就来一一解释一下。我们先来看第一条：产品文档对用户来说足够清晰。这是什么意思？想想吧。我们买了东西，一开始不知道是怎么用的。然后，我们一般会看看它的说明书，或者去网上搜索一些关于这个产品的信息，对吧？那么这个时候如果它的说明字迹潦草，甚至有些地方根本就不对。那么想要熟练的使用这个东西，是不是要花费很大的精力呢？也就是我们开发者常说的，这个框架的学习成本太高，或者这个框架的学习曲线太陡，不够平滑。那么这无疑会劝阻一部分用户。正确所以一个框架要想被开发者广泛接受，清晰的文档一定是首要条件。那么对于Element-UI来说，它的一个文档是比较清晰的。在组件部分，从Element-UI的安装到各个组件的效果描述的非常清楚。文件中清楚地描述了如何做每一步以及这样做会产生什么样的结果。这是一份清晰的产品文档。第二条：产品的功能对用户来说足够简单。这个很好理解。对于我们开发人员来说，当我们使用一个框架时，我们想要什么？我们想要一个框架：你的功能应该足够复杂，但是你的界面应该足够简单。什么意思？可以参考一下你们的手机。现在智能手机的功能非常复杂。你可以打电话，玩游戏，看电影。但是一旦熟悉了，用起来真的很简单。你不关心它的功能是如何实现的，你只关心复杂的功能能否通过简单的操作完成。事实就是如此。对于我们这些开发者来说也是一样的。我不在乎你的组件包有多复杂，我只在乎你暴露的接口。第3条：产品的UI是用户友好的。这是什么意思？其实这个主要是针对产品经理和设计师的。每个有开发经验的人，尤其是在公司工作过的人。应该清楚的是，你的项目最终会是什么样子并不是你的决定。由产品经理和设计师决定。他们设计项目UI的依据是什么？它们将基于产品特性、产品定位等。但大部分UI基础是当前用户的普遍审美。有没有发现对于现在的app、网页甚至手机来说，他们的UI同质化非常严重？风格差不多吧？之所以会出现这个问题，是因为大众的一种审美会定位在同一个区域，设计会根据大众的审美来定位产品风格，所以会出现这种同质化的问题。
那么这和我们开发者有什么关系呢？想想看，如果一个UI库能够满足大众的普遍审美，提供良好的交互体验，那么如果你是设计师，你会参考或者直接使用UI库提供的样式吗？因为对于这种UI库来说，它的风格会比大多数设计做出来的要好。所以对于我们开发者来说，当你拿到设计稿的时候，你发现设计稿上的风格和元素是一样的——UI。你能从Element-UI中取出它并使用它吗？并且对于Element-UI，还额外提供了自定义主题和国际化的功能。具体怎么做呢？文件很详细，就不展开了。然后总结元素——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材质设计风格的vue前端组件库。它还支持直接添加@vue/cli项目。不过vuetify的材质设计风格在国内并不是很受欢迎。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.在UI风格中使用vuetify会带来一些额外的风险，但是可以避免同质化的问题。比较适合一些需要彰显个性的个人或者项目。介绍了两个基于vue的UI库。所以我们来看看基于(常用于)React的UI库。
蚂蚁设计开发团队：蚂蚁金融服务体验技术部官网：https://ant.design/index-cngithub(Star:57.6k):https://github.com/ant-design/ant-design/特色：蚂蚁设计官方定义为设计系统，但设计系统这种高雅的东西应该不为我们这些外行人所知。我们最清楚的是这个东西如何帮助我们的发展。所以让我们把它看作一个UI库。Ant Design在react中的地位应该和element UI在vue中的地位一样，可以说是最受欢迎的UI库之一。Ant设计同时支持React、Vue和Angular，这意味着我们可以在所有三个主流框架中使用它们。但是Ant Design对React的支持是最好的，所以一般我们说到Ant Design，都会说是基于React UI的组件库。蚂蚁设计是阿里巴巴-蚂蚁金服体验技术部设计的UI库。目前最新的版本是4.x版本，我们看它的主页就能感觉到整体的设计风格很不错。同样，蚂蚁设计也支持国际化、主题定制等功能。这个没必要说。有关详细信息，请参考文档。Ant Design的文档也很详细，从快速入门到各种组件的使用。更值得一提的是蚂蚁设计的社区。它的社区提供了很多优秀的组件和一些开发中常用的工具推荐，这些都是ElementUI上没有的。可以说它的社区真的是非常用心的在做。就Ant Design而言，如果作为React项目的核心UI库，那么完全可以胜任，没有任何问题。而且无论是它的开发团队还是一个社区，都能保证一个库的正常升级迭代。总结一下，蚂蚁设计：1。蚂蚁设计是阿里巴巴-蚂蚁金服体验技术部设计的UI库，一般用于基于React的项目。2.它支持在create-React-App(React-App(React的官方脚手架)项目中直接添加，支持按需导入、国际化，并提供定制主题。3.文档清晰，学习成本低。4.提供的组件足够用，提供优秀的社区服务。5.UI的风格符合目前大众的普遍审美。6.如果想做一个公司级的产品，蚂蚁设计基本可以满足需求，但是风格和样式同质化严重是必然的。以上提到的都是针对现阶段，也就是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的出现。起初，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比较熟悉，就不赘述了。总结自举：1。Bootstrap是Twitter设计的UI库，主要基于css样式，同时也提供了一些需要和js一起使用的组件的功能。2.简单易用，文档清晰，学习成本低。3.提供的组件相对较少。4.只能在框架中使用css样式。嵌入性高。5.UI的风格符合目前大众的普遍审美。6.它适用于对浏览器兼容性有要求的项目。除了bootstrap，web 2.0阶段的另一个UI库是layui。
Layui开发团队：freelancer (Xianxin)官网：https://www.layui.com/github(Star:21.1k):https://github.com/sentsin/layui/特色：layui是freelancer (Xianxin)开发的前端库，至少可以兼容IE8。官网是一个比较适合服务工程师开发前端页面的库，但是对于前端工程师来说，如果你的项目兼容IE8，那么使用layui也是一个不错的选择。拉仪的主要内容分为两部分：1。页面元素。2.对于页面元素，内置的模块主要是一些css样式，也就是一些定义好的css样式类，和bootstrap很像。对于内置模块来说，是拉ui比较喜欢的一个概念。例如按需引入的模块化。当然，这个概念已经成为当前前端开发的通用功能点。比如前面提到的Element-UI、vuetify、Design都有这个功能。但在web 2.0阶段，这种模块化功能还是比较先进的。至于la ui中涉及到的样式部分，按照现在的审美还是有些过时，所以就目前而言，如果你对前端技术了解不深，或者你是服务器端工程师，如果你想开发一个前端页面，la ui还是比较好的选择。综上所述，拉伊：1。layui是自由职业者(sages)开发的前端库，至少可以兼容IE82。设置的初衷是方便非前端工程师开发前端页面。3.简单易用，文档清晰，学习成本低。4.它提供了页面元素和模块化的概念。5.UI的风格并没有过时。6.在它适合非专业前端工程师之前，我已经看了很多桌面组件库，所以在这里。
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库的各个组件的风格和效果是否能满足他们的个性化需求。至于兼容性，因为是移动端的组件库，所以都会在手机上运行，但是对于手机来说，不会有PC浏览器的IE兼容性问题。更多的是手机系统版本的问题。我们以Vant-UI为例。方便他介绍，现代浏览器和Android 4.0、IOS 8.0系统都支持。所以在这个时间点上，基本上不会出现兼容性问题。还有就是组件的风格，因为对于移动设备来说，毕竟大小、尺寸、操作方式都不一样，所以UI的整体设计风格肯定和PC有很大的不同。然后就是最重要的一点，这也是测试移动组件库非常重要的一个难点。就是流畅度的问题。这个问题一般不是桌面组件库中的大难点。但是在移动端就不一样了。手机使用的流畅度仍然是现在大家非常关注的一个点，而且对于现在的用户来说，对移动端流畅度的要求更加苛刻，远高于PC端。所以如果你开发一个web app或者网页，如果卡住了，那么你的UI风格再好，估计分数也会大打折扣。所以，对于一个移动UI库来说，要想做好，其实比PC组件库更难。在基于Vue的移动组件库中，Vant-UI各方面都很不错。我个人喜欢文档和组件的丰富性和易用性。
此外，Vant-UI还提供了几个非常有趣的组件。让我们看一看。
打开Vant-UI的官网，在业务组件部分，提供了目前商城系统常用的一些业务模块。比如商品规格，比如这种风格比较扎实的业务，提供了一套完整的业务组件，这些业务组件也可以利用Vue中的slot功能进行定制，我认为这是一个非常非常好的功能。综上，Vant-UI: 1。Vant-UI是由有赞前端团队设计的UI库，一般用于基于Vue的移动项目。2.支持直接添加@vue/cli项目，支持按需导入和国际化，提供定制功能(风格、颜色、主题等。).3.文档清晰，学习成本低。4.提供的组件足够使用，性能良好。并提供了一整套基于商城业务的组件。5.UI的风格和交互可以达到目前的主流标准。6.适用于web app或基于移动端的web开发。然后我们来看另一个移动组件库。
7框架开发团队：独立开发者(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来说，它提供了一种基于材质设计的设计风格。而Framework7提供了一个其他UI组件库没有的优秀功能，那就是基于移动端不同页面的过场动画。对于Framework7来说，因为是框架，所以不需要依赖vue、react等其他框架，完全可以开发一个项目。同时，如果你想和基于vue或者react的Fragment7配合使用，那么也是可以的。Fragment7还提供了两个框架，Framework7 Vue和Framework7 React。另外，Framework7提供了很多新概念，比如Framework7 CLI，DOM 7等等，这里就不赘述了。总而言之，框架7 :1。Framework7是由独立开发者设计的全功能框架。可用于构建IOS、Android和桌面应用程序。2.它是一个独立的框架，也可以配合vue和react使用。总重量3。中文的文档本地化不是很好，有一定的学习成本。4.提供的功能组件和交互视图足够强大，有很多性能优秀的新概念。5.UI和交互操作的风格可以达到native app 95%的体验。6.适合没有高级前端开发工程师的公司。最后我们来看一个微信团队开发的weui。
Weui开发团队：微信官方团队官网：https://weui.io/github(Star:24.2k):https://github.com/Tencent/weui特点：WEUI是微信官方团队开发的基础样式库，与微信原有的视觉体验一致。提供了一些组件和样式的简单使用。主要用在微信内部网页和微信小程序中。weui的文档不在官网，在guthub。请注意这一点，只是不要丢失文件。但是微信的文档比较乱，有些样本代码的地址打不开(2020年3月测试)。因此，如果你想学习weui的使用，你只能从github下载示例代码来学习。对于weui我们就不做过多介绍了，简单总结如下：1。weui是微信官方团队开发的一套基础样式库，与微信原有的视觉体验一致。2.因为只处理微信内部网页和微信小程序，所以提供的功能比较简单。3.文件有点乱。4.提供的功能组件有限，主要是处理场景的问题。5.UI的风格与微信原有的视觉体验一致。6.适用于微信内部网页和微信小程序。合理使用UI库可以大大提高我们的开发效率，保证我们的项目设计维持在平均水平。但是，合理使用不等于完全依赖。UI库可以帮助我们解决80%的设计问题，但是UI库也会给我们带来一些限制，比如风格和设计。所以我们都需要理性的看待UI库的存在。
作者：LGD _星期日