打造前端瑞士軍刀，爲你開發路上披荊斬棘

時間 2019-11-07

標籤打造前端瑞士軍刀爲你開發路上披荊斬棘简体版

原文原文鏈接

主要是爲了幫助你們蒐集一下前端開發中要用到的一些東西，打造一個前端開發工具字典，方便你們查閱。css

篇幅比較長，先給你們放一張腦圖，看看本身的興趣在哪，或者說本身須要補充哪方面的，能夠從右邊的導航欄查看，也能夠直接打開我作的工具網站查看，分級明顯。前端工具集~html

但願你們能夠對這個字典進行補充，在下方積極留言，我會及時將你們補充的添加進來，謝謝各位。前端

技術庫

Vue

vue的官網 - 官網怎麼能少vue
nuxt - Vue的SSRjava
Vue-router - Vue的路由node
Vue CLI - Vue的cli，幫助你迅速搭建本身的vue項目python
Vuex - Vue的狀態管理react
VuePress - 能幫助你快速搭建本身的博客jquery
element-ui - 餓了麼出品的UI庫，主要用於搭建PC網頁webpack
iView - 另一款搭建PC網頁的UI庫，越弄越好了

主要說上面一些，具體的一些vue插件能夠從下面這個連接找：

Vue插件集合

React

由於平時用react用的比較少，但願小夥伴在評論中進行補充，而後我再添加進來。

React 官方文檔
React 中文文檔
Mobx 中文文檔 - 狀態管理，react和vue的都有，可是更多的被用到react中，目前不少公司都用mobx替換了redux
Redux 中文文檔 - 也是react的狀態管理
React Native 文檔 - 跨端開發，目前Flutter也比較火，跨端的競爭對手
ReactNative 學習指南 - 新玩意層出不窮... 對於能持續學習的童鞋，這是個美好的時代
antd - 螞蟻開源的react的UI庫，用起來很舒服，不虧是用戶體驗部出的。目前市面上的UI庫，我感受這個說第二，沒有敢說第一的吧。
antd-pro - antd 阿里官方解決方案，拉了代碼就能夠用，很是方便

其餘的小夥伴們補充一下吧，我後續加進來，很是感謝。

小程序

WePY - 支持組件化的小程序開發框架
mpvue - 基於 Vue.js 的小程序開發框架，從底層支持 Vue.js 語法和構建工具體系，目前支持多端小程序，如：微信，支付寶，百度
Taro - 使用 React 的方式開發小程序的框架，同時支持生成多端應用
chameleon - 一套代碼運行多端，一端所見即多端所見
MPX - 滴滴開源的加強型小程序框架，深度性能優化，支持跨小程序平臺開發，徹底兼容原生小程序組件
uni-app - 能夠兼容多端小程序，好比支付寶，微信小程序，還能夠開發快應用和native

更多資源請參考微信小程序開源資源彙總

CSS

PostCSS - 推薦大漠的文章《PostCSS深刻學習》，學習完postcss以後，什麼sass，less都不須要了
Hover.css - 不少鼠標 Hover 態的效果，能夠給產品學習一下
Animate.css - CSS的動畫庫，咱們能夠把源碼弄下來，而後學習一下CSS3的動畫
HINT.css - 一款很是小巧的提示框效果
hamburgers - 簡單的動畫庫，讓 Click(or Tap) 變得美妙
EnjoyCss - 能夠自定義一些 css 樣式，而後直接獲取代碼

跨終端

Flutter 官方文檔 - 目前比較火的跨終端開發方案，感受會大火
Flutter 社區中文資源 - 會有不少Flutter的開發資源
electron - 跨終端開發，能夠寫桌面應用

Node

