文章分類

2020年Web前端最新導(dǎo)航（常見前端框架、前端大牛）

發(fā)布時(shí)間：2021-06-22 15:26:45

本文最初發(fā)表于博客園，并在GitHub上持續(xù)更新前端的系列文章。歡迎在GitHub上關(guān)注我，一起入門和進(jìn)階前端。

前言

本文列出了很多與前端有關(guān)的常見網(wǎng)站、博客、工具等，整體來看比較權(quán)威。有些東西已經(jīng)過時(shí)了，我就不列出來了。

學(xué)是一方面，也是最主要的方面；但還有一個(gè)作用，比如，“這個(gè)前端框架你都不知道啊”、“這個(gè)前端大牛你都沒聽說過啊” ，此時(shí)，這份清單就能起到作用了。如果你能把清單里列出的內(nèi)容都了解下，逼格也會(huì)高很多。

技術(shù)社區(qū)

GitHub：https://github.com/

高質(zhì)量的內(nèi)容創(chuàng)作和分享平臺(tái)。

請(qǐng)記住，作為一個(gè)碼農(nóng)，GitHub 代表了你的名片。

stackoverflow：https://stackoverflow.com/

遇到技術(shù)問題請(qǐng)先Google，很多答案都能在 stackoverflow 上找到。

技術(shù)博客

掘金：https://juejin.im/

掘金已經(jīng)被前端同學(xué)攻陷了。目前來看，國內(nèi)的很多優(yōu)質(zhì)前端文章，都在掘金上。

如果你剛開始寫前端博客，可以考慮在掘金上發(fā)文章。當(dāng)然，文章最好在掘金、博客園、知乎上做同步。

博客園：https://www.cnblogs.com/

一個(gè)很純粹的技術(shù)博客平臺(tái)。

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

很多做技術(shù)的同學(xué)也開始玩知乎了，阿里的不少前端大牛在知乎上就非常活躍。

CSDN：https://www.csdn.net/

廣告太多，但奈何你這么老牌。

segmentfault：https://segmentfault.com/

比較低調(diào)的技術(shù)博客平臺(tái)。

GitHub 排名統(tǒng)計(jì)

GitHub 中國區(qū)排名：https://githuber.cn/search?language=JavaScript

這個(gè)網(wǎng)站雖然比較小眾，但排名還是相對(duì)比較準(zhǔn)的。

GitHub 中國區(qū)排名：http://githubrank.com/

這個(gè)排名很久沒更新了，早就不準(zhǔn)了。

GitHub 全球排名：https://gitstar-ranking.com/
GitHub trending（官網(wǎng)推薦—）：https://github.com/trending

你的項(xiàng)目要是能上 GitHub trending，絕對(duì)火得一塌糊涂。

資訊

虎嗅網(wǎng)：https://www.huxiu.com/
36氪：https://36kr.com/
利器：https://liqi.io/

采訪優(yōu)秀的創(chuàng)造者，邀請(qǐng)他們來分享工作時(shí)所使用的工具。

灣區(qū)日?qǐng)?bào)：https://wanqu.co/

每天推送 5 篇優(yōu)質(zhì)英文文章。

Solidot：https://www.solidot.org/
品玩：https://www.pingwest.com/
極客公園：http://www.geekpark.net/

框架

Vue.js：https://cn.vuejs.org/
React：https://reactjs.org/
Angular：https://angular.cn/
AngularJS：https://angularjs.org/
Koa：https://koa.bootcss.com/

基于 Node.js 平臺(tái)的下一代 Web 開發(fā)框架。

Express：http://www.expressjs.com.cn/

基于 Node.js 平臺(tái)，快速、開放、極簡(jiǎn)的 Web 開發(fā)框架。

Egg：https://eggjs.org/zh-cn/

Egg 繼承于 Koa。

Koa 是一個(gè)非常優(yōu)秀的框架，然而對(duì)于企業(yè)級(jí)應(yīng)用來說，它還比較基礎(chǔ)。而 Egg 選擇了 Koa 作為其基礎(chǔ)框架，在它的模型基礎(chǔ)上，進(jìn)一步對(duì)它進(jìn)行了一些增強(qiáng)。

Electron：https://www.electronjs.cn/

Electron（原名為Atom Shell）是GitHub開發(fā)的一個(gè)開源js框架。它允許使用Node.js（作為后端）和Chromium（作為前端）完成桌面GUI應(yīng)用程序的開發(fā)。

也就是說，我們可以用 js 語言開發(fā)客戶端軟件了。其實(shí)呢，VS Code 這個(gè)客戶端軟件就是用 js 語言寫的。

Redux：https://www.redux.org.cn/

Redux 是 JavaScript 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。

ReactNative：https://reactnative.cn/

使用JavaScript編寫原生移動(dòng)應(yīng)用。

mpvue：http://mpvue.com/

基于 Vue.js 的小程序開發(fā)框架。

UI框架

Bootstrap：http://www.bootcss.com/
ElementUI：http://element-cn.eleme.io/

基于 Vue.js 的組件庫。

iView：https://www.iviewui.com/

一套基于 Vue.js 的高質(zhì)量 UI 組件庫。

Ant Design：https://ant.design

基于 React 的 UI 組件庫，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品。官網(wǎng)推出了 Ant Design pro 作為示例，可以看看。

