WEB前端學習工具，資源技術彙總（IDE集，框架集，類庫集...）

該篇主要收集了一些前端經常使用的編輯器、框架以及一些經常使用工具，幫助前端開發者更快成長。

IDE集
VSCode：https://code.visualstudio.com/

SublimeText：https://www.sublimetext.com/

WebStorm：https://www.jetbrains.com/webstorm/

Atom：https://atom.io/

Hbuilderx/Hbuilder：https://www.dcloud.io/hbuilderx.html

微信開發者工具（小程序開發）

QQ開發者工具（小程序開發）

支付寶開發者工具（小程序開發）

hbuilderx（小程序開發、網頁開發、移動端開發）

構建集
NPM：https://www.npmjs.com/

簡單易操做的包管理器，前端開發必備。

Yarn：https://yarnpkg.com/zh-Hans/

和npm差很少也是簡單易操做的包管理器，二者選擇其中一個。

Webpack：https://webpack.js.org/

強大的包轉換器和打包

Gulp：https://www.gulpjs.com.cn/

Babel：https://babeljs.io/

代碼轉換器

ESLint：https://cn.eslint.org/

可組裝的JavaScript和JSX檢查工具。

PostCSS：https://www.postcss.com.cn/
用 JavaScript 工具和插件轉換 CSS 代碼的工具

框架集
Vue.js：https://cn.vuejs.org/

Nuxtjs：https://zh.nuxtjs.org

Nuxt.js 是一個基於 Vue.js 的通用應用框架。經過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染，簡稱服務端渲染。
React：https://reactjs.org/

Angular：https://angular.cn/

AngularJS：https://angularjs.org/

Nodejs：https://nodejs.org/zh-cn/
基於JS開發的一個性能超過PHP的的服務器，這是做爲一個前端走向全棧工程師必學的東西。
Express：http://www.expressjs.com.cn/
基於 Node.js 平臺，快速、開放、極簡的 Web 開發框架。

Koa：https://koa.bootcss.com/

基於 Node.js 平臺的下一代 Web 開發框架。

Egg：https://eggjs.org/zh-cn/
Egg 繼承於 Koa。

Koa 是一個很是優秀的框架，然而對於企業級應用來講，它還比較基礎。而 Egg 選擇了 Koa 做爲其基礎框架，在它的模型基礎上，進一步對它進行了一些加強。

Electron：https://www.electronjs.cn/
Electron（原名爲Atom Shell）是GitHub開發的一個開源js框架。它容許使用Node.js（做爲後端）和Chromium（做爲前端）完成桌面GUI應用程序的開發。

Nw:https://nwjs.org.cn/

Nwjs和Electronjs都是同一個做者不一樣地方開發的前者主要由微軟維護，然後者由GitHub團隊維護，可是目前愈來愈多的人都在使用Electron。

例如VS Code 這個客戶端軟件就是用 Electron語言寫的，而微信開發者工具就是用Nw配合react配合開發的。

Redux：https://www.redux.org.cn/
Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。

ReactNative：https://reactnative.cn/
使用JavaScript編寫原生移動應用。

WebGL：http://www.hewebgl.com/

主要用於網絡遊戲開發，是國內較爲牛逼的同窗開發的。

tensorflow：https://tensorflow.google.cn/

TensorFlow 是一個端到端開源機器學習平臺。它擁有一個全面而靈活的生態系統，其中包含各類工具、庫和社區資源，可助力研究人員推進先進機器學習技術的發展，並使開發者可以輕鬆地構建和部署由機器學習提供支持的應用。

多端開發的框架

uniapp：https://uniapp.dcloud.io/

uni-app 是一個使用 Vue.js 開發全部前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、H五、以及各類小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。

Taro：https://taro.aotu.io/

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。使用 Taro，咱們能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信 / 京東 / 百度 / 支付寶 / 字節跳動 小程序、快應用、H五、React-Native 等）運行的代碼。

mpvue：http://mpvue.com/
基於 Vue.js 的小程序開發框架。

kbone: https://developers.weixin.qq.com/miniprogram/dev/extended/kbone/

Kbone 是一個致力於微信小程序和 Web 端同構的解決方案。

一些類庫集
jQuery：http://jquery.com/

Zepto.js：https://zeptojs.com/

能夠理解成是移動端的 jQuery。

ECharts：https://echarts.baidu.com/
使用 JavaScript 實現的開源可視化庫。

tween.js：http://www.createjs.cc/tweenjs/

用來調整和動畫HTML5和Javascript屬性，提供了簡單而且強大的tweening接口。

EaselJS ：http://www.createjs.cc/easeljs/

使HTML5 Canvas標籤變得更簡單。用於建立遊戲，生成藝術做品，和處理其餘高級圖形化等有着很友好的體驗。

SoundJS：http://www.createjs.cc/soundjs/