Mongoose - 讓 NodeJS 更容易操做 Mongodb 數據庫
koa - 強烈推崇，next洋蔥圈的機制很是好用
pm2 - 是一個帶有負載均衡功能的 Node 應用的進程管理器
supervisor - 監控 Node 代碼，自動重啓
socket.io - 預計 Node 的實時框架聊天室、頁遊等對實時性有高要求的較適用
Mocha - Node 裏最經常使用的測試框架
shelljs - 寫 Node 時不免須要用 shell 去操做些神馬 shelljs 是基於 Node 的 shell 工具，API 及其簡單

其餘技術庫

webpack - 這個不用說，你們都知道
velocity.js - 基於 js 的動畫庫，能夠和 jquery 完美結合
Cleave.js - 用於格式化文本框輸入內容的插件
clipboard.js - 複製內容到剪切板的插件
hcharts - 兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫
echarts - 百度維護的圖標庫
select2 - 下拉框第三方庫，隨着愈來愈多的 ui 庫集成下拉菜單以後，這個基本不多用了
datatables - 表格庫

還有更多的資源，歡迎你們投稿。

技術博客

大牛博客

阮一峯 - ES6 教程寫的真的很棒
技術胖 - 前端各類免費視頻教學
張鑫旭 - 成名多年的、高產的前端大溼，CSS猛人
翁天信官網 - 一個輟學在家自學的天才少年，各類旅行漂亮的照片，還有他的我的介紹
翁天信博客 - 他的官網中能夠找到他博客的地址，可是有點不顯眼，因此就列出來了
surmon - 不知道怎麼稱呼，可是是一個很牛 B 的人，點開博客就知道了
廖雪峯 - 有關於 python，JS，git 的教程
美團技術團隊 - 新美大的技術口碑這些年作的挺好，尤爲在 高可用 方面，推薦關注。
W3Cplus - 大漠(《圖解 CSS3》做者)在國內的影響力槓槓的
淘寶前端團隊 - 內容涵蓋 Web 和 Node，要深度有深度，要廣度有廣度
奇舞團博客 - 堅持是最寶貴的，別人的奇舞週刊早已通過百期了
大搜車前端 - 文章質量高，尤爲是 Node，Vue 方向的
百度 FEX - 表明做 FIS、UEditor、WebUploader、KityMinder
騰訊全端 AlloyTeam - 騰訊 Web 前端團隊
酷殼 - CoolShell - 享受編程和技術所帶來的快樂，涉及範圍：Android , Bash, book, C++, CodeReview, Coding, CSS, Database, Debug, ebook, Game, Go, Google, HTML, IE, Java, Javascript, jQuery, Linux。。。
前端開發博客 - 聚集了不少前端有用的東西

搭建博客的工具

VuePress - 能幫助你快速搭建本身的博客，樣式還不算很那看，可是更多的能夠用做搭建文檔。
jekyll：將純文本轉化爲靜態網站和博客。因爲環境依賴的問題，因此安裝起來可能稍費勁那麼一點。
hexo：快速、簡潔且高效的博客框架，照着文檔分分鐘就能夠在本地跑起來。
Next：是hexo的一個主題。

hexo或者jekyll配合github pages 進行博客的搭建很是方便快捷，這兩種方式都有不一樣的主題，上github上一搜一大片，hexo上手會比較快，本身的博客一開始也是用hexo+next搭建的，後續發現了jekyll比較好的一個主題，因此換成了jekyll，你們能夠參考一下。

個人博客：www.shiyanping.top/

我本身用的主題：github.com/Shiyanping/…

搭建成功後，直接寫markdown，而後發佈到github，就能夠咯。當時還可使用掘金當作本身的博客。

開發工具