Ant Design Mobile：https://mobile.ant.design/

一個(gè)基于 Preact / React / React Native 的移動(dòng)端 UI 組件庫。

Ant Design of Vue：https://vue.ant.design/docs/vue/introduce-cn/

Ant Design 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。

類庫

jQuery：http://jquery.com/
Zepto.js：https://zeptojs.com/

可以理解成是移動(dòng)端的 jQuery。

ECharts：https://echarts.baidu.com/

使用 JavaScript 實(shí)現(xiàn)的開源可視化庫。

CSS

Sass：https://sass-lang.com/

Sass 是成熟、穩(wěn)定、強(qiáng)大的 CSS 擴(kuò)展語言。入門文檔可以看：http://sass.bootcss.com/

Less：http://lesscss.org/

給 CSS 加點(diǎn)料。入門文檔可以看：https://less.bootcss.com/

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

構(gòu)建

NPM：https://www.npmjs.com/
Yarn：https://yarnpkg.com/zh-Hans/
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 工具和插件轉(zhuǎn)換 CSS 代碼的工具

調(diào)試抓包

whistle：https://wproxy.org/whistle/

代理抓包工具，很好很強(qiáng)大。

Fiddler：https://www.telerik.com/fiddler

代理抓包工具。

Mock數(shù)據(jù)

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

編輯器 && IDE

VS Code：https://code.visualstudio.com/
Sublime Text：https://www.sublimetext.com/
WebStorm：https://www.jetbrains.com/webstorm/
Atom：https://atom.io/

編碼規(guī)范

Bootstrap編碼規(guī)范：https://codeguide.bootcss.com/
es6編程風(fēng)格：http://es6.ruanyifeng.com/#docs/style
Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

靜態(tài)站點(diǎn)搭建工具

Hexo：https://hexo.io/zh-cn/
VuePress：https://www.vuepress.cn/
GitBook：https://www.gitbook.com/

圖標(biāo)

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/

原型設(shè)計(jì)工具

墨刀：https://modao.cc/

工具

CanIUse：https://caniuse.com/

瀏覽器兼容性查詢。前端同學(xué)必須要知道。

國家企業(yè)信用信息公示系統(tǒng)：http://www.gsxt.gov.cn

通過這個(gè)網(wǎng)站，我們可以查到任何一家公司的基本信息（成立時(shí)間、法定代表人等）。如果你在這個(gè)網(wǎng)站上沒有找到某公司的信息，放心吧，這個(gè)公司一定是個(gè)騙子。

ProcessOn：https://www.processon.com/

在線制作流程圖。推薦。

幕布：https://mubu.com

極簡(jiǎn)大綱筆記、一鍵生成思維導(dǎo)圖。非常好用。

JSON格式化：http://www.bejson.com/
草料二維碼：https://cli.im/
短鏈生成：http://www.dh6.ink/
GitHub短網(wǎng)址：https://git.io/
圖片壓縮：https://www.yasuotu.com/
在線PS：https://www.photopea.com/
圖片在線裁剪：https://www.asqql.com/gifc/
多數(shù)據(jù)源IP地址查詢：https://haoip.cn/
Gif添加字幕：http://www.yingjingtu.com/
Photoshop的投影參數(shù)轉(zhuǎn)換為 CSS代碼：https://psd2css.mezw.com/

將Photoshop設(shè)計(jì)文件圖層中的混合選項(xiàng)參數(shù)快速轉(zhuǎn)換為CSS3代碼，以節(jié)省前端開發(fā)人員的時(shí)間和精力。

Get Emoji：https://emoji.svend.cc/
圖片轉(zhuǎn)Ascii：http://picascii.com/
視頻轉(zhuǎn)GIF：https://github.com/vvo/gifify
OCR文字識(shí)別：https://app.xunjiepdf.com/ocr

團(tuán)隊(duì)

騰訊AlloyTeam：http://www.alloyteam.com/
騰訊社交用戶體驗(yàn)ISUX：https://isux.tencent.com/
淘寶FED | 淘寶前端團(tuán)隊(duì)：http://taobaofed.org/
阿里巴巴國際UED：http://www.aliued.com/
京東 | 凹凸實(shí)驗(yàn)室：https://aotu.io/
餓了么前端:https://zhuanlan.zhihu.com/ElemeFE
百度前端研發(fā)部FEX：http://fex.baidu.com/
360 | 奇舞團(tuán)：https://75team.com/
知道創(chuàng)宇FED：https://knownsec-fed.com/

前端大牛

阮一峰（螞蟻金服）

GitHub：https://github.com/ruanyf
博客：http://www.ruanyifeng.com/blog/

尤雨溪

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

張?chǎng)涡瘢v訊）

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

黃峰達(dá)/Phodal Huang（ThoughtWorks）

GitHub：https://github.com/phodal
博客：https://www.phodal.com/
知乎：https://www.zhihu.com/people/phodal

賀師俊/Hax（百姓網(wǎng)）

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/

李靖/小胡子哥（淘寶網(wǎng)）

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

流形

（阿里巴巴數(shù)據(jù)技術(shù)與產(chǎn)品部前端團(tuán)隊(duì)負(fù)責(zé)人）

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

總結(jié)

如果你有發(fā)現(xiàn)新的內(nèi)容，歡迎在 GitHub 上提交 issues。