huaize2020/awesome-frontend huaize2020/awesome-frontend

  • Stars
    star
    204
  • Rank 192,063 (Top 4 %)
  • Language
  • License
    MIT License
  • Created over 3 years ago
  • Updated over 1 year ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
huaize2020/awesome-frontend
github

huaize2020

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

前端开发资源大全中文版。An awesome front end develop packages and resources

English | 简体中文

正在持续建设中...

同时推荐你查看我正在维护的其他仓库

目录

官方文档

Web技术

ECMAScript

资源

教程

前沿技术

  • 前端精读周刊 - 前端精读周刊。帮你理解最前沿、实用的技术。
  • Web 技术周刊 - 汇总平时看到的优秀文章，前端为主，兼含其它技术及少量产品、设计、管理内容。
  • 前端日报 - 每日会挑选一些比较有用的文章发在公众号上，欢迎关注。

面试题

算法

GIT仓库

CSS

框架

  • tailwindcss - 一个功能类优先的 CSS 框架。
  • bulma - 基于 Flexbox 的现代CSS框架。

CSS动画

  • animate.css - 跨浏览器CSS动画库。简单易用。
  • Hover.css - 一个悬停效果的CSS3集合，可应用于链接、按钮、徽标、SVG、特色图像等。提供CSS、Sass等版本。
  • Loaders.css - 令人愉快的、注重性能的纯 css 加载动画。
  • csshake - 让你的 DOM 颤抖起来。

