前端常用库及第三方插件

UI库

PC端

1. Ant Design （推荐）

   难度级别：中等

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

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

   网址：ant.design/index-cn

2. element-ui （推荐）

   难度级别：简单

   适用框架：vue2

   网址：element.eleme.cn/#/zh-CN/com…

3.element-plus（不推荐）

难度级别：简单

适用框架：vue3

注：很多bug，需要去修改

网址：element-plus.gitee.io/zh-CN/guide…

移动端：

1. Vant （推荐）

   难度级别：简单

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

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

   网址：vant-contrib.gitee.io/vant/v2/#/z…

2. vux （不推荐）

   难度级别：简单

   适用框架：vue

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

   网址：doc.vux.li/zh-CN/about…

3. uView（推荐）

   难度级别：简单

   适用框架：uniapp

   网址：www.uviewui.com/

第三方插件

1. echarts （推荐）

   难度级别：中

   作用：数据可视化表格

   网址：echarts.apache.org/examples/zh…

2. jsencrypt

   难度级别：简单

   作用：加密解密

   网址：github.com/travist/jse…

3. day.js

   难度级别：简单

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

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

4. js-base64

   难度级别：简单

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

   网址：www.npmjs.com/package/js-…

5. qrcodejs

   难度级别：简单

   作用：生成二维码

   网址：github.com/davidshimjs…

6. weapp-qrcode-canvas-2d

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

   网址：github.com/DoctorWei/w…

7. html2canvas

   难度级别：中

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

   注：不能在小程序上使用

   网址：html2canvas.hertzen.com/

8. Painter

   难度级别：中

   作用：小程序海报生成

   注：可以兼容各端小程序

   网址：github.com/Kujiale-Mob…

9. lodashjs

   难度级别：简单

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

   网址：www.lodashjs.com/

10. swiper

    难度级别：中

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

    github：github.com/nolimits4we…

    网址：www.swiper.com.cn/

11. Draggable

    作用：拖拽

    github：github.com/SortableJS/…

    网址：sortablejs.github.io/Vue.Draggab…

12. crypto-js

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

    github：github.com/brix/crypto…

13. vue-video-player

    作用：视频播放组件

    使用框架：vue

    github：github.com/surmon-chin…

    网址：github.surmon.me/vue-video-p…

14. uglifyjs

    作用：代码压缩

    github：github.com/mishoo/Ugli…

    网址：lisperator.net/uglifyjs/

15. javascript-obfuscator

    作用：代码混淆

    github：github.com/javascript-…

    网址：obfuscator.io/

16. Fabric.js

    作用：操作canvas画图

    GitHub：github.com/fabricjs/fa…

    网址：fabricjs.com/

17. Animate.css

    作用：动画库

    GitHub：github.com/animate-css…

    网址：animate.style/

18. ml5-library

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

    注：底层是TensorFlow.js

    GitHub：github.com/ml5js/ml5-l…

    网址：ml5js.org/

    学习网址：blog.csdn.net/fribbler/ar…

19. printJs

    作用：打印服务

    GitHub：github.com/crabbly/pri…

    网址：printjs.crabbly.com/

20. clipboard

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

    GitHub：github.com/zenorocha/c…

    网址：clipboardjs.com/