前端资源汇总

共计 7312 个字符，预计需要花费 19 分钟才能阅读完成。

https://github.com/abc-club/f…

本文收集学习过程中使用到的资源。

持续更新中……

vue
react
Weex
typescript
常用库
js
es6
移动端
h5 游戏
微信公众号
webpack
GraphQL
性能与监控
高质文章
趋势
动效
可视化
数据结构与算法
js core
代码规范
工具
canvas
测试
网络请求
pwa
数据库
其他必备知识

awesome-vue
nuxt(vue 服务端渲染)
mpvue(vue 小程序)
vuepress
vue-i18n
awesome-nuxt

electron-vue
uni-app(uni-app 是一个使用 Vue.js 开发小程序、H5、App 的统一前端框架)
chameleon(滴滴一套代码运行多端，一端所见即多端所见)
overwatch-ui
element
iview *22k+
vuetify
mint-ui *14k+
bootstrap-vue
ant-design-vue
cube-ui
v-charts
vue-awesome-swiper
vee-validate
vue-lazyload
vue-quill-editor

逐行分析 vue(vue 源码分析)
learnVue(vue 源码分析)
vue-analysis(vue 源码分析)
Vue3.0 前的 TypeScript 最佳入门实践
浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层
VUE 单页应用骨架屏方案
一个 Vue 引发的性能问题
【2019 前端进阶之路】Vue 组件间通信方式完整版
Vue.js 组件精讲
剖析 Vue.js 内部运行机制
Vuejs 建议和最佳实践
Vue 项目性能优化 — 实践指南（网上最全 / 详细）

vue-sell
vue2-elm *29k+
iview-admin
vue-element-admin *38k+
vue-data-board
bilibili-vue
best-resume-ever
vue2-manage
JSUI
mall-admin-web
vue-framework-wz
Vue-cnodejs

React 官网 https://reactjs.org/
React 中文网 https://react.docschina.org/
React-router https://reacttraining.com/rea…
redux https://redux.js.org/introduc…
redux 中文 http://cn.redux.js.org/
umi https://umijs.org/
dva https://dvajs.com
immutable https://github.com/immutable-…
react-devtools-tutorial

React 源码解析
awesome https://github.com/enaqx/awes…
react-hook https://github.com/streamich/…
React.js 小书 https://juejin.im/post/58c7a1…
React 入门看这篇就够了 https://segmentfault.com/a/11…
掘金最污的 React16.x 图文视频教程(2 万 5 千字长文 - 慎入) https://juejin.im/post/5d085b…
react demo https://gist.github.com/sAbak…
一文速览 React 全栈 https://juejin.im/post/5d0ee2…
React 同构与极致的性能优化 https://segmentfault.com/a/11…
阿里开源项目 https://segmentfault.com/a/11…
一文速览 React 全栈
掘金最污的 React16.x 图文视频教程(2 万 5 千字长文 - 慎入)
你要的 React 面试知识点，都在这了
如何优化你的超大型 React 应用【原创精读】
React 实战：设计模式和最佳实践
21 个让 React 开发更高效更有趣的工具
在 react/redux 中使用 Immutable
从头开始，彻底理解服务端渲染原理(8 千字汇总长文)
React 的性能优化（一）当 PureComponent 遇上 ImmutableJS
Profiling React performance with React 16 and Chrome Devtools.
React 性能优化技巧总结
介绍 React Profiler

ant-design https://ant.design/index-cn
ant-design-mobile https://mobile.ant.design/ind…
react-intl
rc-form https://github.com/react-comp…
nivo(React 数据可视化库)

umi https://umijs.org/
飞冰 https://ice.work/
next.js https://github.com/zeit/next.js
beidou https://github.com/alibaba/be…
egg-react-ssr https://github.com/ykfe/egg-r…
react-server https://github.com/redfin/rea…
Vulcan.js(The full-stack React+GraphQL framework)

typescript 中文 https://www.tslang.cn/
typescript 中文 https://ts.xcatliu.com/ https://zhongsp.gitbooks.io/t…
typescript https://www.html.cn/doc/types…
typescript 进阶 https://www.jianshu.com/p/13a…
awesome https://github.com/dzharii/aw…
深入理解 TypeScript https://github.com/jkchao/typ… https://jkchao.github.io/type… https://github.com/basarat/ty…
TypeScript 入门指南（基础篇）https://juejin.im/post/5d3bb5…
TypeScript 入门指南 https://mp.weixin.qq.com/s/Oy…

React+redux+typescript https://github.com/piotrwitek…
https://github.com/fi3ework/b…
typescript-tutorial https://github.com/xcatliu/ty…
https://github.com/Lemoncode/…
https://github.com/rokoroku/r…

