uniapp 可視化開發_吐血整理系列 前端開發工具、元件庫集合

前言

Coding 應當是一生的事業，而不僅僅是 30 歲的青春?

大廠前端開發工具、元件庫的集合，今天，它來了，它踏着七彩祥雲來了！！！

企業級中背景

Ant Design

• 官網位址：https://ant.design/index-cn

螞蟻金服開源 React 元件庫首選，企業級背景直接用它就完事兒，沒毛病~

元件很齊全，開發起來簡直神速~

飛冰

• 官網位址：https://ice.work/

可視化快速搭建企業級中背景前端應用，值得試一試~

Ant Design Vue

• 官網位址：https://www.antdv.com/docs/vue/introduce-cn/

如果你們公司技術棧是 Vue.js，用這個就完事兒了~

跨端架構

Taro

• 官網位址：https://nervjs.github.io/taro/

React 開發方式的跨端開發架構，目前已支援，微信/百度/位元組跳動/支付寶/QQ 小程式、快應用、H5、React Native 等多端的應用。

創業公司必備，最近剛出的 Taro3.0，真的超級強大。

Taro UI

• 官網位址：https://taro-ui.jd.com/

基于上面 Taro 跨端架構開發的多端 UI 元件庫，不得不說，京東還是考慮得周到，點贊！

使用 Taro，就可以實作全站技術棧統一了~

uni-app

• 官網位址：https://uniapp.dcloud.io/

Vue.js 開發方式的跨端開發架構，個人還是更推薦 Taro，特别是現在出了 Taro3.0 ,真的很強大，創業公司必備~

資料可視化

AntV

• 官網位址：https://antv.gitee.io/zh#products

資料可視化中的王者，别猶豫了，用它就對了~

PC 端，移動端都給你考慮到了~

圖檔處理

Image Cropper

• 官網位址：http://elemefe.github.io/image-cropper/

給圖檔顯示一個裁剪框，裁剪框允許使用者調整大小和位置，常用來做使用者自定義頭像的裁剪功能。

img-2

• 官網位址：https://github.com/RevillWeb/img-2

使用 web worker 做的圖檔懶加載~

不過針對自己的公司，怪怪建議像懶加載、預加載這種東西，還是自己做一套比較好哦~

Fabric.js

• 官網位址：http://fabricjs.com/

有時候會碰到圖檔合成類的需求，這個庫是基于 canvas 開發滴，支援拖拽，有類似需求的小夥伴可以試試~

nsfwjs

• 官網位址：https://github.com/infinitered/nsfwjs

這個庫就有點東西了，鑒定圖檔是否符合要求，這個我沒用過，不過感覺會有點用~

不過像這種不符合要求的圖檔過濾，真正企業裡面，都是風控團隊來處理滴，不需要我們前端來搞~

Squoosh

• 官網位址：https://squoosh.app/

谷歌線上圖檔壓縮，怪怪經常用~

不過真正項目裡面，公司前端基建小分隊一般都會封裝一套圖檔壓縮類的元件~

SpriteJS

• 官網位址：https://spritejs.org/#/

360 團隊開發的，高性能圖形系統，它能夠支援 web、node、桌面應用和小程式的圖形繪制和實作各種動畫效果，對 360 的東西還是挺有好感，齊舞周刊有點東西~

UI 樣式

imgcook

• 官網位址：https://imgcook.taobao.org/docs

很大程度上減輕了前端的工作量！！！，支援 Sketch、PSD、靜态圖檔直接轉 code，也就是大家常說的 ui2code。可以直接轉成代碼！！

沒用過的小夥伴，一定要去試試！！！

animate.css

• 官網位址：https://github.com/daneden/animate.css

這大概是最全的 css 動畫庫了~

direction-reveal

• 官網位址：https://nigelotoole.github.io/direction-reveal/#

根據滑鼠進入位置，展現從不同方向 展現 hover 效果，pc 端還是會遇到這樣的需求。