数字

  • Numeral.js - 格式化和操作数字。
  • bignumber.js - 用于任意精度十进制和非十进制算术的 JavaScript 库。
  • decimal.js - JavaScript的任意精度的十进制类型。
  • big.js - 一个小型，快速的JavaScript库，用于任意精度的十进制算术运算。
  • round-to - 将数字四舍五入到指定的小数位数：1.234→1.2`。
  • unique-random - 生成连续唯一的随机数。
  • random-int - 生成随机整数。
  • random-float - 生成随机浮点数。

数学运算

  • mathjs - 广泛的数学运算库。
  • ndarray - 多维数组。
  • algebra - 代数结构。
  • multimath - 在WebAssembly和JS中进行快速图像数学运算。

日期 和 时间

  • moment - 解析、校验、操作和显示日期。
  • dayjs - 仅2KB，不可变的日期时间库。使用与Moment.js同样的API，Moment.js的替代库。
  • date-fns - 现代JavaScript日期工具库。
  • luxon - 用于处理日期和时间的库。
  • timeago.js - timeago.js是一个很小的（2.0 kb）库，用于使用 *** time ago 语句格式化日期。
    • timeago-react - 简单高效的react组件使用 *** time ago 语句格式化日期。 例如：'3 hours ago'。
  • ms - 毫秒转换工具。
  • dateformat - 日期格式化。
  • pretty-ms - 将毫秒转换为人类可读的字符串，如: 1337000000 → 15d 11h 23m 20s。
  • strftime - JavaScript版时间格式化Strftime。
  • date-utils - 用于Node.js和浏览器的日期垫片（Polyfills）。

JavaScript框架

  • vue - Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • react - 用于构建用户界面的 JavaScript 库。 (你也许会喜欢 awesome-react)
  • angular - 现代 Web 开发平台。
  • svelte - Svelte 是一种全新的构建用户界面的方法，增强的Web应用程序。
  • preact - Preact 是 React 的轻量化替代方案，仅有 3KB。并且提供了相同的 ES6 API，还具有组件和 Virtual DOM。
  • petite-vue - Vue子集，优化渐进增强，仅 5kb。

跨端/多端框架

  • uni-app - Uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架。
  • Taro - 开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。
  • rax - Rax 是阿里巴巴应用最广泛的跨端解决方案，支持开发者通过类 React DSL 编写 Web、小程序、Flutter 等不同容器的跨端应用。

表单相关

上传

  • uppy - Uppy 是一款时尚的模块化 JavaScript 文件上传器，可与任何应用程序无缝集成。 它快速、易于使用，让您可以考虑比搭建文件上传器更重要的问题。
  • dropzone - Dropzone 是一个易于使用的拖放库。 它支持图像预览并显示漂亮的进度条。
  • webuploader - WebUploader是一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。
  • plupload - Plupload 是用于构建文件上传器的 JavaScript API。 它支持多文件选择、文件过滤、分块上传、客户端图像缩小，并且在必要时可以回退到替代运行时，如 Flash 和 Silverlight。

交互相关

键盘操作

  • mousetrap - 处理键盘快捷方式的简单库。
  • keymaster - 一个用于定义和触发键盘快捷键的微型库。 它没有任何依赖。

微前端

  • qiankun - 快速、简单和完整的微前端解决方案。
  • single-spa - 简单微前端的路由器。
  • emp - 这是一个面向未来的，基于Webpack5 Module Federation搭建的微前端解决方案。
  • piral - 使用微前端的下一代 Web 应用程序框架。
  • garfish - 一个功能强大的微前端框架。🚚

Canvas/SVG

你也许会喜欢 awesome-canvas

  • fabric.js - Javascript Canvas 库，SVG-to-Canvas（和 canvas-to-SVG）解析器。
  • rough - 创建具有手绘、粗略外观的图形。
  • konva - Konva.js是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互来扩展2d上下文。
  • concrete - 一个轻量级的 Html5 Canvas 框架，支持命中检测、支持图层、像素比管理、导出和下载。

WebGL

  • three.js - JavaScript 3D库。
  • pixijs - HTML5创意引擎：用最快、最灵活的2D WebGL渲染器创建漂亮的数码内容。
  • gl-matrix - 用于操作矩阵和向量，开发高性能的 WebGL 应用程序的JavaScript库。
  • Oasis Engine - Oasis Engine 是一个Web优先 和 移动端优先的高性能实时开发平台。

全屏

  • screenfull - 跨浏览器使用 JavaScript Fullscreen API 的封装。

存储

  • localForage - 💾 离线存储增强。 基于 IndexedDB、WebSQL 或 localStorage 封装的使用简单但功能强大的 API 。

动画

  • anime.js - JavaScript 动画引擎。
  • lottie-web - 在Web、Android和iOS以及React Native上渲染After Effects动画。
  • mojs - 用于Web的动态图形工具。
  • velocity - Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖jQuery，可单独使用。
  • svg.js - 用于操作和使SVG动画的轻量级库。
  • dynamics.js - 创建基于物理的动画。
  • animsition - 一个简易的jQuery插件用于CSS页面切换过渡效果
  • TweenJS - 一个简单但功能强大的tweening/animation库。CreateJS库套件的一部分。

视觉差

  • parallax - 对智能设备的方向做出响应的视觉差引擎。
  • rellax - 轻量、原生Javascript的视觉差库。

波纹

  • wavesurfer.js - 以Web音频和Canvas的音频波纹。
  • wavedrom - 数字时序图（波形）渲染引擎。
  • waveforms - 一个互动的、可探索的声波纹描绘特效。
  • siriwave - Apple® Siri 波纹特效
  • waveform-playlist - 具有画布波形预览的多轨网络音频编辑器和播放器。
  • waves- 模拟海浪效果。

粒子/路径动画

  • Proton - 粒子效果库。
  • bubbly-bg - 小于 1kB 的漂亮气泡背景(gzipped后750字节)。
  • react-particle-effect-button - 基于React的爆裂粒子效果按钮。
  • pasition - 轻量级 Path 过渡库，可以渲染到任何地方。
  • three.proton - 一个神奇的 3d 粒子引擎，使用了three.js库和Proton。

表情

  • emoji-mart - Emoji Mart 是一个可定制的表情选择器组件。

数据可视化

你也许会喜欢 awesome-react数据可视化

引擎

  • D3.js - 一个可以基于数据来操作文档的 JavaScript 库。 (你也许会喜欢 awesome-d3)
    • visx - 🐯 visx | 可视化组件。
  • Raphaël - Raphaël 是一个小型 JavaScript 库，它可以简化您在网站上操作矢量图形的工作。
  • zrender - 2d 绘图的轻量级图形库。
  • g - 强大的渲染引擎，为 G2 和 G6 提供 Canvas 和 SVG 绘制。

通用

  • ECharts - 来自百度的强大图表库。
    • v-charts - 基于 Vue2.0 和 ECharts 封装的图表组件。
    • vue-echarts - 使用 Apache ECharts 5，同时支持 Vue.js 2/3。
    • echarts-for-weixin - Apache ECharts (incubating) 的微信小程序版本
  • plotly.js - 开源 JavaScript 图形库。
  • HighCharts - 为您的 Web 项目轻松创建交互式图表。

图表

  • Chart.js - 使用 <canvas> 标签创建 HTML5 图表。
  • charts - 简单、响应式、零依赖的现代 SVG 图表。
  • chartist-js - Simple responsive charts.
  • G2 - JavaScript 中的图形语法。
    • BizCharts - 基于 G2 和 React 的强大数据可视化库。
    • g2plot - 一个交互式响应式的图表库。
    • viser - Viser 是一个适用于数据可视化工程师的工具。
  • ApexCharts - 基于 SVG 的交互式 JavaScript 图表。
  • F2 - 一个优雅的、交互式的、灵活的移动图表库。
  • uPlot - 小而快速的图表k库，可制作时序图、折线图、面积图、OHLC图和饼图。
  • flot - 基于jQuery的优雅的JavaScript图表库。
  • Peity - 渐进式 svg 饼图、圆环图、条形图和折线图。

关系图

  • Sigma - Sigma 是一个专门用于关系图绘制的 JavaScript 库。
  • G6 - 便捷的关系数据可视化引擎与图分析工具。
    • graphin - 基于 G6 封装的React图分析应用组件。
  • cytoscape.js - 用于可视化和分析的图论（网络）库。
  • Springy - 一个力导图布局算法。
  • WebCola - Javascript版约束图形布局。

流程图

  • Flowy - 用于创建流程图的最小 Javascript 库。
  • flowchart.js - 基于文本描述绘制简单的 SVG 流程图。
  • js-sequence-diagrams - 从图表表示的文本中绘制简单的 SVG 序列图。
  • GoJS - 交互式流程图、组织结构图、设计工具、规划工具、可视化语言的JavaScript图表库。
  • mermaid - 通过解析类Markdown语法生成图表和流程图等。
  • wireflow - 用户流程图实时协作工具。
  • butterfly - 基于JavaScript/React/Vue2 的流程图组件。
  • Drawflow - 简单的流程库。

地图

  • Leaflet - Leaflet 是对移动端友好的开源领先的交互式地图库。
  • deck.gl - WebGL2 支持的地理空间可视化层。
  • OpenLayers - 高性能、功能丰富的库，用于在 Web 上创建交互式地图。
  • cesium - 用于世界级 3D 地球仪和地图的开源 JavaScript 库。
  • L7 - 基于 WebGL 的开源大规模地理空间数据可视分析开发框架。
  • tangram - 用于创造性制图的WebGL地图绘制引擎。

甘特图

  • gantt - 开源的Javascript甘特图。基于SVG .
  • jQueryGantt - jQuery甘特图编辑器。
  • gantt-schedule-timeline-calendar - JS甘特图，项目甘特图，时间线，调度图，甘特时间线，预订时间线，React甘特图，Angular甘特图，Vue甘特图，svelte甘特图

其他

游戏

  • phaser - Phaser 是一个有趣、免费且快速的 2D 游戏框架，用于为桌面和移动的浏览器制作 HTML5 游戏，支持 Canvas 和 WebGL 渲染。
  • Babylon.js - Babylon.js 是一个功能强大、美观、简单、开放的游戏和渲染引擎。
  • cocos2d-html5 - 用于 Web 浏览器的 Cocos2d。 使用 JavaScript 构建。
  • limejs - 网页和iOS的HTML5游戏框架。

代码查看/代码高亮

  • highlight.js - 语言自动检测 和 零依赖的 JavaScript 语法高亮器。
  • prism - 轻量级、健壮、优雅的语法高亮。

编辑器

富文本编辑器框架

  • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
  • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
  • ckeditor5 - 强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。

富文本编辑器

  • quill - 为兼容性和可扩展性而构建的现代所见即所得(WYSIWYG)编辑器。
  • slate - 一个完全可定制的框架，用于在浏览器中构建富文本编辑器。
  • draft.js - Draft.js 是一个 JavaScript 富文本编辑器框架，为 React 构建并由不可变模型支持。
  • editor.js - 具有干净 JSON 输出的块式编辑器。
  • trix - 用于日常写作的富文本编辑器。
  • medium-editor - 从Medium.com 所见即所得编辑器 克隆 而出。使用 contenteditable API 实现富文本解决方案。
  • wangEditor - 轻量级web富文本框。
  • pell - 简单、小巧的 Web 所见即所得文本编辑器，无依赖项。
  • tinymce - 用于富文本编辑的 JavaScript 库。 适用于 React、Vue 和 Angular。
  • prosemirror - 基于 contentEditable 的表现良好的丰富语义内容编辑器，支持协作编辑和自定义文档模式。
  • ckeditor4 - 最好的企业级所见即所得编辑器。完全可定制的无数功能和插件。
  • ckeditor5 - 强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。
  • simditor - 一个简单快速的所见即所得(WYSIWYG)编辑器。
  • substance - 用于基于 Web 的内容编辑的 JavaScript 库。
  • neditor - 基于ueditor的更现代化的富文本编辑器，支持HTTPS。

代码编辑器

  • monaco-editor - 基于浏览器端代码编辑器。
  • ace - Ace是使用JavaScript编写的独立代码编辑器。
  • CodeMirror - 浏览器端代码编辑器。

Markdown编辑器

  • stackedit - 浏览器端Markdown编辑器。
  • TOAST UI Editor - Markdown 所见即所得编辑器。 GFM 标准 + 图表和 UML 可扩展。
  • Editor.md - 开源可嵌入在线编辑器（组件）。
  • Markdown Plus - 具有额外功能的 Markdown 编辑器。
  • bytemd - 一个用 Svelte 构建 (hackable) 的 Markdown 编辑器组件。

图形绘制编辑器

  • DrawerJs - 可定制的所见即所得 HTML 画布编辑器。
  • fabric-js-editor - 基于Fabric.js构建的HTML5矢量图像编辑器。

办公软件

Excel/在线表格

  • sheetjs - 电子表格数据工具箱。
  • handsontable - 带有电子表格外观的 JavaScript 数据网格。 适用于 React、Angular 和 Vue。
  • x-spreadsheet - 基于Web Canvas的在线表格。
  • Luckysheet - Luckysheet，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
  • exceljs - Excel工作表管理工具。
  • SlickGrid - 极快的JavaScript网格/电子表格
  • xlsx-populate - Excel XLSX生成和解析工具，可运行在Node和浏览器。

PDF

演示/幻灯片

  • reveal.js - HTML展示框架。
  • impress.js - 它是一个基于现代浏览器中CSS3 transforms和transitions的强大功能的展示框架。
  • slidev - 为开发者准备的演示幻灯片。
  • deck.js - 现代HTML演示文稿。
  • bespoke.js - DIY展示的微框架。
  • shower - Shower HTML演示引擎。

命令终端

构建工具

  • webpack - 打包浏览器的模块和资产。

  • parcel - 快速，零配置的 Web 应用构建工具。

  • gulp - 流式快速构建系统，支持代码而不是配置。

  • esbuild - 极快的 JavaScript 打包压缩工具。

  • rollup - 新一代的 ES2015 打包构建工具。

  • pkg - 将 Node.js 项目打包成可执行文件。

  • Grunt - JavaScript 任务执行器。

  • Brunch - 前端 web 应用程序构建工具，具有简单的声明性配置、快速的增量编译和自定的工作流。

  • FuseBox - 快速构建系统，结合了 webpack，JSPM 和 SystemJS 的强大功能，并具有一流的 TypeScript 支持。

  • rspack - 一个快速的基于 Rust 的 Web 打包工具 🦀️。

  • Broccoli - 快速、可靠的资产管道，支持固定时间重建和紧凑的构建定义。

  • ESM

    • Vite - 新一代前端构建工具。
    • snowpack - 由 ESM 支持的前端构建工具。 即时，轻量级，无捆绑开发。

Web Components

(你也许喜欢 awesome-webcomponents)

  • polymer - Web Component 库。
  • stencil - Stencil 是一个简单的编译器，用于生成 Web Components和静态站点生成的渐进 Web 应用程序(PWA)。
  • lit - Lit是一个简易的用于构建快速、轻量的Web Components库。
  • skatejs - Skate 是基于 Web Components 标准的函数式响应式抽象，使您能够使用流行的视图库（如 React、Preact 和 LitHTML一样）编写小型、快速和可扩展的 Web 组件。
  • x-tag - 现代浏览器自定义组件。
  • slim.js - Slim是一个用于Web Components开发的超快，原生和优雅的库。

指纹

  • clientjs - 设备信息 和 数字指纹。

More Repositories

1

awesome-nodejs

Node.js 资源大全中文版。An awesome Node.js packages and resources
JavaScript
1,237
star
2

awesome-react

React 资源大全中文版。An awesome React packages and resources
111
star
3

awesome-koa

Koa 资源大全中文版。An awesome Koa packages and resources
81
star
4

awesome-egg

Egg 资源大全中文版。An awesome egg packages and resources
33
star
5

awesome-react-native

React Native资源大全中文版。An awesome React Native packages and resources
13
star
6

huaize2020

4
star
7

awesome-rust

Rust 资源大全中文版。An awesome Rust packages and resources
4
star
8

awesome-rpa

3
star
9

node-collections

TypeScript
2
star
10

awesome-svelte

2
star