在百度搜索UI框架,可以搜索到很多前端框架,以及其他工具资料。整理一下:
1. 传统前端框架
传统前端框架只用html、css、javaScript编写组件。
传统前端框架 | 类别 | 描述 |
---|---|---|
Bootstrap5 | html | 经典前端框架 |
jQuery UI | html | 基于Jquery的开源网页用户界面代码库 |
H-ui | html | 和bootstrap类似,css采用scss编写,js依赖jQuery框架 |
layui | html | 极简模块化 Web UI 组件库 |
axui | html | 能用css实现的不用js,需要使用js则尽量少用,需要大量使用js则尽量可复用 |
2. Web端UI库和移动端UI库
2.1 Web端UI库
使用打包工具构建,用Vue、React、Angular 等流行火热的框架来编写组件。
Web端UI库 | 描述 |
---|---|
BootstrapVue | 使用的是Bootstrap v4组件 |
Layui-vue | layui - vue(是 一 套 Vue 3.0 的 桌 面 端 组 件 库. |
element-ui | |
element-plus | 推荐 |
Naive UI | 尤雨奚推荐 |
Ant Design vue | 是 Ant Design 的 Vue.js 实现,开发和服务于企业级后台产品 |
Arco Design Vue | 字节跳动基于 Arco Design 开源的 Vue UI 组件库 |
Quasar | 构建高性能的 VueJS 用户界面,开箱即用,支持桌面和移动浏览器(包括 iOS Safari!) |
Viewer Design | 是一款基于 Vue3.0 + typescript 开发的中后台 UI 组件库 |
Heyui | 是一套基于 Vue3.0 的开源 UI 组件库,主要服务于一些中后台产品 |
BalmUI | 是为 Vue.js 3.0 量身订制的模块化且高可定制化的 Material Design UI 库 |
CoreUI Vue | |
Vue Material | |
Vue Material Kit | |
PrimeVue | |
View Design | 基于 Vue.js 3 的企业级 UI 组件库和中后台系统解决方案 |
amis | amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率 |
2.2 移动端UI库
ui名称 | 描述 |
---|---|
Vant | 有赞前端团队开源的移动端组件 |
NutUI | 京东风格的轻量级移动端组件库 |
MorJS | 是饿了么开发的一款基于小程序 DSL 的,可扩展的多端研发框架 |
Lin UI | 微信小程序 |
Vuetify | 是一个纯手工精心打造的 Material 样式的 Vue UI 组件库 |
mpvue | 是一个使用 Vue.js 开发小程序的前端框架 |
Varlet | 是一个基于 Vue3 开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区的小伙伴开发和维护 |
WaveUI | 企业级响应式 Vue3 应用程序不错的选择 |
Cube UI | 是一个基于Vue.js的移动端 UI 框架 |
Taro UI | 是一个基于Taro框架的多端 UI 组件库 |
Ionic Vue | 基于 Vue.js 的移动应用程序开发框架 |
mui | 地表最强ui,小程序、app |
3. css预处理器和框架
CSS 预处理器和框架 | 网址 | 类型 | 描述 |
---|---|---|---|
stylus | CSS预编译器 | https://www.bootcdn.cn/stylus/ | Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 |
less | CSS预编译器 | https://less.bootcss.com/ | Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言 |
sass | CSS预编译器 | https://www.sass.hk/ | 世界上最成熟、最稳定、最强大的专业级CSS扩展语言! |
PostCSS | css转换工具 | https://postcss.org/ | 是一个用 JavaScript 工具和插件转换 CSS 代码的工具 |
tailwind css | css框架 | https://www.bootcdn.cn/tailwindcss/ | |
Stylelint | css工具 | https://www.stylelint.com.cn/ | Stylelint 是一个强大、先进的 CSS 代码检查器(linter),可以帮助你规避 CSS 代码中的错误并保持一致的编码风格 |
4. NodeJs ui 框架
NodeJs ui 框架 | 类型 | 网址 | 描述 |
---|---|---|---|
Node | NodeJs | https://nodejs.org/ | Node.js 是一个开源的跨平台 JavaScript 运行时环境 |
Fastify | NodeJs | https://www.fastify.cn | Fastify - 快速并且低开销的 web 框架,专为 Node.js 平台量身打造 |
Express | NodeJs | https://expressjs.com/ | Fast, unopinionated, minimalist web framework for Node.js |
NestJs | NodeJs | https://nestjs.com/ | 用于构建高效且可伸缩的服务端应用程序的渐进式 Node.js 框架 |
Egg | NodeJs | https://www.eggjs.org/zh-CN/intro/quickstart | Egg.js 为企业级框架和应用而生 |
Koa | NodeJs | https://www.koajs.com.cn/ | koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架 |
Strapi | NodeJs | 开源的 node.js CMS ,快速构建 API | |
Meteor | NodeJs | 构建现代 Web 应用程序的超简单框架 | |
hapi | NodeJs | 构建现代 Web 应用程序的超简单框架 |
5. web 构建工具
web 构建工具 | 类型 | 网址 | 描述 |
---|---|---|---|
npm | 包管理工具 | ||
Yarn | 包管理工具 | ||
pnpm | 包管理工具 | ||
esbuild | 打包工具 | https://esbuild.github.io | 一个极快的网络打包器 |
webpack | Javascript打包器 | https://www.webpackjs.com/ | 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 |
rollup | 打包工具 | https://cn.rollupjs.org/ | Rollup 是一个用于 JavaScript 的模块打包工具,它将小的代码片段编译成更大、更复杂的代码,例如库或应用程序 |
gulp | 打包工具 | https://gulpjs.com | gulp.js 是一个用 JavaScript 或 CoffeeScript 定义任务的自动化构建工具 |
vite | 打包工具 | https://cn.vitejs.dev/ | 下一代的前端工具链 |
parcel | Web应用打包工具 | https://www.parceljs.cn/ | 极速零配置Web应用打包工具 |
snowpack | Javascript打包器 | https://parcel.nodejs.cn/ | nowpack 是一个用在现代Web应用上的,快如闪电的前端构建工具 |
grunt | 打包工具 | https://www.gruntjs.net/ | JavaScript 世界的构建工具 |
6. 图标库
图标库 | 官网 | 描述 |
---|---|---|
Bootstrap icons | https://icons.bootcss.com | 包含 1800 多个图标的免费、高质量的开源图标库。你可以以任何方式使用它们,例如 SVG 矢量图、SVG sprite 或 web 字体形式。不管你是否使用 Bootstrap ,都可以使用本图标库 |
iconfont | https://www.iconfont.cn | 阿里巴巴矢量图标库 |
fontawesome | https://fontawesome.com.cn | 很多图标 |
unDraw | https://undraw.co/illustrations | 喜欢这里面的插图 |
7. javascript http库
js http库 | 支持类型 | 描述 |
---|---|---|
XMLHttpRequest | 浏览器 | XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用 |
Fetch | Fetch 是浏览器自带的用于发送请求的 API,旨在替代 XMLHttpRequest | |
axios | 支持 React Native,Node,浏览器 | Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 Node.js 中 |
Ajax | 浏览器 | $.ajax 为 jQuery 对 XMLHttpRequest 对象进行兼容封装 |
$.ajax | 浏览器 | $.ajax 为 jQuery 对 XMLHttpRequest 对象进行兼容封装 |
Superagent | 支持 Node.js | Superagent 是一个基于 Promise 的轻量级渐进式 AJAX API,非常适合发送 HTTP 请求以及接收服务器响应。 与 Axios 相同,它既适用于 Node,也适用于所有现代浏览器 |
Fly.js | 支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器 | Fly.js 是一个基于 promise 的 HTTP 请求库,可以用在Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器中,对上述平台都做了兼容 |
Request | 支持 Node.js | Request 是对 Node.js 的 http/https 模块封装的 http 库 |
8. javascript 工具库
js工具库名称 | 描述 | |
---|---|---|
lodash | https://www.lodashjs.com/ | Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库 |
prettier | https://prettier.io | 代码格式化工具 |
zepto.js | https://zeptojs.com/ | Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库, 它与 jQuery 有着类似的 API。 如果你会用 jQuery,那么你也会用 Zepto |
Moment.js | https://momentjs.bootcss.com/ | 解析、校验、操作、显示日期和时间的 JavaScript 工具库 |
Chart.js | https://www.chartjs.org/ | Chart.js 是一个基于 HTML5 canvas 技术的开源图表绘制工具库 |
underscore.js | http://underscorejs.org | Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象 |
9. 模板引擎
模板引擎 | 描述 |
---|---|
EJS | 高效的嵌入式 JavaScript 模板引擎,它支持基本的条件语句和循环 |
nunjucks | 高效的嵌入式 JavaScript 模板引擎 |
Jade | 高效的嵌入式 JavaScript 模板引擎,Jade是Pug之前的名称 |
Handlebars | 使用{{}}标记来标识变量和表达式。它支持条件语句和循环,并且有丰富的插件生态系统可以扩展其功能 |
Mustache | Mustache没有条件语句和循环,它更注重数据的渲染和展示 |
Twig | Twig是一个现代化的模板引擎,它基于PHP编写。Twig的语法清晰、易于理解,支持条件语句、循环和过滤器,同时具备强大的安全机制 |
10. 状态管理
状态 | 描述 |
---|---|
Pinia | Vue.js 状态管理库 |
Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库 |
Redux | Redux 是 JavaScript 状态容器,提供可预测化的状态管理 |
Mobx | 主要用来管理状态之间的依赖关系 |
Flux | 前端状态管理的鼻祖 |
11. 路由管理
路由 | 描述 |
---|---|
Vue Router | Vue.js 状态管理库 |
12. 学习网址收藏
网址名称 | 网址 | 描述 |
---|---|---|
慕课网 | https://www.imooc.com | |
MDN Web Docs | https://developer.mozilla.org/zh-CN/ | |
菜鸟教程 | https://www.runoob.com | |
w3school | https://www.w3school.com.cn/ | |
ECMAScript 6 | https://es6.ruanyifeng.com/ | 阮一峰博客 |
微信开放文档 | https://developers.weixin.qq.com/miniprogram/dev/framework | 小程序、公众号、视频号、微信支付、小游戏等文档 |
thinkphp | https://www.thinkphp.cn | php框架 |
laravel | https://laravel.com/ | php框架 |
codeigniter | https://codeigniter.org.cn | php框架 |
flutter | https://flutter.cn | Flutter 是 Google 开源的应用开发框架,仅通过一套代码库,就能构建精美的、原生平台编译的多平台应用 |
Electron | https://www.electronjs.org/zh/docs/latest/ | Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架 |
php中文网 | https://www.php.cn/ |
13. 编辑器
编辑器 | 描述 |
---|---|
Vscode | 推荐 |
Sublime text | |
HBuilderX | |
Notepad++ | |
Android Studio | |
Adobe Photoshop | |
WebStorm |
1、Amaze UI
Amaze UI v2.5.0 , 2015-11-30 发布,类似于Bootstrap
gitee下载地址
2、Bootstrap框架
Bootstrap3
Bootstrap5
推荐使用Bootstrap5,相比Bootstrap3,Bootstrap5重构核心已经放弃Jquery了
大名鼎鼎的框架,学习前端必须学习的UI框架。
3、H-UI框架
不想重新写繁琐的页面,少写前端页面代码的,推荐使用这个框架
4、Layui框架
经典模块化前端框架,layer弹窗必用。
5、Vant有赞前端框架,分两个版本
6、iView UI框架
一套基于 Vue.js 的高质量UI 组件库,主要服务于 PC 界面的中后台产品
从 2019 年 10 月起正式更名为 View UI
7、ElementUI框架
由饿了么前端开源的UI框架,vue和react开发者最热门的首选,主要服务于 PC 界面的中后台产品
8、WeUI框架
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一
9、Arco Design框架、Semi Design框架
Arco Design字节跳动旗下UI 组件库,主要服务于 PC 界面的中后台产品;和ant类似
Semi Design是由抖音前端团队开发设计
10、Ant Design框架,分三个版本(React、Angular、Vue)
- Ant Design of React(官方)
- Ant Design of Angular(社区实现)
- Ant Design of Vue(社区实现)
蚂蚁金服旗下开源的UI组件库,,主要服务于 PC 界面的中后台产品
11、LinUI框架
Lin UI 是基于 微信小程序原生语法 实现的组件库。遵循简洁,易用的设计规范。
开发小程序推荐这个框架,开发速度快、UI漂亮
12、NaiveUI框架
一个 Vue 3 组件库,Vue作者推荐的UI组件库,不能使用Vue2
全量使用 TypeScript 编写
官方文档提示:注意,naive-ui 仅支持 Vue3。如果你在使用 Vue2,可以去看看别的库。
13、MUI框架
一个地表最强的移动端UI框架,官方文档说是最接近原生App体验的高性能框架。
MUI不依赖任何第三方JS库
MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件
14、 JEUI框架
JEUI 是基于 jQuery 的 UI 一款国产前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,国内很多程序员 javascript 不熟, 大大影响了开发速度. 因此JEUI不需要开发人员去关心 javascript 怎么写, 只要写标准 html 就可以了,门槛极低,拿来即用。
15、 B-JUI框架
B-JUI 前端管理框架适用于快速开发各类 WEB 管理系统,可与任意后端程序(java、php、.net…)配合使用。B-JUI 基于 Bootstrap 样式及 jQuery 库开发,目前有各类常用组件,已集成部分常用插件,可以很的方便引入第三方 jQuery 插件
16、 QUICK UI框架
QUICK UI是基于jquery1.9开发
QUICK UI有皮肤包的概念,每一套皮肤包都有独立的主页文件、导航处理和CSS样式等,所有的皮肤包共用组件库资源,来实现QUICK UI风格样式的千变万化
皮肤包使用方式:将皮肤包文件夹放到quickui/system目录下,像访问示例工程主页文件一样访问皮肤包里面的main.html
17、 Mint UI
Mint UI是 饿了么团队开发基于vue .js的移动端UI框架
包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率
依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip
18、 Flutter
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的
Flutter拥有丰富的工具和库,可以帮助您轻松地同时在iOS和Android系统中实现您的想法和创意
19、 axui
AXUI前端框架的特点是:能用css实现的不用js,需要使用js则尽量少用,需要大量使用js则尽量可复用。通过观察本框架的核心文件会发现核心文件只有ax.css和ax.js,加载速度飞快。
20、 Eui
Eui(原Eadmin)保持原生JS开发,开箱即用,无需打包环境,写法与原生HTML几乎一致。为不熟悉mvvm模式的开发人员提供了多一种的选择
还有好多优秀的框架就不统计了,以上框架基本满足了我们日常开发的需求。