素材巴巴 > 程序开发 >

前端分享UI

程序开发 2023-09-18 09:00:34

泛前端

“前端开发”的发展历史像是一直在找寻自己的定位;

从切图仔、写 HTML 模板的“石器时代”,到前后端分离、大前端的“工业时代”,再到现在跨端技术、低代码的“电气时代”。

前端研发的职责一直在改变,同时前端研发需要掌握的技术也在迭代更新。

前端新标准

2014 年 10 月 28 日,W3C 正式发布 HTML5.0 推荐标准让前端技术蓬勃发展。虽然 HTML6.0 目前处于提案阶段,但是社区已经开始有了一些零星的讨论,所以可能它离我们并不太远。2022 年,可能 HTML6 并不会推出,但是可能会有更多利于用户体验的提案出现。 

框架

前端框架 在 StackOverflow 的“最受欢迎的 Web 框架”调查中,除去 SSR 渲染框架和 jQuery,上榜的前端框架共有 5 个:

可以看到,React,Vue,Angular 依然是强势铁三角向前发展。在 2022 年 Vue3 会成为 Vue 的默认版本,React 18 也会发布正式版本,从目前社区关注度来看, Vue3 源码 Github star 27k+, React 18 WG Github star 3.9k+,且在 npm 的下载量上,新版本下载数目都比较可观,所以很有可能今年尝试和使用的人会变得更多。

UI 框架

由于模块化CSS、摇树、MVVM 的流行,UI 框架的选择越来越多,针对选用的框架选择一个符合项目风格的 UI 即可。 

现在前端Vue、React、Angular这三个框架似乎都很好,反而不知道选择什么了, 

选择UI框架的原则

推荐UI框架

UI框架 Github Star 环境 团队

  1. 文档清晰,每个组件的每个点都有详细的实例。
  2. 组件异常完善,只有你想不到,没有人家做不到的。
  3. 组件设计简洁易用,很快上手。

Elementhttps://element.eleme.cn/#/zh-CN  vue 国内 

ruoyihttps://ruoyi.vip/

vue 国内

iViewhttps://www.iviewui.com/view-ui-plus/guide/introduce  vue 国内 

Ant Designhttps://ant.design/components/overview-cn react 国内 

NG-ZORROhttps://link.zhihu.com/?target=https%3A//ng.ant.design/%23/docs/angular/introduce  angular 国内 

 其他框架

Vant

Vant 是一个轻量、可靠的移动端组件库,提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。相比于AUI/weUI,Vant组件更多,基本覆盖移动端网页所有功能需求。Vant相对于weui使用起来更加方便,从html到js动态效果已经封装完毕,直接调用组件、配置即可。功能异常强大,是我们工作学习中的好帮手。

WeUI 

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。

WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含 buttoncelldialogtoastarticleicon 等各式元素。

AUI

aui 是一套基于原生javascript开发的移动端UI组件库,包含常用js方法、字符校验、dialog提示弹窗、数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板。特点是:

标准化,产品化 
 更多复用,更快效率 
 多人协作,更加统一 
 维护方便 
 易于使用 
 减少UI设计时间

AUI相对于weui来说更进一步,不光提供样式,使用它的方法可以直接渲染出组件了。开发移动端应用是可以参考使用,常用组件也都基本覆盖到位了。

LayUI   

Layui是一套开源免费的的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,他们无需涉足各类构建工具,只需面向浏览器本身,即可轻松掌握页面所需的元素与交互,进而信手拈来。

有趣的数据


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。