前端常見庫-框架-工具

框架

• 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 平臺的下一代 Web 開發框架。

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

基於 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應用程序的開發。

也就是說，我們可以用 js 語言開發客戶端軟件了。其實呢，VS Code 這個客戶端軟件就是用 js 語言寫的。

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

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。

• ReactNative：https://reactnative.cn/

使用JavaScript編寫原生移動應用。

• mpvue：http://mpvue.com/

基於 Vue.js 的小程序開發框架。

UI框架

• Bootstrap：http://www.bootcss.com/

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

基於 Vue.js 的組件庫。

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

一套基於 Vue.js 的高質量 UI 組件庫。

• 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 實現，開發和服務於企業級後臺產品。

類庫

• jQuery：http://jquery.com/

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

可以理解成是移動端的 jQuery。

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

使用 JavaScript 實現的開源可視化庫。

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/

構建

• 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 工具和插件轉換 CSS 代碼的工具

調試抓包

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

代理抓包工具，很好很強大。

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

代理抓包工具。

Mock數據

• 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/

編碼規範

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

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

• Airbnb Javascript Style Guide：https://github.com/airbnb/javascript

靜態站點搭建工具

• Hexo：https://hexo.io/zh-cn/

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

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

設計工具

• 墨刀：原型設計工具。網址：https://modao.cc/

• 藍湖：一款產品文檔和設計圖的在線協作平臺。網址：https://lanhuapp.com

• PxCook（像素大廚）：高效易用的自動標註工具。軟件下載鏈接：https://www.fancynode.com.cn/pxcook

圖標

• 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/

工具

• CanIUse：https://caniuse.com/

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

• 國家企業信用信息公示系統：http://www.gsxt.gov.cn

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

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

在線製作流程圖。推薦。

• 幕布：https://mubu.com

極簡大綱筆記、一鍵生成思維導圖。非常好用。

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

• 草料二維碼：https://cli.im/

• 短鏈生成：http://www.sina.lt

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

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

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

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

• 多數據源IP地址查詢：https://haoip.cn/

• 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

團隊

• 騰訊AlloyTeam：http://www.alloyteam.com/

• 騰訊社交用戶體驗ISUX：https://isux.tencent.com/

• 淘寶FED | 淘寶前端團隊：http://taobaofed.org/

• 阿里巴巴國際UED：http://www.aliued.com/

• 京東 | 凹凸實驗室：https://aotu.io/

• 餓了麼前端:https://zhuanlan.zhihu.com/ElemeFE

• 百度前端研發部FEX：http://fex.baidu.com/

• 360 | 奇舞團：https://75team.com/

• 知道創宇FED：https://knownsec-fed.com/