提供了簡單而強大的API來處理音頻。經過插件來執行實際的音頻實現，簡單直接的處理聲音。

PreloadJS：http://www.createjs.cc/preloadjs/

用來管理和協調相關資源加載的類庫，它能夠方便的幫助你預先加載相關資源。

openlayers：https://openlayers.org/

一個高性能的、功能豐富的庫，知足您的全部映射需求。使得在任何網頁中放置動態地圖變得很容易。它能夠顯示從任何源加載的地圖塊、矢量數據和標記。開發OpenLayers是爲了進一步利用各類地理信息。它是徹底免費的，開源JavaScript，在2子句BSD許可下發布(也稱爲FreeBSD)。

數據庫
MongoDB：https://www.mongodb.com/
MongoDB是一個文檔數據庫，這意味着它將數據存儲在相似於JSON的文檔中。咱們認爲這是思考數據的最天然的方式，而且比傳統的行/列模型更有表現力和更強大的功能。
Mongoose：https://mongoosejs.com/
Mongoose是一個MongoDB的框架便於更好的操做數據庫

CSS
Sass：https://sass-lang.com/
Sass 是成熟、穩定、強大的 CSS 擴展語言。入門文檔能夠看：http://sass.bootcss.com/

Less：http://lesscss.org/
給 CSS 加點料。入門文檔能夠看：https://less.bootcss.com/

Stylus：http://stylus-lang.com/

UI框架
Bootstrap：http://www.bootcss.com/

ElementUI：http://element-cn.eleme.io/

基於 Vue.js 的組件庫。

iView：https://www.iviewui.com/
一套基於 Vue.js 的高質量 UI 組件庫。

VUX：https://vux.li/

一個湊合的 Vue.js 移動端 UI 組件庫（由我的維護）

cube-ui：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

cube-ui 是基於 Vue.js 實現的精緻移動端組件庫。

Muse-UI：https://muse-ui.org/#/zh-CN

Muse UI 基於 Vue2.0 開發，Vue2.0是當下最快的前端框架之一，小巧，api友好，可用於開發的複雜單頁應用

vant：https://youzan.github.io/vant/#/zh-CN/

輕量、可靠的移動端 Vue 組件庫

Layui：https://www.layui.com/

由職業前端傾情打造，面向全層次的先後端開發者，低門檻開箱即用的前端 UI 解決方案

MUI：https://dev.dcloud.net.cn/mui/

最接近原生APP體驗的高性能前端框架

Ant Design：https://ant.design
基於 React 的 UI 組件庫，主要用於研發企業級中後臺產品。官網推出了 Ant Design pro 做爲示例，能夠看看。

Ant Design Mobile：https://mobile.ant.design/
一個基於 Preact / React / React Native 的 移動端 UI 組件庫。

Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/
Ant Design 的 Vue 實現，開發和服務於企業級後臺產品。

CDN加速器

BootCDN: https://www.bootcdn.cn/
穩定、快速、免費的前端開源項目 CDN 加速服務
共收錄了 3599 個前端開源項目

調試集

whistle：https://wproxy.org/whistle/
代理抓包工具，很好很強大。

Fiddler：https://www.telerik.com/fiddler
代理抓包工具。

編碼規範

Bootstrap編碼規範：https://codeguide.bootcss.com/

es6編程風格：http://es6.ruanyifeng.com/#docs/style

AirbnbJavascriptStyleGuide：https://github.com/airbnb/javascript

強大的技術學習網站
MDN：https://developer.mozilla.org/zh-CN/docs/Web
w3schools：https://www.quanzhanketang.com/
w3school：https://www.w3school.com.cn
w3cschool：https://www.w3cschool.cn/
菜鳥教程：https://www.runoob.com/
開源中國：https://www.oschina.net/project/lang/28/javascript
smashingmagazine：https://www.smashingmagazine.com/
HTML中文網：http://www.css88.com
前端亂燉：http://www.html-js.com/
愛思資源網：http://www.aseoe.com/
掘金APP
CSDN網站及APP
segmentFauultAPP

字體圖標集
Font Awesome：http://www.fontawesome.com.cn/

Iconfont：https://www.iconfont.cn/

icomoon：https://icomoon.io/

EasyIcon：https://www.easyicon.net/

icons8：https://icons8.cn/

IconStore：https://iconstore.co/

iconninja：http://www.iconninja.com/

web字體
webfont：https://www.webfont.com/onlinefont/index

MOKE數據
Easy Mock：https://www.easy-mock.com

切圖工具
PS
Pxcook(像素大廚)：https://www.fancynode.com.cn/pxcook

原型設計工具
墨刀：https://modao.cc/
Mockplus：直接搜索下載
uxpin：https://www.uxpin.com/

靜態站點生成工具集
Hexo：https://hexo.io/zh-cn/

VuePress：https://www.vuepress.cn/

