日新月異的前端相關框架、工具等彙總清單
真的只是 單純 的想找一個地方記錄一下吶…(之前 收藏的內容太多,以至於都不好找了)
當然,我是絕不會告訴你們之所以非要擠點時間整理下,是因爲之前存的東西,全都找不到了!!!找不到了!!!找不到了!!!
隨時更新中…
前端框架
- Vue
- React
- AngularJS
- Bootstrap
- TypeScript:TypeScript是JavaScript類型的超級。至於存在理由,根本就不用我多說那~
- Lodash: 一個一致性、模塊化、高性能的 JavaScript 實用工具庫
在線開發工具集
- snack.expo Snack是一種瀏覽器內開發環境,您無需在手機或計算機上安裝任何工具即可構建Expo 體驗。
- codesandbox 是一個爲 Web 應用程序開發而構建的在線編輯器
- uupoop: 在線ps:圖片編輯等
思維工具(畫圖工具)
- ProcessOn 免費在線作圖、實時協作
- draw.io Create flow charts, process diagrams, org charts, UML diagrams, ER models, network diagrams, and much more. 說明: https://about.draw.io/
- xmind XMind 是一個全功能的思維導圖和頭腦風暴軟件,爲激發靈感和創意而生。作爲一款有效提升工作和生活效率的生產力工具,受到全球百千萬用戶的青睞。
- GitMind 免費視覺思維工具,簡化邏輯梳理,集思廣益,釋放創造力 在線腦圖、思維導圖、流程圖、工業設計、工程管理,一圖涵千面
設計稿工具
- 墨刀 遠程辦公好幫手 在線產品原型設計與協作平臺
- sketch 中文站點 是一款輕量、易用的矢量設計工具
- axure 是一款專業的快速原型設計工具
- dapollo Dapollo是一個基於Sketch的設計插件,內置了支付寶、淘寶、千牛等多套阿里小程序的設計資源,可以幫助你高效的完成設計工作。組件、模板、icon,只需要輕鬆拖拽,即可完成設計。同時對應的轉代碼功能更可以讓你設計開發一體化,提高協作效率。
設計稿轉化爲頁面代碼
- imgcook 由設計稿一鍵智能生成代碼
- Fusion Design
測試平臺
- luckyframe 開源測試平臺
多端統一開發方案
- taro 多端統一開發解決方案
狀態管理庫
腳手架
- Nuxt.js:基於 Vue.js 的通用應用框架
組件庫
- Ant Design: 螞蟻金服開發的基於 React 的PC端組件庫
- Ant Design Pro: 管理界面解決方案(基於Ant Design)
- Ant Design Mobile: 同上,基於 React 的移動端組件庫
- Vue Antd: 基本上就是拿ant Design來用的,基於vue的組件庫,但是這是個人的!
- iView: 一套基於 Vue.js 的高質量 UI 組件庫
- Element: 餓了麼開發的Element,一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫
- ZanUI: 組件庫,移動 (基於Vue.js2.0)、PC (基於React)、小程序
- 飛冰: 阿里出品的豐富模板一鍵創建解決方案。
- keenthemes:The Ultimate Multi-Demo Bootstrap Admin Theme
- vuetifyjs Vuetify 是一個 Vue UI 庫,包含手工製作的精美材料組件。不需要設計技能 - 創建令人驚歎的應用程序所需的一切都觸手可及。
- storybook Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
圖表庫
- highcharts: Highsoft AS公司開發的交互圖表庫展示
- Echarts: 百度開發的遵循 BSD 開源協議,免費商用圖表庫
- AntV: AntV 是螞蟻金服全新一代數據可視化解決方案,致力於提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。 G2 (基於可視化編碼的圖形語法)、G6 (解決流程圖和關係分析的圖表庫)、F2 (專爲移動端定製的一套開箱即用的可視化解決方案)
構建工具
微應用
- qiankun qiankun 是一個基於 single-spa 的微前端實現庫,旨在幫助大家能更簡單、無痛的構建一個生產可用微前端架構系統。
圖片相關
- dummyimage:動態圖片生成器,動態生成想要測試用的圖片。可以選擇尺寸、背景色、字體色、圖片格式、文本等,方便快速生成想要尺寸的圖片進行一些素材測試等
- tinypng: 使用智能有損壓縮技術來減少PNG文件的文件大小
- Clipping Magic: 摳圖,在線編輯圖片能夠快速的去掉背景
- AlloyImage:AlloyImage(AI)是一個基於html5技術的JS圖像處理庫,集成了一些方便快捷的圖像處理API,您可以將它引用到您的網頁中,結合css3等技術,做出一些之前無法做到的優美效果,或者,提供一個用JS編寫的在線圖像處理工具等。
svg相關
- icomoon: svg圖標合成,各種小圖標合成統一前綴等
- loading: 使用SVG / CSS / GIF / APNG 構建Ajax加載圖標
- Snap.svg: 爲現有的SVG內容和用Snap生成的SVG內容的動畫和操作提供了一個乾淨、精簡、直觀、功能強大的API
- svgo: 基於NodeJS的用於優化SVG矢量圖形文件的工具。馬上使用
日曆相關
- Date Range Picker:一個用於選擇日期範圍的JavaScript組件,應用Bootstrap CSS框架設計
- momentjs: 解析、驗證、操作和顯示日期和時間。
- dayjs: 類似momentjs,但比之較簡潔
- tinytime: 導出一個返回模板對象的函數
插件
- Swiper:移動端觸摸滑動插件
- Videojs: 視頻播放插件
- Mathjs: 處理number數據的js庫
- Popmotion:A functional, flexible JavaScript motion library
正則相關
- Regexper:正則表達式的可視化開源工具,直接輸入正則表達式就能用可視化顯示出來
- Regulex: 同上,正則可視化工具
- Debuggex: 同上,正則可視化工具,選項功能豐富
- FeHelper: Chrome 插件,可以進行字符串編碼那、正則那、代碼美化壓縮那、時間轉換、圖片轉換、頁面性能檢測等等等等
開發者工具
- Chrome 開發者工具:內置在Google Chrome中Web開發和調試工具
爬蟲利器
- Puppeteer:爬蟲利器及UI自動化測試
其他
博衆家之所長,說不定就能得到什麼啓示呢~
- Tencent AlloyTeam: 騰訊 AlloyTeam 團隊做的一些相關內容。自己看,不解釋
- EFE:百度 EFE(Excellent FrontEnd)技術體系,經過技術的發展,逐漸形成一套完善的前端技術體系。
- Qunar UED: 什麼基礎架構、靜態資源(第三方庫、前端構建工具等)等。在這裏就不一個個敘述了,自己去看吧
- 優圖OCR:識別文字