前端常用库及第三方插件

前端常用库及第三方插件

UI库

PC端

1. Ant Design （推荐）

   ​ 难度级别：中等

   ​ 适用框架：最火的三大框架都可以

   ​ 注：如果你是vue爱好者不是很建议，ant写法类似于react

   ​ 网址：https://ant.design/index-cn

2. element-ui （推荐）

   ​ 难度级别：简单

   ​ 适用框架：vue2

   ​ 网址：https://element.eleme.cn/#/zh-CN/component/installation

​2.element-plus（不推荐）

	难度级别：简单
	
	​适用框架：vue3
	
	​注：很多bug，需要去修改
	
	​网址：https://element-plus.gitee.io/zh-CN/guide/design.html

移动端：

1. Vant （推荐）

   难度级别：简单

   适用框架：vue2、vue3、react、微信小程序

   注：该UI库主要偏向于电商

   网址：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

2. vux （不推荐）

   难度级别：简单

   适用框架：vue

   注：不建议适用，改框架是个人开发者开发维护；很多组件都需要自行去修改源码；比如：输入框清除

   网址：https://doc.vux.li/zh-CN/about/before-using-vux.html

3. uView（推荐）

   难度级别：简单

   适用框架：uniapp

   网址：https://www.uviewui.com/

第三方插件

1. echarts （推荐）

   难度级别：中

   作用：数据可视化表格

   网址：https://echarts.apache.org/examples/zh/index.html

2. jsencrypt

   难度级别：简单

   作用：加密解密

   网址：https://github.com/travist/jsencrypt

3. day.js

   难度级别：简单

   作用：解析、验证、操作时间

   网址：Day.js中文网 (fenxianglu.cn)

4. js-base64

   难度级别：简单

   作用：base64加密和解密，以及Uint8Array等操作

   网址：https://www.npmjs.com/package/js-base64

5. qrcodejs

   难度级别：简单

   作用：生成二维码

   网址：https://github.com/davidshimjs/qrcodejs

6. weapp-qrcode-canvas-2d

   作用：微信小程序生成二维码（兼容uniapp）

   网址：https://github.com/DoctorWei/weapp-qrcode-canvas-2d

7. html2canvas

   难度级别：中

   作用：可以将dom生成图片（可以理解为截图）

   注：不能在小程序上使用

   网址：https://html2canvas.hertzen.com/

8. Painter

   难度级别：中

   作用：小程序海报生成

   注：可以兼容各端小程序

   网址：https://github.com/Kujiale-Mobile/Painter

9. lodashjs

   难度级别：简单

   作用：对js的数组、对象等操作

   网址：https://www.lodashjs.com/

10. swiper

    难度级别：中

    作用：适用于各端轮播图；目前是功能最强大、最多的轮播图

    github：https://github.com/nolimits4web/Swiper

    网址：https://www.swiper.com.cn/

11. Draggable

    作用：拖拽

    github：https://github.com/SortableJS/Vue.Draggable

    网址：https://sortablejs.github.io/Vue.Draggable/#/simple

12. crypto-js

    作用：AES加密，解密；ecb和cbc模式

    github：https://github.com/brix/crypto-js

13. vue-video-player

    作用：视频播放组件

    使用框架：vue

    github：https://github.com/surmon-china/vue-video-player

    网址：https://github.surmon.me/vue-video-player/

14. uglifyjs

    作用：代码压缩

    github：https://github.com/mishoo/UglifyJS

    网址：https://lisperator.net/uglifyjs/

15. javascript-obfuscator

    作用：代码混淆

    github：https://github.com/javascript-obfuscator/javascript-obfuscator

    网址：https://obfuscator.io/

16. Fabric.js

    作用：操作canvas画图

    GitHub：https://github.com/fabricjs/fabric.js

    网址：http://fabricjs.com/

17. Animate.css

    作用：动画库

    GitHub：https://github.com/animate-css/animate.css

    网址：https://animate.style/

18. ml5-library

    作用：人工自能识别；且可以自行训练机器人

    注：底层是TensorFlow.js

    GitHub：https://github.com/ml5js/ml5-library

    网址：https://ml5js.org/

    学习网址：https://blog.csdn.net/fribbler/article/details/108728011

19. printJs

    作用：打印服务

    GitHub：https://github.com/crabbly/print.js

    网址：https://printjs.crabbly.com/

20. clipboard

    作用：将浏览器内容复制到剪切板

    GitHub：https://github.com/zenorocha/clipboard.js

    网址：https://clipboardjs.com/