bootCDN - 各類開源庫的 cdn 地址，加快開源庫訪問速度
Awesomes.cn - 前端各類資源庫，想用的這裏說不定都有
熊貓圖片壓縮 - 一個壓縮圖片的網站，很牛，一次能夠壓縮 70%左右，還不失真，不過不購買的話壓縮有限制，一次最多十張，每張有大小限制（忘記多大了，好像是 5M，好像是 10M）
淘寶 npm 鏡像 - 加快 npm 包下載速度，其實更建議使用nrm，能夠切換本身當前網絡最快的源
jquery 插件庫 - 各類 jquery 的插件，有的須要花錢，有的不用，花錢也很便宜哦
時間戳格式化
站長工具 - 裏面包含了不少有用的工具，html、css、js 壓縮，解壓縮。html 轉 markdown，IP 地址查詢
JSON 代碼高亮
草料二維碼 - 用於根據連接生成二維碼
cubic-bezier - 用於生成貝塞爾曲線，css中能夠有效地使用
CSS icon - 使用css寫的icon，能夠減小iconfont和圖片所佔的大小，其實主要是好玩，能夠研究研究怎麼寫的
codepen - 在網頁上快速寫代碼，能夠免去打開編輯器去敲代碼，能夠解決電腦上沒有 IDE，可是你想寫代碼的狀況（那還寫個毛線，😀）
Unicode 編碼轉換
RGB 顏色和十六位顏色轉化工具
石墨文檔 - 能夠多人協做的文檔及表格
縮短連接 - 若是你以爲本身的連接太長，可使用新浪的縮短連接服務，將 url 進行縮短
在線圖片格式轉換
iconfont - 阿里維護的 iconfont 裏面有不少漂亮的 icon
自動添加 css 前綴 - 若是沒有使用 gulp 或者 webpack 等打包工具的話，爲了 css 兼容，可使用這個，css，less，scss 均可以用
壓縮 js，css，html
base64 加密解密
css3 中的陰影生成工具 - 可讓 UI 根據這個去寫陰影，後續直接 copy 代碼出來使用便可
變量起名 - 幫助你解決起名字的尷尬

學習資源

學習文檔

印記中文 - 各類中文文檔，與官方文檔同步
Pro Git - git 各類命令介紹，簡單實用
前端規範 - 由我本身維護的，主要參考騰訊的，😆
Markdown 教程 - Markdown 語法
JSDoc - JS 註釋中文文檔，註釋寫得好有助於其餘人閱讀使用
前端面試圖譜 - 前端知識，有助於複習面試基礎知識

學習網站

web 前端導航 - 由騰訊維護的 web 前端資料庫，裏面包含各類前端的知識
百度前端技術學院
慕課網
騰訊課堂
github - 最大的同性交友網站，被微軟收購以後用戶數有所減小
FreeCodeCamp - 適合剛學前端的同窗學習
codewars - 學習語言的好網站，代碼戰爭，聽着名字就很叼
優達學城
MDN - 無數的資源再等着你探索，追標準和新特性確定得重點關注的網站。
極客時間 - 知識付費。較熱門的方向都有很是乾貨的課程，目前大多數的課程不太適合小白，可是很是適合有經驗的程序員進階。

輔助工具/軟件

chrome插件

Adblock Plus：屏蔽廣告專用，能夠設置白名單
JSONView：自動識別 JSON 文件進行格式化
Wappalyzer：查看當前網頁使用了哪些技術，幹什麼的慢慢體會吧
WEB 前端助手：包括 JSON 格式化、二維碼生成與解碼、信息編解碼、代碼壓縮、美化、頁面取色、Markdown 與 HTML 互轉、網頁轉爲圖片等，功能很強大，很適合前端
Octotree：能夠在 github 上能夠生成側邊欄更易查看
Wide Github：會將 github 內容區域變寬
掘金：新打開的 tab 頁會出現掘金的首頁，有助於學習哦
Vue.js devtools：用於調試 vue
React Developer Tools：用於調試 react
CSSViewer：打開後能夠吸收除 google 之外網頁的元素樣式
Vimium：打開後在網頁上使用 vim，F 打開
Axure RP Extension for Chrome：前端在 chrome 上看 Axure 導出的文件
Postman：模擬請求，很強大，還能夠敲代碼