三千字讲清 TypeScript 与 React 的实战技巧

Immutablejs https://github.com/immutable-…

simditor https://github.com/mycolorway…

moment

mosca https://github.com/mcollina/m…
MQTT https://github.com/mqttjs/MQT…

javascript-mqtt-demo-wearingTip https://github.com/coolnameis…
面试官(7): 聊一聊 Babel? https://juejin.im/post/5c03b8…

learn-regex ★22k+
正则表达式 30 分钟入门教程
2019 年常用 JavaScript 正则大全
正则表达式不要背
2019 年 JS 正则大全(常用)

嗨，你真的懂 this 吗？

「前端进阶」彻底弄懂函数组合
函数式编程，真香
深入学习 javascript 函数式编程
一文带你了解 JavaScript 函数式编程
不要再尝试函数式编程了

【译】JavaScript 的工作原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
优秀 JavaScript 开发人员应掌握的 9 个技巧
浅拷贝与深拷贝
JS 中轻松遍历对象属性的几种方式
你不懂 JS（系列丛书）
前端开发变量命名系列 – JavaScript 篇
一文带你了解 JavaScript 函数式编程

前端模块化详解(完整版)
一口 (很长的) 气了解 babel
Promise 源码详解
最后一次搞懂 Event Loop

移动端适配深度探究
第三代移动端布局方案
移动端 1px 解决方案

lib-flexible https://github.com/amfe/lib-f…

Hilo – HTML5 互动游戏引擎

wechaty https://github.com/Chatie/wec…
wechatBot https://github.com/gengchen52…

