后端程序员转行前端，强烈推荐这6个前端UI框架，第二款小程序UI框架颜值最高！-武穆逸仙 In November 2024

昨天有个同事问我有没有可以直接上手的前端 UI 框架。

后端程序员转行前端，强烈推荐这 6 个前端 UI 框架，第二款小程序 UI 框架颜值最高！那今天就给大家推荐 6 个简单、视觉体验好的前端框架

没吃过猪肉，肯定见过猪跑！

Jquery Mobile

demo 地址：
https://demos.jquerymobile.com/1.1.0/

教程地址:
https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html

这个应该是最简单的，能够快速上手了！

jQuery Mobile 还发布一个完整统一的 jQuery 移动 UI 组件。支持全球主流的移动平台。

部件是功能丰富，有状态的插件。随着方法和事件，有一个完整的生命周期。

后端程序员转行前端，强烈推荐这 6 个前端 UI 框架，第二款小程序 UI 框架颜值最高！如果想 5 分钟就能直接上手的，Jquery Mobile 首当其冲！

ColorUI

github 地址：
https://github.com/weilanwl/ColorUI

官网地址：
https://www.color-ui.com/

鲜亮的高饱和色彩，专注视觉的小程序组件库

ColorUI 是小程序组件库，但不是纯样式库。由于 WeUI 有些淡雅，可能不合某些时尚公司的风格，因此 ColorUI 也有庞大的追捧者。

github 上标星高达 8.8k

后端程序员转行前端，强烈推荐这 6 个前端 UI 框架，第二款小程序 UI 框架颜值最高！

相信你肯定有用过使用 ColorUI 的小程序

如果要开发小程序，这款开源框架是一个不错的选择。

Material

material design 风格的前端 css 框架

官方网站：
http://materializecss.com/

中文学习站：
http://www.materializecss.cn/

使用非常简单，只需要引入 css 和 js 就行

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!– Compiled and minified JavaScript –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>

可以使我们的页面颜色更鲜艳，动画效果更突出（符合 Material Design 的设计风格）

究竟什么是 Material Design?

设计是创造的艺术，我们的目标就是要满足不同的人类需要。人们的需要会随着时间发展，我们的设计，实践，以及理念也要随之提升。我们在自我挑战，为用户创造了一个可视化语言，它整合了优秀设计的经典原则和科学与技术的创新。这就是 Material Design。

关于 Material Design，其亲爹谷歌是这么介绍的。

其核心思想就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

Layui

官网地址：
https://www.layui.com/

github 地址：
https://github.com/sentsin/layui/

layui（谐音：类 UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。

准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。