众所周知,对于一个完整web项目,前端的代码量应该是比较巨大的,因为需要写大量的html,css,以及一些常用的功能组件。对于一个不太需要自成样式的项目来说,很多代码量其实是可以大大减少的,除了Bootstrp等框架,还有一类UI框架,里面很多的样式和组件都是成套出现的,这可以大大缩减前端的实际代码量。
UI框架,简而言之,就是成套的css,js代码,在书写组件,样式时,只需要遵循该UI框架的命名规范,就可以直接使用成套的样式,交互组件。
UI框架对以后端为主的全栈开发人员来说,简直是必备呀!
前端UI框架选择的参考点:
- 框架本身是否符合自己项目开发的特征,比如技术栈,各种配置。
- 风格是否符合项目的定位,不同的目标客户所欣赏的风格不同。
- 原团队是否仍在维护,以前也有一些比较强大的ui框架,像支付宝,网易都有,后来陆续的暂停维护了,一般暂停维护的UI框架比较适合学习,而不适合实际的开发。
由于小型团队开发需要,整理了一些使用过的或者热度比较高的六个前端框架,希望能对前端的开发起到一定的帮助。
0x01.Semantic UI
- 特点:有成套的配色,小图标,导航栏,弹窗。响应式局部。性能高。
- 风格:小巧清新。
- 官网:https://semantic-ui.com/
- 开发样例:
0x02.Lay ui
- 特点:配置简单,上手即用。遵循自身模块规范。原生编写,性能极高。
- 风格:极简,细节魔鬼。
- 官网:https://www.layui.com
- 开发样例:
0x03.Element UI
- 特点:基于vue,流程,逻辑处理非常完美,细节处理到位。
- 风格:朴素的简约美。
- 官网:https://element.eleme.cn/
- 开发样例:
0x04.Muse-UI
- 特点:基于vue,支持自定义主题风格。
- 风格:较传统的web风格,不是很有新意。
- 官网:https://muse-ui.org/#/zh-CN
0x05.iView UI
- 特点:基于vue,支持国际化,定制主题,数据处理组件完善。
- 风格:经典的后台管理系统风格,也有新颖的味道。
- 官网:http://v1.iviewui.com/
0x06.NoahV
-
特点:有API数据模拟和API数据代理的功能,更利于前后端完全分离。数据分析的组件非常强大!
-
风格:大型网站风格,正式,养眼。