前端資源彙總

項目地址

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 開發小程序、H五、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.im/post/58c7a1…
• React入門看這篇就夠了 segmentfault.com/a/119000001…
• 掘金最污的 React16.x 圖文視頻教程(2萬5千字長文-慎入) juejin.im/post/5d085b…
• react demo gist.github.com/sAbakumoff/…
• 一文速覽React全棧 juejin.im/post/5d0ee2…
• 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.im/post/5d3bb5…
• 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.im/post/5c03b8…

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
  • 前端物料中臺建設

↑ 返回目錄 ↑