前端常用插件

功能

VueUse

VueUse 是一个基于组合式 API的实用函数集合

https://vueuse.pages.dev/guide/

@unhead/vue

Unhead 是一款适用于任何框架的文档头管理器，旨在提高性能和提供令人愉悦的开发人员体验。

https://unhead.unjs.io/setup/vue/installation

copy-to-clipboard

简单的模块公开复制功能，该功能将尝试使用 execCommand 并回退到 IE 特定的 clipboardData 接口，最后采用具有适当文本内容和消息的通常提示。

https://www.npmjs.com/package/copy-to-clipboard

nprogress

精简进度条

https://www.npmjs.com/package/nprogress

pinia-plugin-persistedstate

可配置的 Pinia 存储持久化插件

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

numeral

用于格式化和处理数字的 javascript 库。

https://numeraljs.com/

轮播图 Swiper

Swiper是纯javascript打造的滑动特效插件， 支持PC端、移动端

https://www.swiper.com.cn/

动画库Animate CSS

强大的跨平台的预设css3动画库，内置了很多典型的css3动画，兼容性好使用方便

https://caniuse.com

D3js

自定义程度更高

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作。

https://www.d3js.org.cn

Three

实现的 3D 可视化库， 基于 WebGL

https://threejs.org/docs/index.html#manual/zh/introduction/Installation

Heatmap

热力图

https://www.patrick-wied.at/static/heatmapjs/

timeago

显示(天、小时、分)之前效果，为了有更好的用户体验，xx time ago在很多产品里应用。i18n支持。文件小于2KB。

https://www.npmjs.com/package/timeago

mathjs

Math.js 是一个适用于 JavaScript 和 Node.js 的综合数学库。它具有灵活的表达式解析器，支持符号计算，带有大量内置函数和常量，并提供集成解决方案来处理不同数据类型，如数字、大数、复数、分数、单位和矩阵。功能强大且易于使用。

https://mathjs.org/

操作cookie

https://github.com/js-cookie/js-cookie

Rxjs

RxJS是一组模块化的库，用于使用 JavaScript 中的可观察集合和组合来组合异步和基于事件的程序。

https://rxjs.dev/guide/overview

Ramda

一款实用的 JavaScript 函数式编程库。

https://ramdajs.com

md5

加密

https://www.npmjs.com/package/md5

Validator

针对字符串的验证和串联库。比如：isEmail、isDate、isMobilePhone等

网址：https://github.com/validatorjs/validator.js

vue.draggable.next

Vue拖拽组件，基于Sortable.js的Vue 3 拖放组件。

网址：https://github.com/SortableJS/vue.draggable.next

qrcode

QR 码/二维条形码生成器。

https://www.npmjs.com/package/qrcode

vue-qr

Vue组件，支持Vue2 / Vue3 /Vite。可以方便的生成各种格式二维码，包括彩色和自定义样式。

网址：https://www.npmjs.com/package/vue-qr

vue-cropper

一个优雅的图片裁剪插件。

网址：https://github.com/xyxiao001/vue-cropper

iconfont

千万矢量图标素材，支持单、多色图标。支持在线搜索，一键查询海量图标库。

网址：https://www.iconfont.cn/

Feather

一个简单漂亮的开源SVG图标集合。

网址：https://github.com/feathericons/feather

MEditor.md

一款开源在线 Markdown 编辑器

网址：https://pandao.github.io/editor.md/

Univer

在线表格、文本文档、ppt。

网址：https://docs.univer.ai/zh-CN/introduction

Luckysheet

一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。目前已不维护

网址：https://dream-num.github.io/LuckysheetDocs/zh/guide

Monaco Editor

代码编辑器

https://microsoft.github.io/monaco-editor/

Highlight

高亮显示插件

https://highlightjs.org/

wangEditor editor

开源 Web 富文本编辑器，开箱即用，配置简单。支持 JS Vue React

https://www.wangeditor.com/

xlsx

导出excel

https://www.npmjs.com/package/xlsx

file-saver

导出文件

https://www.npmjs.com/package/file-saver

watermark-dom

watermark.js是一个给B/S网站系统加水印的插件，确保系统保密性，安全性，降低数据泄密风险。简单易上手，支持多属性配置，支持本地和npm包引入，支持commonjs和es6引入。

https://www.npmjs.com/package/watermark-dom

辅助

vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

https://github.com/Tencent/vConsole?tab=readme-ov-file

autoprefixer

PostCSS 插件用于解析 CSS 并使用 Can I Use 中的值将浏览器前缀添加到 CSS 规则中

https://www.npmjs.com/package/autoprefixer

unplugin-auto-import

unplugin-vue-components

unplugin-vue-router

自动导入

https://www.npmjs.com/package/unplugin-auto-import https://www.npmjs.com/package/unplugin-vue-components https://www.npmjs.com/package/unplugin-vue-router

Jest

Jest 是一款优雅、简洁的 JavaScript 测试框架

https://jestjs.io/zh-Hans/

eslint

相关插件：@antfu/eslint-config、eslint-plugin-format

unocss

UnoCSS 是即时原子 CSS 引擎，其设计灵活且可扩展

相关插件：@unocss/eslint-plugin 、@unocss/preset-rem-to-px

https://unocss.nodejs.cn/guide/

其他

浏览器 caniuse

用于查看浏览器对各种新特性的兼容情况

https://caniuse.com

resize-detector

监听dom大小变化

https://npm.m.jd.com/package/resize-detector