前端必備框架/工具

LuckRain7發表於2020-03-30

持續更新中.......

1. 響應式框架

Vue

漸進式 JavaScript 框架

官網:cn.vuejs.org/

vue

React

用於構建使用者介面的 JavaScript 庫

官網:react.docschina.org/

React

2. 資料視覺化框架

Echarts

ECharts,一個使用 JavaScript 實現的開源視覺化庫,可以流暢的執行在 PC 和移動裝置上,相容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴向量圖形庫 ZRender,提供直觀,互動豐富,可高度個性化定製的資料視覺化圖表。

官網:www.echartsjs.com/zh/index.ht…

Echarts

AntV

AntV 是螞蟻金服全新一代資料視覺化解決方案,致力於提供一套簡單方便、專業可靠、無限可能的資料視覺化最佳實踐。

官網:antv.gitee.io/zh

AntV

3. 跨端框架

React Native

使用JavaScript和React編寫原生移動應用

官網:reactnative.cn/

rn

Weex

Weex 是一個可以使用現代化的 Web 技術開發高效能原生應用的框架。

官網:weex.apache.org/zh/

Weex

Taro

Taro 多端統一開發解決方案

官網:taro.aotu.io/

Taro

uni-app

uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套程式碼,可釋出到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。

官網:uniapp.dcloud.io/

uni

4. 企業級中後臺

Ant Design Pro

開箱即用的中臺前端/設計解決方案

官網:pro.ant.design/index-cn

Ant Design Pro

飛冰

簡單而友好的前端研發體系 、海量可複用物料,搭配 IDE 極速構建前端應用

官網:ice.work/

飛冰

5. UI

Element

一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫

官網:element.eleme.cn/#/zh-CN

Element

Ant Design

企業級產品設計體系,創造高效愉悅的工作體驗 - 阿里

官網:ant.design/index-cn

Ant Design

Cube UI

基於 Vue.js 實現的精緻移動端元件庫

官網:didi.github.io/cube-ui/#/z…

前端必備框架/工具

Taro UI

一套基於 Taro 框架開發的多端 UI 元件庫

官網:taro-ui.jd.com/#/

前端必備框架/工具

6. CSS 處理

Sass

2007,最早最成熟的CSS前處理器,有兩種語法,分別以 .sass 和 .scss 為副檔名。SCSS是Sass 3引入的新語法,完全相容CSS3,並繼承了Sass的強大功能,和CSS語法結構更接近

網址: www.sass.hk/

sass

Less

2009,受Sass影響大,以 .less 為副檔名

網址: lesscss.cn/

less

Stylus

2010,來自Node.js社群,主要用來給Node專案進行CSS預處理支援,以 .styl 為副檔名

網址: stylus.bootcss.com/

Stylus

animate.css

? A cross-browser library of CSS animations. As easy to use as an easy thing. (css 動畫庫)

網址: github.com/daneden/ani…

animate

7. 圖片處理

cropperjs

JavaScript image cropper (圖片裁剪)

網址: github.com/fengyuanche…

img-2

圖片懶載入

網址: github.com/RevillWeb/i…

Fabric.js

基於 canvas 開發,支援拖拽圖片合成。

網址: github.com/fabricjs/fa…

SpriteJS

A cross platform high-performance graphics system (360 團隊開發的,跨平臺的高效能圖形系統,它能夠支援 web、node、桌面應用和小程式的圖形繪製和實現各種動畫效果 )

網址: github.com/spritejs/sp…

8. 常用工具包

fetch

Web 端http庫

網址:github.com/github/fetc…

axios

易用、簡潔且高效的http庫。node Web 端通用

網址:github.com/axios/axios

regexr

正則

網址:【 https://github.com/gskinner/regexr 】

lodash

lodash 是一套工具庫,內部封裝了字串、陣列、物件等常見資料型別的處理函式。

網址:[ https://lodash.com/ ]

purifycss

Remove unused CSS. Also works with single-page apps. (可以幫助你移除沒使用到的 css,也算是一個小優化點~ )

網址: github.com/purifycss/p…

9. NB的東西!!

imgcook

由設計稿一鍵智慧生成程式碼

網址: imgcook.taobao.org/

10. Vue

Vue-Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度整合,讓構建單頁面應用變得易如反掌。

網址: router.vuejs.org/zh/

Vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。

網址: vuex.vuejs.org/zh/

Vue CLI

?️ Vue.js 開發的標準工具

網址: cli.vuejs.org/zh/

Vue CLI

VuePress

Vue 驅動的靜態網站生成器

網址: www.vuepress.cn/

VuePress

vue-virtual-scroller

基於 vue 的虛擬列表無限滾動,效能還不錯~

網址: https://github.com/Akryum/vue-virtual-scroller

Vue.Draggable

對元素進行拖拽

網址: https://github.com/SortableJS/Vue.Draggable

11. React

12. 移動端

Swiper

主要用來解決移動端觸控滑動,像什麼輪播圖啊,上下滑動啊,用它就對了~

網址:[ https://swiperjs.com/ ]

fullPage

非常好用的全屏滑動庫,去官網看 demo 就能感受到了~

網址: [ https://alvarotrigo.com/fullPage/zh/#page2 ]

PhotoSwipe

圖片預覽元件,支援移動端,相對上面元件庫裡面自帶的,比較輕量~

Swiper + PhotoSwipe + fullPage 這 3 個一配合,微信裡常見的 H5 頁完全不是問題噠!!!?

網址:[ https://github.com/dimsemenov/photoswipe ]

HAMMER.JS

移動端手勢庫,挺不錯滴~

網址:[ https://github.com/hammerjs/hammer.js ]

待整理

direction-reveal

lax.js

nodeppt

相關文章