支援很多種效果，基本上包含了日常所有的情況~

lax.js

• 官網位址：https://github.com/alexfoxy/laxxx

上面的動畫庫，配上這個滾動特效庫，簡直完美

壓縮完隻有 2kb，很輕量

purifycss

• 官網位址：https://github.com/purifycss/purifycss

可以幫助你移除沒使用到的 css，也算是一個小優化點~

Vue.js

vue-virtual-scroller

• 官網位址：https://github.com/Akryum/vue-virtual-scroller

基于 vue 的虛拟清單無限滾動，性能還不錯~

怪怪公司基建小分隊自己做了一套無限滾動加載滴，沒用這個~

Vue.Draggable

• 官網位址：https://github.com/SortableJS/Vue.Draggable

以前怪怪實習的時候，就遇到了營運需要對背景一些元素進行拖拽的場景，就是用的這個~

JavaScript

eslint

• 官網位址：https://github.com/eslint/eslint

這玩意的出現解決了大部分強迫症程式員的問題，統一 JavaScript 代碼風格

這不用猶豫，公司的代碼規範必須統一啊~

JavaScript Obfuscator Tool

• 官網位址：https://obfuscator.io/

JavaScript 代碼混淆工具，該混淆時就混淆~

lodash

• 官網位址：https://lodash.com/

lodash 是一套工具庫，内部封裝了字元串、數組、對象等常見資料類型的處理函數。

很實用，用過你就知道了~

jlb-tools

• 官網位址：https://jielibang.github.io/jtools/index.html

前端 js 工具庫: 封裝常用的工具函數，如日期格式化、浏覽器判斷等，提高開發效率

如果是自己的公司，這種東西一定要有一套封裝到腳手架裡面，對于開發很省事兒~

jscodeshift

• 官網位址：https://github.com/facebook/jscodeshift

将 js 内容解析成 AST 文法樹，然後提供一些便利的操作接口，友善我們對各個節點進行更改

有時候，需要去做一些底層的進階處理，這個東西就能派上用場了~

移動端

Swiper

• 官網位址：https://swiperjs.com/

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

fullPage

• 官網位址：https://alvarotrigo.com/fullPage/zh/#page2

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

PhotoSwipe

• 官網位址：https://github.com/dimsemenov/photoswipe

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

Swiper + PhotoSwipe + fullPage 這 3 個一配合，微信裡常見的 H5 頁完全不是問題哒！！！

HAMMER.JS

• 官網位址：http://hammerjs.github.io/

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

其它常用小工具

Day.js

• 官網位址：https://github.com/iamkun/dayjs

用 JavaScript 解析、驗證、操作和顯示日期和時間，很友善哦~

和 Moment.js 一樣的 API，但是比 Moment.js 輕量、小很多

axios

• 官網位址：https://github.com/axios/axios

目前最常見的請求庫，強推~

Can I use

• 官網位址：https://caniuse.com

開發必備，檢視浏覽器對各種新特性的相容情況

果然，浏覽器還不支援接水怪，傷心

regexr

• 官網位址：https://regexr.com/

日常自己寫一個正則的時候，這個網站很爽~

nodeppt

• 官方網址：https://github.com/ksky521/nodePPT

用 node 寫 ppt，就很有格局~

以這個工具結束，是希望大家都能做得一手好 ppt，都能夠順利晉升！！！

總結

上面的元件庫，工具都是怪怪精心挑選滴，希望能幫助小夥伴們減輕工作量，happy work！！

喜歡的小夥伴加關注，點在看哦，感恩??

公衆号：前端食堂

掘金：童歐巴

知乎：童歐巴

這是一個終身學習的男人，他在堅持自己熱愛的事情，歡迎加入前端食堂，和這個男人一起開心的變胖～

推薦閱讀：

今天我更新了Chrome 87 ，發現了這麼多新特性！

精選VS Code高頻插件，讓你多陪陪npy！

   在看和轉發是莫大鼓勵❤️