| 分类 |
名称 |
官网地址 |
简要描述 |
前端框架 |
主框架 |
Vue.js |
Vue.js - 渐进式 JavaScript 框架 | Vue.js |
|
React |
React 官方中文文档 |
|
Angular |
https://angular.io/ |
|
传统库 |
jQuery |
jQuery |
|
Backbone.js |
Backbone.js |
|
微前端架构 |
Module Federation |
Module Federation | webpack |
Webpack 5+ 原生支持的微前端模块共享方案 |
Piral |
Piral - The Ultimate Framework for Micro Frontends |
基于模块化架构的微前端框架，支持动态加载和共享依赖 |
轻量级框架 |
Svelte |
Svelte • Web development for the rest of us |
编译时框架，将组件转换为高效的原生 JS 代码 |
Preact |
Preact |
React 的轻量级替代品（仅 3KB），兼容 React API |
新兴框架 |
SolidJS （类React响应式框架） |
https://www.solidjs.com/ |
高性能响应式框架，语法类似 React，但无虚拟 DOM。 |
Alpine.js 轻量级响应式框架） |
https://alpinejs.dev/ |
轻量级前端框架，通过 HTML 属性实现响应式交互 |
二、UI框架与组件库 |
css框架 |
Bootstrap |
Bootstrap · The most popular HTML, CSS, and JS library in the world. |
|
Tailwind CSS |
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. |
|
Foundation |
The most advanced responsive front-end framework in the world. | Foundation |
|
Vue生态组件 |
Element Plus |
A Vue 3 UI Framework | Element Plus |
|
Ant Design of Vue /Ant Design |
Ant Design Vue |
|
iView |
iView / View Design 一套企业级 UI 组件库和前端解决方案 |
|
uView |
uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 |
|
Vant |
Ant Design - The world\'s second most popular React UI framework |
|
Cube-UI |
cube-ui Document |
|
Mint-UI |
mint-ui documentation |
|
Element-UI |
Element - The world\'s most popular Vue UI framework |
|
Naive UI（Vue3） |
Naive UI |
Vue 3 的 TypeScript 友好组件库，设计风格简洁 |
PrimeVue |
PrimeVue - Vue UI Component Library |
企业级 Vue UI 套件，提供 80+ 组件和主题系统 |
React生态组件 |
Ant Design |
Ant Design - The world\'s second most popular React UI framework |
|
Chakra UI |
Chakra UI |
可访问性优先的 React 组件库，支持主题定制 |
Mantine |
Mantine |
现代功能丰富的 React 组件库，内置 hooks 和工具集 |
Radix UI |
Radix UI |
无样式的可访问组件基座，提供完整的无障碍支持 |
跨框架UI |
react/vue |
Headless UI |
Headless UI - Unstyled, fully accessible UI components |
无样式 UI 逻辑库，支持 React/Vue，需自行添加样式 |
通用组件： |
Layui |
Layui - 极简模块化前端 UI 组件库 |
开源免费的 Web UI 组件库，采用自身轻量级模块化规范，非常适合网页界面的快速构建。面向后端开发者 |
Quasar |
Quasar Framework |
|
移动端组件： |
Vant |
Vant 4 - A lightweight, customizable Vue UI library for mobile web apps. |
|
Mint-UI |
mint-ui documentation |
|
CSS-in-JS方案（将css直接写在JavaScript中） |
styled-components |
styled-components |
通过模板字符串编写 CSS 的 React 样式库。 |
Emotion |
Emotion – Introduction |
高性能 CSS-in-JS 库，支持动态样式和 SSR。 |
|
通用方案： |
Vue |
Vuex (Vue) |
What is Vuex? | Vuex |
Vue.js 应用的状态管理模式和库，帮助管理应用的状态 |
Pinia |
Pinia | The intuitive store for Vue.js |
Vue 官方推荐的状态管理库，支持 TypeScript 和 Composition API |
react |
Valtio |
Valtio, makes proxy-state simple for React and Vanilla |
基于 Proxy 的轻量 React 状态管理库 |
Redux (React) |
Redux - A JS library for predictable and maintainable global state management | Redux |
JavaScript 应用状态管理库，常用于 React 应用中管理应用状态 |
Recoil (React) |
Recoil |
Facebook 推出的状态管理库，用于 React 应用，支持细粒度的状态管理 |
新锐方案： |
轻量级 |
Zustand |
Zustand |
轻量级 React 状态管理库，API 简洁高效。 |
Jotai |
Jotai, primitive and flexible state management for React |
原子化状态管理库，适用于 React 应用。 |
MobX |
MobX |
轻量级状态管理库，旨在简化状态管理并提高开发效率 |
|
XState |
XState - JavaScript State Machines and Statecharts |
基于有限状态机的状态管理库，支持复杂逻辑可视化。 |
四、跨平台框 |
桌面应用： |
Electron |
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron |
JavaScript、HTML 和 CSS 构建跨平台桌面应用程序 |
NW.js |
NW.js |
Node.js 和 Chromium 整合为一个运行时，创建桌面应用 |
移动应用： |
Ionic 跨平台框架 |
Ionic Framework - The Cross-Platform App Development Leader |
使用 Web 技术构建跨平台移动应用的框架。 |
React Native原生渲染 |
React Native · Learn once, write anywhere |
使用 React 构建原生移动应用的框架。 |
Taro小程序框架 |
Taro | 多端统一开发解决方案 |
多端统一开发框架，支持微信小程序、H5 等 |
Flutter Web |
https://flutter.dev/web |
Flutter 的 Web 移植版本，使用 Dart 语言开发 |
NativeScript |
NativeScript |
使用 JavaScript 开发原生移动应用的框架 |
Uni-app |
uni-app官网 |
Vue 语法开发跨平台应用的框架，支持小程序/H5/App |
混合渲染（微前端） |
|
Single-SPA |
single-spa | single-spa |
用于构建微前端架构的框架，支持多技术栈集成。 |
|
qiankun |
qiankun - qiankun |
阿里开源的微前端解决方案，基于 Single-SPA 封装。 |
五、数据可视化 |
通用图表库： |
2D图表 |
D3.js |
D3 by Observable | The JavaScript library for bespoke data visualization |
JavaScript 库，用于创建数据驱动文档和复杂可视化图表 |
ECharts |
https://echarts.apache.org/zh/index.html |
基于 JavaScript 的数据可视化库，提供丰富图表和交互功能 |
Highcharts |
https://www.highcharts.com/ |
流行开源 JavaScript 图表库，易于使用且功能强大 |
Chart.js |
Chart.js | Open source HTML5 Charts for your website |
简单易用的开源 JavaScript 图表库，支持多种图表类型 |
Recharts |
Recharts |
基于 React 和 D3 的声明式图表库。 |
Victory |
Victory |
React 和 React Native 的模块化图表库。 |
3D图表 |
Three.js |
Three.js – JavaScript 3D Library |
基于 WebGL 的3D图形库，用于创建和显示3D图形 |
Babylon.js |
Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best |
强大的 Web 3D 引擎，支持游戏和复杂场景渲染。 |
大屏数据组件库 |
react |
DataV-React |
http://datav-react.jiaminghi.com/ |
开源免费react大屏数据组件库 |
地图库： |
OpenLayers |
OpenLayers - Welcome |
JavaScript 库，用于在 Web 上构建地图应用 |
Leaflet |
Leaflet - a JavaScript library for interactive maps |
轻量级开源 JavaScript 库，用于移动设备友好的交互式地图 |
Mapbox GL JS |
API Reference | Mapbox GL JS | Mapbox |
WebGL 渲染交互式、可定制地图，性能高、可视化效果丰富 |
MapLibre GL JS |
MapLibre GL JS |
开源 WebGL 地图渲染库，支持 WebGL 地图渲染和交互 |
CesiumJS |
CesiumJS – Cesium |
用于在 web 浏览器中创建3D地球和2D地图的JavaScript库，无需插件 |
L7 |
AntV L7 地理空间数据可视化引擎 |
基于 WebGL 的开源大规模地理空间数据可视分析开发框架 |
专业图表： |
Ember Chart |
Ember.js - Builds |
基于 D3.js 和 Ember.js 构建的图表库，提供多种图表类型，易于扩展。 |
Visx |
https://airbnb.io/visx/ |
基于 D3 的 React 可视化库，平衡灵活性与易用性 |
Plotly.js |
Plotly.js |
科学计算领域的高精度图表库，支持 3D 渲染 |
ApexCharts |
ApexCharts.js - Open Source JavaScript Charts for your website |
交互式 SVG 图表库，提供简洁 API 和动画效果 |
GoJS |
GoJS - Interactive Diagrams for the Web in JavaScript and TypeScript |
专业流程图/拓扑图库，支持复杂交互和自定义布局 |
React Flow |
Node-Based UIs in React - React Flow |
React 专用流程图库，支持节点拖拽和连线 |
六、工具链 |
构建工具： |
Vite |
https://cn.vitejs.dev/ https://vitejs.cn/ |
新一代前端构建工具，支持快速开发和按需编译。 |
Parcel |
Parcel |
零配置的 Web 应用打包工具。 |
Rollup |
Rollup |
ES Module 打包工具，适合库开发 |
Turbopack |
API Reference: Turbopack | Next.js |
Rust 编写的新兴打包工具，由 Vercel 团队开发 |
Next.js |
Next.js by Vercel - The React Framework |
React 全栈框架，支持 SSR/SSG/ISR |
Nuxt.js |
Nuxt: The Progressive Web Framework |
Vue 全栈框架，支持服务端渲染和静态生成 |
Astro |
Astro |
岛屿架构静态站点生成器，支持多框架组件 |
IDE/编辑器： |
Visual Studio Code |
Visual Studio Code - Code Editing. Redefined |
开源代码编辑器，基于 Electron 构建，支持多种编程语言和插件 |
VS Code Insiders |
Download Visual Studio Code Insiders |
VS Code 的预览版，提供最新的功能和改进 |
Atom |
Sunsetting Atom - The GitHub Blog |
GitHub 开发的开源文本编辑器，支持插件和自定义主题 |
Brackets |
Brackets - A modern, open source code editor that understands web design. |
轻量级代码编辑器，专为网页设计和前端开发而创建 |
Jupyter Notebook |
Project Jupyter | Home |
开源的交互式计算环境，支持多种编程语言和数据科学 |
预处理工具： |
Prepros |
Your Friendly Web Development Companion |
代码预处理器，支持 Less、Sass、Stylus 等语言的自动编译和刷新。 |
七、测试工具 |
单元测试： |
Jest |
Jest · 🃏 Delightful JavaScript Testing |
JavaScript 测试框架，支持快照测试和模拟函数。 |
Mocha |
Mocha - the fun, simple, flexible JavaScript test framework |
测试框架，支持多种断言库和报告器。 |
E2E测试： |
Cypress |
Testing Frameworks for Javascript | Write, Run, Debug | Cypress |
端到端测试工具，提供直观的测试体验 |
访问性测试： |
无障碍设计 |
Axe-core |
GitHub - dequelabs/axe-core: Accessibility engine for automated Web UI testing |
用于检测 Web 应用无障碍问题的库。 |
Pa11y |
GitHub - pa11y/pa11y: Pa11y is your automated accessibility testing pal |
无障碍自动化测试工具，用于检测 Web 页面的无障碍问题。 |
Tenon.js |
https://tenon.io/ |
无障碍检测工具，提供详细的无障碍问题报告。 |
|
React Testing Library |
React Testing Library | Testing Library |
React 组件测试库，强调用户行为模拟 |
Vue Testing Library |
Intro | Testing Library |
Vue 组件测试工具，基于相同的用户中心测试理念 |
Vitest |
Vitest | Next Generation testing framework |
基于 Vite 的快速测试框架，兼容 Jest API |
八、实用工具库 |
网络请求： |
Axios |
Axios |
基于 Promise 的 HTTP 客户端，支持请求和响应拦截 |
|
SWR |
SWR3: SWR 是用于数据请求的 React Hooks 库 |
React Hooks 数据请求库，支持缓存、重试和实时更新。 |
React Query |
TanStack Query |
强大的异步数据管理库，支持缓存、同步和错误处理。 |
工具函数： |
|
Lodash |
lodash.com |
提供常用函数式编程工具，如数组和对象操作、函数防抖等。 |
|
性能优化 |
Lodash Debounce |
Lodash Documentation |
用于防抖函数的库，可优化性能。 |
时间处理： |
|
Moment.js |
momentjs.com |
JavaScript 库，用于处理日期和时间。强大的日期处理库，提供日期解析、格式化、计算等功能。 |
|
Day.js |
https://day.js.org |
Moment.js 的轻量级替代品，体积更小但功能完备。 |
动画库 |
动画引擎 |
GSAP (GreenSock) |
https://greensock.com/gsap/ |
高性能动画库，支持复杂时间轴和物理效果。 |
|
Anime.js |
animejs.com |
强大的轻量级动画库，支持 CSS 属性、SVG、DOM 属性等多种动画效果。 |
|
Animate.css |
daneden.github.io/animate.css |
CSS3 动画库，提供多种预设动画效果，适用于网页元素的动画展示。 |
|
Popmotion |
Popmotion: The animator\'s JavaScript toolbox |
JavaScript 动画工具包，支持物理引擎动画 |
|
React Spring |
react-spring |
基于弹簧物理模型的 React 动画库 |
|
Framer Motion |
Motion - Web animations for JavaScript, React and Vue |
React 动画库，支持手势和布局动画 |
|
Motion One |
Motion - Web animations for JavaScript, React and Vue |
轻量级动画库，性能优化，支持 CSS/WebGL 动画 |
表单处理： |
react |
Formik (React) |
Formik: Build forms in React, without the tears |
React 表单管理库，简化表单处理和验证。 |
React Hook Form |
React Hook Form - performant, flexible and extensible form library |
基于 React Hooks 的高性能表单库，支持无控制组件。 |
React Final Form |
React Final Form |
高性能 React 表单管理库，支持字段级验证 |
|
Formily |
https://formilyjs.org/ |
阿里巴巴开源的复杂表单解决方案，支持联动逻辑 |
|
VeeValidate |
VeeValidate: Painless Vue.js forms |
Vue 表单验证库，提供灵活的验证规则系 |
|
Vuelidate (Vue) |
Getting started | Vuelidate |
Vue.js 的表单验证库，支持声明式和响应式验证。 |
|
FormValidation |
The best validation library for JavaScript - FormValidation |
用于表单验证的库，支持多种验证规则和插件。 |
|
Parsley.js |
Parsley - The ultimate JavaScript form validation library |
自动表单验证库，易于集成和使用。 |
|
Immer |
Introduction to Immer | Immer |
简化不可变数据操作的库，通过代理实现直观修改 |
Ramda |
Ramda Documentation |
函数式编程工具库，提供数据不可变操作方法 |
Zod |
Intro | Zod |
TypeScript 优先的数据校验库，运行时类型安全 |
富文本编辑器： |
Quill |
quilljs.com |
开源富文本编辑器，支持现代浏览器，提供丰富的编辑功能。 |
九、特殊领域库 |
wangEditor |
www.wangeditor.com |
国产富文本编辑器，易于集成和定制。 |
Simditor |
simditor.tower.im |
简洁易用的富文本编辑器，支持多种插件扩展。 |
拖拽交互： |
react-beautiful-dnd |
GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React |
专为 React 设计的拖放组件，支持列表重排序。 |
dnd-kit |
dnd kit – a modern drag and drop toolkit for React |
现代轻量级拖放工具包，支持无障碍和复杂交互。 |
手势库 |
Hammer.js |
Hammer.JS - Hammer.js |
手势识别库，支持触摸、滑动、旋转等操作。 |
文件上传： |
Dropzone.js |
https://dropzone.js.org/ |
用于文件拖放上传的库，支持多种自定义选项。 |
Fine Uploader |
Home - Fine Uploader |
强大的文件上传库，支持断点续传和拖放上传。 |
Plupload |
Plupload: Multi-runtime File-Uploader |
文件上传库，支持多种上传运行时（如 HTML5、Flash 等）。 |
数据表格： |
AG Grid |
AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid |
企业级表格库，支持复杂数据展示和编辑。 |
TanStack Table |
TanStack Table |
无头 UI 表格库，支持 React、Vue 等框架。 |
懒加载： |
LazyLoad.js |
https://github.com/ressio/lazy-load |
图片懒加载库，用于优化页面加载性能。 |
十、辅助工具库 |
LazySizes |
GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. |
轻量级的响应式图片懒加载库。 |
Lozad.js |
https://github.com/ApoorvaJ/lozad.js |
简单的懒加载库，支持图片、视频等多种元素。 |
Blazy.js |
https://github.com/dogfuntion/Blazy.js |
轻量级的图片懒加载库，支持回调函数。 |
滚动动画 |
WOW.js |
github.com/matthieua/WOW |
滚动展示动画，依赖 animate.css，可实现页面滚动时元素的动画效果。 |
ScrollReveal.js |
github.com/jlmakes/scrollreveal |
类似 WOW.js 的动画库，可通过配置实现丰富的滚动动画效果。 |
响应式处理： |
Breakpoints.js |
https://github.com/ajrhumphrey24/breakpoints |
响应式设计库，用于检测和管理断点。 |
Enquire.js |
GitHub - WickyNilliams/enquire.js: Awesome Media Queries in JavaScript |
响应式设计库，支持媒体查询的 JavaScript 回调。 |
Adapt.js |
https://github.com/IanLunn/Adapt.js |
响应式设计库，用于调整布局以适应不同的屏幕尺寸。 |
代码高亮： |
Prism.js |
Prism |
轻量级代码高亮库，支持多种编程语言。 |
Highlight.js |
highlight.js |
代码高亮库，易于使用且支持多种语言。 |
Rainbow |
Rainbow - Javascript Code Syntax Highlighting |
代码高亮库，支持多种语言和主题 |
滚动库： |
iScroll |
Unleashing the Power of iScroll.js: The Ultimate Solution for Smooth and Interactive Scrolling on Your Website - Iscrolljs |
平滑滚动插件，适用于移动设备的触摸滚动场景。 |
十一、移动端专项 |
BetterScroll |
BetterScroll 2.0 |
iscroll 的优化版，提供流畅的移动端滑动体验。 |
MeScroll |
mescroll.com |
支持移动端上拉刷新和下拉加载功能的滚动库。 |
轮播组件： |
Swiper |
swiper.com.cn |
常用于移动端网站的触摸滑动轮播图库。 |
OwlCarousel2 |
owlcarousel2.github.io/OwlCarousel2 |
提供多种轮播效果，支持触摸和响应式布局。 |
Slip.js |
github.com/binnng/slip.js |
轻量级移动端跟随手指滑动组件，零依赖 |
微前端： |
Single-SPA |
single-spa | single-spa |
用于构建微前端架构的框架，支持多技术栈集成。 |
十二、新型技术栈 |
qiankun |
qiankun - qiankun |
阿里开源的微前端解决方案，基于 Single-SPA 封装。 |
元框架：(静态站点生成、全栈开发） |
Astro |
Astro |
轻量级静态站点生成器，支持多框架组件。 |
Wasp |
Wasp |
配置式全栈开发框架，通过声明式语言定义应用结构，底层基于 React、Node.js 和 Prisma。 |
低代码开发 |
Appsmith |
Appsmith | Open-Source Low-Code Application Platform |
低代码平台，可视化拖拽搭建后台界面，支持多数据源和 JS 自定义脚本。 |
ToolJet |
ToolJet | AI-Native Platform for Building Internal Tools |
提供拖拽式界面设计和内置查询编辑器，支持自定义 JS 脚本和多种数据源。 |
应用开发框架 |
Refine （react） |
Refine | Open-source Retool for Enterprise |
基于 React 的应用开发框架，支持多种数据源适配器和 UI 框架，适合复杂后台系统。 |
新兴领域 |
Blazor |
Blazor | Build client web apps with C# | .NET |
使用 C# 开发 Web 应用的框架，基于 WebAssembly |
wasm-pack |
wasm-pack |
Rust WebAssembly 工具链，构建浏览器可用的 WASM 模块 |
Ethers.js |
Documentation |
以太坊区块链交互库，提供简洁的 API 接口 |
Web3.js |
web3.js - Ethereum JavaScript API — web3.js 1.0.0 documentation |
JavaScript 以太坊交互库，支持智能合约调用 |
低层封装： |
LitElement |
https://lit.dev/ |
Web Components 库，用于构建可复用的自定义元素。 |
十三、扩展生态 |
Polymer |
Polymer library - Polymer Project |
用于构建 Web Components 的库，支持模块化和封装。 |
Stencil |
Stencil |
用于创建高性能 Web Components 的工具，支持 TypeScript 和多种构建优化。 |
实时通信、状态同步 |
Pusher |
Pusher | Leader In Realtime Technologies |
实时通信平台，用于构建实时功能（如聊天、通知等）。 |
Socket.IO |
Socket.IO |
实时双向通信库，用于构建实时 Web 应用。 |
Firebase |
Firebase | Google\'s Mobile and Web App Development Platform |
提供实时数据库和云服务的平台，适合快速开发。 |
后端即服务（BaaS) |
Supabase |
Supabase | The Open Source Firebase Alternative |
Firebase 开源替代方案，提供托管数据库、身份认证、文件存储等后端服务。 |
日期选择： |
Flatpickr（UI组件） |
Introduction |
轻量级日期选择器库，易于使用且高度可定制。 |
十四、其他专项 |
标签输入： |
Tagify（UI组件） |
GitHub - yairEO/tagify: 🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue |
标签输入框库，支持自定义样式和功能。 |
下拉选择： |
Select2（UI组件） |
Getting Started | Select2 - The jQuery replacement for select boxes |
用于增强 HTML 选择元素的库，提供丰富的选择功能。 |
Typeahead.js |
GitHub - twitter/typeahead.js: typeahead.js is a fast and fully-featured autocomplete library |
提供强大的自动完成功能的库。 |
Bloodhound |
typeahead.js/doc/bloodhound.md at master · twitter/typeahead.js · GitHub |
用于增强自动完成功能的建议引擎。 |
Awesomeplete |
https://github.com/devbridge/Autocomplete |
轻量级自动完成功能库，易于使用。 |
模态框： |
|
Bootstrap Modal |
Modal · Bootstrap v5.3 |
响应式模态框库，易于使用和自定义。 |
|
Magnific Popup |
Magnific Popup: Responsive jQuery Lightbox Plugin |
弹窗库，支持多种弹窗类型和动画效果。 |
|
SweetAlert2 |
SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript\'s popup boxes |
高颜值弹窗库（无依赖） |
|
Fancybox |
Fancybox | Fancyapps UI - Robust JavaScript UI Component Library |
多媒体模态框（图片/视频/iframe） |
|
Micromodal.js |
micromodal - npm |
轻量级无依赖模态框（仅 3KB） |
|
Lightbox.js |
Lightbox2 |
图片弹窗库，用于创建简洁的图片灯箱效果。 |
react |
React Modal |
react-modal documentation |
|
Headless UI |
Dialog - Headless UI |
|
vue |
Vue Final Modal |
Vue Final Modal · Vue Final Modal |
|
剪贴板： |
clipboard.js |
github.com/zenorocha/clipboard.js |
轻量级的复制粘贴操作库，易于集成 |
CMS框架/内容管理 |
Cofoundry |
开源地址：https://github.com/cofoundry-cms/cofoundry使用文档：https://www.cofoundry.org/docs/getting-started |
基于 .Net 开发的内容管理系统，支持代码优先开发和插件扩展。 |
Piranha.core |
Piranha CMS - Open Source, Cross Platform Asp.NET Core CMS |
轻量级跨平台 CMS，支持多种模板和解耦设计，可作为移动应用后端。 |
自动化测试： |
Pupeteer |
Puppeteer | Puppeteer |
Node 库，提供高级 API 以控制 DevTools 协议 |
学习平台： |
FreeCodeCamp |
https://www.freecodecamp.org/ |
在线编程学习平台，提供前端开发、后端开发和数据可视化等课程。 |