webpack
webpack 官方文档
webpack 中文文档(https://webpack.docschina.org/)

前端构建秘籍
【Cute-Webpack】Webpack4 入门手册（共 18 章）

前端 er 了解 GraphQL，看这篇就够了
GraphQL 入门看这篇就够了
awesome-graphql

前端性能优化原理与实践
GMTC 大前端时代前端监控的最佳实践
你必须懂的前端性能优化
前端性能优化不完全手册
那些你不知道的 meta 标签
前端静态资源缓存最优解以及 max-age 的陷阱
node 实战前端缓存总结
浏览器缓存
彻底理解浏览器的缓存机制
前端异常监控解决方案研究 – 腾讯 CDC
从 0 到 1 的前端异常监控项目实战

https://github.com/BetterJS
https://github.com/iv-web/aeg…
https://github.com/RicardoCao…

捕获未处理的 Promise 错误方法
前端异常监控、上报及 js 压缩代码定位

阿里云监控 (网站性能、错误等监控)
growingio (网站访问量监控)
sentry (错误监控)
fundebug (错误监控)
gtmetrix (网站访问速度)
zanePerfor (网站访问速度)
pingdom (网站状况监控)

hiper *2k+

if 我是前端团队 Leader，怎么制定前端协作规范?
阿里大佬浅谈大型项目前端架构设计
年终回顾，为你汇总一份「前端技术清单」
8 年前端开发的知识点沉淀(不知道会多少字，一直写下去吧 …)
fullstack tutorial
五星推荐的系列文章清单
端动态化方案详细设计
让虚拟 DOM 和 DOM-diff 不再成为你的绊脚石
彻底理清前端单页面应用（SPA）的实现原理【精读源码】
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
使用 postMessage 解决 iframe 跨域通信问题
基于工程经验的『RESTful 接口设计规范』
RESTful API 编写指南
前端技术栈干货文章链接（精品）
新时代下前端工程师的推荐书籍和必备知识

微前端 https://www.cnblogs.com/zhuan… https://github.com/neuland/mi…
- 了解什么是微前端
- 微前端实践
- 无代码编程
- 基于 React & TypeScript & Webpack 的微前端应用模板
- 哪些技术会决定前端开发者的未来发展？
- 再看 2019 大前端技术趋势，Web OS 概念正落地
- Serverless For Frontend 前世今生
- 2019 年大前端技术趋势分析

可能是最全的前端动效库汇总

2018 最佳前端动效集锦

Echart
D3
Highchart
Antv

14 个最好的 JavaScript 数据可视化库
前端必看的数据可视化入门指南
一步步带你实现 web 全景看房——three.js
阿里基于 G6 和 React 打造的开源可视化图形编辑器——GGEditor

leetcode
leetcode 中国

数据结构与算法（三）—— 常见排序算法和 swift 实现
【从蛋壳到满天飞】JS 数据结构解析和算法实现 - 集合和映射
前端该如何准备数据结构和算法？
大家都是如何刷 LeetCode 的？

leetcode
LeetCodeAnimation *39k+

QuickJS

JavaScriptCore 全面解析
这一次，彻底弄懂 JavaScript 执行机制
你不知道的浏览器页面渲染机制
JavaScript 引擎是如何工作的？从调用栈到 Promise 你需要知道的一切

前端团队代码评审 CheckList 清单

vscode 这篇就够了
VSCode 折腾 log 插件
21 个 VSCode 快捷键，让代码更快，更有趣
VS Code 快速使用指南

spritejs (Draw graphics on a canvas through DOM-like APIs. Vue & React/Preact supported.)

javascript-testing-best-practices
[2018 前端自动化测试综述 [英]](https://medium.com/welldone-s…
[2019 前端自动化测试综述 [英]](https://medium.com/welldone-s…
[测试你的前端代码（介绍篇）[英]](https://hackernoon.com/testin…

站在程序员的角度测试
unit 测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试，测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。

jest
karma(Spectacular Test Runner for JavaScript)
mocha(simple, flexible, fun javascript test framework for node.js & the browser)
enzyme(JavaScript Testing utilities for React)
vue-test-utils(JavaScript Testing utilities for vue)

站在用户角度的测试
e2e 测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

cypress
nightwatch
puppeteer(Headless Chrome Node API)
Macaca
appium(app 测试)
Selenium

端到端测试哪家强？不容错过的 Cypress
Puppeteer E2E 测试入门
大前端神器安利之 Puppeteer

简单来说就是测试应用整体界面是否达到了 UI 设计图的要求。

hermione
PhantomCSS(archived)
gemini(DEPRECATED)

Chrome DevTools

去哪儿 yapi(支持接口文档、mock 和 api 自动化测试)
- 接口文档
- Json Schema 快速入门
- 【GitHub 项目推荐|YApi 打通前后端及 QA 可视化接口管理平台|神级项目】
rap2
swagger(https://swagger.io/)(https://github.com/swagger-api)
丁香园 api-mocker *998
大搜车 Easy-Mock *6k+
APIJSON(后端接口和文档自动化)
mockjs

去哪儿 Api 自动化测试实践
使用 YApi 管理 API 文档，测试，mock
YApi 新版如何查看 http 请求数据
自动更新 Swagger 接口数据到 YApi 平台
Jenkins+postman+newman 之 API 全自动化测试
Postman 调试技巧之接口签名
丁香园开源接口管理系统 – API Mocker
Swagger 从入门到精通
Swagger 与其他 API 文档编写工具对比

axios 中文文档翻译

饿了么的 PWA 升级实践

官网
mysqljs
21 分钟 MySQL 基础入门
2019-01-11 亲测 Navicat Premium for Mac 破解
MySQL 命令，一篇文章替你全部搞定
sequelize(An easy-to-use multi SQL dialect ORM for Node.js)
bookshelf(A simple Node.js ORM for PostgreSQL, MySQL and SQLite3 built on top of Knex.js)

mongoose 中文网

Redis 可视化工具

震惊了！原来这才是 kafka！
kafka 中文教程

mysql8.0 版本报错：Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol…

前端开发者必备的 Nginx 知识
多站点单点登录实现方案
【干货】Chrome 插件 (扩展) 开发全攻略
如何发布一款 Chrome App
- GayHub
- 打开莆田系医院网站，发出警告提醒、显示医院信息
从开发 2 个 Chrome 插件中学到的（对新手的 4 个提示和 6 个技巧）
chrome 开发官方文档
github 开发官方文档
【10 个基于 JavaScript 的机器学习实例】

face++(人脸识别)
前端物料中台
- 飞冰
- lugia
- 前端物料中台建设

↑ 返回目录 ↑

项目地址

目录

vue

官方

组件库或框架

文章

开源项目

react

官网

参考资料

组件库

框架

Demo

typescript

官网

参考资料

react+typescript demo

文章

常用库

数据

富文本编辑器

时间

物联网

demo

js

正则表达式

this

函数式编程

其他

es6

移动端

文章

常用库

h5 游戏

开源项目

微信公众号

实战项目

webpack

官网

文章

GraphQL

文章

性能与监控

文章

监控

开源库

文章

常用工具

开源库

高质文章

趋势

动效

工具库

demo

可视化

库

文章

数据结构与算法

官网

文章

开源库

js-core

库

文章

代码规范

工具

canvas

开源项目

测试

文章

单元测试

库

文章

e2e 测试

库

文章

视觉回归测试

库

性能测试

Just My Socks（注册教程内含优惠码）