前端资源汇总

项目地址

github.com/abc-club/fr…

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

持续更新中……

求star

求star

求star

vue

官方

• 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-form-making

文章

• 逐行分析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

官网

• React官网 reactjs.org/
• React中文网 react.docschina.org/
• React-router reacttraining.com/react-route…
• redux redux.js.org/introductio…
• redux中文 cn.redux.js.org/
• umi umijs.org/
• dva dvajs.com
• immutable github.com/immutable-j…

• react-devtools-tutorial

参考资料

• React 源码解析

• awesome github.com/enaqx/aweso…
• react-hook github.com/streamich/r…
• React.js 小书 juejin.cn/post/684490…
• React入门看这篇就够了 segmentfault.com/a/119000001…
• 掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入) juejin.cn/post/684490…
• react demo gist.github.com/sAbakumoff/…
• 一文速览React全栈 juejin.cn/post/684490…
• React同构与极致的性能优化 segmentfault.com/a/119000001…
• 阿里开源项目 segmentfault.com/a/119000001…

• 一文速览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
• React Router 中文文档（一）
• React Router 4 简易入门

组件库

• ant-design ant.design/index-cn
• ant-design-mobile mobile.ant.design/index-cn
• react-intl
• rc-form github.com/react-compo…

• nivo(React 数据可视化库)

框架

• umi umijs.org/
• 飞冰 ice.work/
• next.js github.com/zeit/next.j…
• beidou github.com/alibaba/bei…
• egg-react-ssr github.com/ykfe/egg-re…
• react-server github.com/redfin/reac…

• Vulcan.js(The full-stack React+GraphQL framework)

Demo

• realworld ★31k+

typescript

官网

参考资料

• typescript中文 www.tslang.cn/
• typescript中文 ts.xcatliu.com/ zhongsp.gitbooks.io/typescript-…
• typescript www.html.cn/doc/typescr…
• typescript进阶 www.jianshu.com/p/13a4eb100…
• awesome github.com/dzharii/awe…
• 深入理解 TypeScript github.com/jkchao/type… jkchao.github.io/typescript-… github.com/basarat/typ…
• TypeScript入门指南（基础篇） juejin.cn/post/684490…
• TypeScript 入门指南 mp.weixin.qq.com/s/Oyawvb5BD…?

react+typescript demo

• React+redux+typescript github.com/piotrwitek/…

• github.com/fi3ework/bl…

• typescript-tutorial github.com/xcatliu/typ…

• github.com/Lemoncode/r…

• github.com/rokoroku/re…

文章

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

常用库

数据

• Immutablejs github.com/immutable-j…

富文本编辑器

• simditor github.com/mycolorway/…

时间

• moment

物联网

• mosca github.com/mcollina/mo…
• MQTT github.com/mqttjs/MQTT…

文章

• 一步步搭建物联网系统

demo

• javascript-mqtt-demo-wearingTip github.com/coolnameism…
• 面试官(7): 聊一聊 Babel? juejin.cn/post/684490…

js

正则表达式

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

this

• 嗨，你真的懂this吗？

函数式编程

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

其他

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

开源项目

• layout-ui(可视化布局 纯css布局 Layout-UI)

es6

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

移动端

文章

• 移动端适配深度探究
• 第三代移动端布局方案
• 移动端1px解决方案
• 拿到一份设计稿，我该如何进行移动端开发？
• 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

常用库

• lib-flexible github.com/amfe/lib-fl…

h5游戏

开源项目

• Hilo - HTML5 互动游戏引擎

微信公众号

实战项目

• wechaty github.com/Chatie/wech…
• wechatBot github.com/gengchen528…

webpack

官网

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

文章

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

GraphQL

文章

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

性能与监控

文章

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

监控

开源库

• github.com/BetterJS
• github.com/iv-web/aegi…
• github.com/RicardoCao-…
• github.com/MriLiuJY/mo…

文章

• 捕获未处理的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 编写指南
• 前端技术栈干货文章链接（精品）
• 新时代下前端工程师的推荐书籍和必备知识
• 一个全栈增长工程师的练手项目集

趋势

• 微前端 www.cnblogs.com/zhuanzhuanf… github.com/neuland/mic…

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

动效

工具库

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

demo

• 2018 最佳前端动效集锦

可视化

库

• Echart
• D3
• Highchart
• Antv

文章

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

数据结构与算法

官网

• leetcode
• leetcode中国

文章

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

开源库

• leetcode
• LeetCodeAnimation *39k+

js-core

库

• QuickJS

文章

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

代码规范

• 前端团队代码评审 CheckList 清单

工具

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

canvas

开源项目

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

测试

文章

• javascript-testing-best-practices
• 2018 前端自动化测试综述 [英]
• 2019 前端自动化测试综述 [英]
• 测试你的前端代码（介绍篇）[英]

单元测试

站在程序员的角度测试 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测试

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

库

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

文章

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

视觉回归测试

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

库

• hermione
• PhantomCSS(archived)
• gemini(DEPRECATED)

性能测试

Chrome DevTools

api测试

库

• 去哪儿yapi(支持接口文档、mock和api自动化测试):100:
  • 接口文档
  • Json Schema 快速入门
  • 【GitHub项目推荐｜YApi打通前后端及QA可视化接口管理平台｜神级项目】
• rap2
• swagger(swagger.io/)(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

• 饿了么的 PWA 升级实践

数据库

mysql

• 官网
• 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)

mongodb

• mongoose中文网

redis

• Redis可视化工具

kafka

• 震惊了！原来这才是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
  • 前端物料中台建设

↑ 返回目录 ↑