在百度搜索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模式的开发人员提供了多一种的选择
还有好多优秀的框架就不统计了，以上框架基本满足了我们日常开发的需求。
扫一扫
1034
到【灌水乐园】发言