GitBook：https://www.gitbook.com/

GitHubpage：https://pages.github.com/

API接口
聚合數據：https://www.juhe.cn/
和風天氣：https://www.heweather.com/
訊飛開放平臺：https://www.xfyun.cn/
網易雲音樂接口：https://binaryify.github.io/NeteaseCloudMusicApi/#/
心知天氣：https://www.seniverse.com/
餓了麼接口：https://github.com/bailicangdu/node-elm/blob/master/API.md

前端大牛們
阮一峯（螞蟻金服）

GitHub：https://github.com/ruanyf

博客：http://www.ruanyifeng.com/blog/

尤雨溪（VUE做者）

GitHub：https://github.com/yyx990803

博客：http://blog.evanyou.me/

知乎：https://www.zhihu.com/people/evanyou

玉伯

GitHub：https://github.com/lifesinger

博客：https://github.com/lifesinger/blog

知乎：https://www.zhihu.com/people/lifesinger

司徒正美（去哪兒）

GitHub：https://github.com/RubyLouvre

博客：http://www.cnblogs.com/rubylouvre/

知乎：https://www.zhihu.com/people/si-tu-zheng-mei

張鑫旭（騰訊）

GitHub：https://github.com/zhangxinxu

博客：https://www.zhangxinxu.com/

知乎：https://www.zhihu.com/people/iamzhangxinxu

迷渡

GitHub：https://github.com/justjavac

知乎：https://www.zhihu.com/people/justjavac.com

羨轍 | Ovilia

GitHub：https://github.com/Ovilia

知乎：https://www.zhihu.com/people/ovilia

雲謙（陳成）

GitHub：https://github.com/sorrycc

博客：https://sorrycc.com/

雲謙裝了啥：https://github.com/sorrycc/awesome-tools

偏右

GitHub：https://github.com/afc163

知乎：https://www.zhihu.com/people/afc163

黃峯達/Phodal Huang（ThoughtWorks）

GitHub：https://github.com/phodal

博客：https://www.phodal.com/

知乎：https://www.zhihu.com/people/phodal

賀師俊/Hax（百姓網）

GitHub：https://github.com/hax

博客：http://johnhax.net/

知乎：https://www.zhihu.com/people/he-shi-jun

EGOIST

博客：https://egoist.sh/

GitHub：https://github.com/egoist

冴羽

GitHub：https://github.com/mqyqingfeng

博客：https://github.com/mqyqingfeng/Blog

知乎：https://www.zhihu.com/people/qing-feng-yi-yang

小爝

GitHub：https://github.com/xiaojue

知乎：https://www.zhihu.com/people/xiao-jue-83/

李靖/小鬍子哥（淘寶網）

GitHub：https://github.com/barretlee

博客：https://www.barretlee.com/

知乎：https://www.zhihu.com/people/barretlee/

cangdu

GitHub：https://github.com/bailicangdu
Jackson Tian

GitHub：https://github.com/JacksonTian

博客：http://jacksontian.org/

題葉（餓了麼、前 Teambition）

GitHub：https://github.com/jiyinyiyong

博客：http://tiye.me/

楊健（今日頭條）

GitHub：https://github.com/hardfist

知乎：https://www.zhihu.com/people/hardfist

其餘工具

程序員的工具箱：https://tool.lu/

有八十個在線小工具特別強悍，是我較爲喜歡的一個。

CanIUse：https://caniuse.com/
瀏覽器兼容性查詢。前端同窗必需要知道。

幕布：https://mubu.com
極簡大綱筆記、一鍵生成思惟導圖。很是好用。

JSON格式化：http://www.bejson.com/

短鏈生成：http://www.dh6.ink/

GitHub短網址：https://git.io/

圖片壓縮：https://www.yasuotu.com/

在線PS：https://www.photopea.com/

圖片在線裁剪：https://www.asqql.com/gifc/

Gif添加字幕：http://www.yingjingtu.com/

Photoshop的投影參數轉換爲 CSS代碼：https://psd2css.mezw.com/

將Photoshop設計文件圖層中的混合選項參數快速轉換爲CSS3代碼，以節省前端開發人員的時間和精力。

Get Emoji：https://emoji.svend.cc/

圖片轉Ascii：http://picascii.com/

視頻轉GIF：https://github.com/vvo/gifify

OCR文字識別：https://app.xunjiepdf.com/ocr

學UI網：http://www.xueui.cn/design/online-tools

該內容主要收集於網絡和日常本身用到的一些工具，若是想學習前端開發的同窗，你能夠先學習HTML、CSS和JS基礎打牢後，能夠學習一些庫和框架，前端經常使用的庫、框架、UI上面都已經貼出，你能夠按照該技術棧進行學習而不是漫無目的去晚上找各類資料，學框架啃文檔作小demo會學的更快更牢。

專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享學習方法和須要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到WEB前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）