插件集合 | web

# 插件集合

# 通用插件

js-cookie: 处理 cookie 插件
js-file-download: 下载插件地址
downloadjs: 下载插件注意是否支持视频的合理处理
console:第三方集成无法看到 控制台 时使用 [npm install vconsole]
lazyload: 懒加载 lazyload (opens new window)
clipboard: 复制粘贴 clipboard (opens new window)
moment 日期格式 moment (opens new window)
dayjs Moment.js轻量化方案 dayjs (opens new window)
mockjs mock数据 mockjs (opens new window)
json-server: 模拟数据库，更方便增删改查
svg-captcha 验证码生成svg-captcha (opens new window)
nodemailer 发送邮件:nodemailer (opens new window)
lodash 前端工具库: lodash (opens new window) 官网 (opens new window)
marked markdown简单的插件 marked (opens new window)
video.js 播放器插件 video.js (opens new window)
xgplayer 西瓜视频
mitt 文件监听触发事件，不依赖任何框架mitt (opens new window)
decimal.js: js计算，精度丢失问题解决decimal.js (opens new window)
qs:处理url转成对象或者对象转成url拼接&的字符qs (opens new window)
querystringify:比qs更轻便处理数据使用的库
pubSub-js:一个用于发布订阅的插件pubSub-js (opens new window)
clipboard:复制粘贴插件clipboard (opens new window)
fastclick:解决移动端300ms延迟fastclick (opens new window)
cheerio:主要是为了用在服务器端(或客户端xss防范)需要对DOM进行操作的地方
xss:防范xss攻击插件
localforage:本地存储优雅降级方案
gsap:一个动画库官网 (opens new window)
uuid:前端想生成一个独一无二的id时可以使用
yjs:一个CRDT 基础库，主要用作协同开发
prettiter:代码格式化工具
commitlint:代码提交校验格式
pako:传输数据大的时候可压缩解压插件
esprima:用于多用途分析的 ECMAScript 解析基础结构
superagent：一个可用于浏览器端和Node服务端的小型渐进式客户端HTTP请求库
puppeteer ：自动化浏览器爬虫可用
postcss-px-to-viewport：px转vw插件插件 (opens new window)
is-hotkey:兼容性不错的快捷键插件插件 (opens new window)
@emtion:css样式库官网 (opens new window)
highlight.js：https://www.npmjs.com/package/highlight.js
modernizr:检测浏览器对HTML5CSS3兼容性的插件modernizr (opens new window)
du-i8n：国际化

# 图形插件

threejs
babylon
cesium
Photo Sphere Viewer 全景图 插件地址 (opens new window)
html2canvas 一键复制页面具体内容 html2canvas (opens new window)
xmind-embed-viewer：xmind预览插件
ExcelJS
xlsx
@cyntler/react-doc-viewer：可以处理很多格式的预览，但是其中有的必须是公网地址的路径，所以如果考虑私密的话，不能采用。且控制台一直在报一些警告(不推荐)
pdf-dist:pdf预览插件
@vue-office：text (opens new window)
~~react-file-viewer:效果极差，避坑，注意它还不能在一个页面同时存在两个组件，pdf预览控制台报错，execl预览下过差且交互报错~~
docx-preview
@excalidraw/excalidraw:手绘风格画板
tldraw:画板组件，商用不可隐藏水印
cropper.js：图片裁剪插件，默认的话，创建的实例每次裁剪的时候会带着时间戳去请求一次图片，这样图片比较大的情况下，就会影响性能。有个参数配置可以关闭closeorigin:false，这样就可以不加时间戳，但是此时需要后端去配合处理图片的cors跨域问题，注意的是，最后图片img标签需要加上crossOrigin='anonymous' ，可以避免裁剪的时候又闪烁现象。

   <img
    id='xxxx'
    src='xxxx'
    crossOrigin='anonymous'
/>

embed-drawio:有两种模式实现流程图，一是独立编辑器（回退到初始数据再点一次就是直接无数据了），二是本地搭建drawio系统后交互（虽然需要自己搭建后台，但是不存在无法保存和回退丢失数据的情况）
react-drawio:流程图插件：配置按钮存在问题，~~自己的url会存在问题，官网的则没有问题~~这个问题和版本有关，测试在V26.0.16版本中就避免了这个问题，此外它还支持UML类图插件。可以利用libs参数控制左侧应该展示的控件。（存在一定的样式，以及图片会被转成base64，如果做接口上传要额外注意）

# vue插件

@riophae/vue-treeselect: select多层级选择插件介绍 (opens new window) 使用
vue-croppa: 图片上传及多功能插件介绍 (opens new window)
vue-lazyload: 懒加载 (opens new window)
vue-print-nb: 选中内容打印 (opens new window)
vue-virtual-scroller:vue虚拟列表滚动插件 (opens new window)
vue-virtual-scroll-list:vue虚拟列表滚动插件 (opens new window)
vxe-table：vue表格专属插件 (opens new window):存在滚动条抖动问题？
vue-lazyload: vue懒加载 (opens new window)
vuex-persistedstate:vuex数据持久化 (opens new window)
vuex-persist:vuex数据持久化 (opens new window)
umyui: 一款支持vue2和虚拟表格的ui umyui (opens new window)
vue-json-viewer:在页面上优化json文件样式
vue-clipboard2:复制粘贴插件
vue2-datepicker:解决vue2elementui插件不能在range模式下切换年份的插件

# react插件

redux 地址 (opens new window)
react-redux 地址 (opens new window)
redux-thunk 地址 (opens new window)
redux-saga 地址 (opens new window)
mobx：数据流管理插件
ahooks：react hooks插件

# node插件

fs-extra：node文件处理模块
spark-md5: 加密插件，比md5方法更多,支持增量计算,用来处理切片上传hash值计算
formidable:处理上传文件图片

# egg插件

egg-router-group : 后端路由接口分组
egg-mongoose : 连接mongdb使用
egg-validate : 校验接口数据

# css插件

animate 动画 css库地址 (opens new window)
normalize.css 浏览器默认css一致性 [cnpm i normalize.css --save]
reset.css 重置浏览器样式
@emotion/css ：css in js

放大镜 →