整理的一些实用插件

小白男神
720 阅读7分钟

一个vue项目必需安装的插件

vue-dompurify-html

v-html 指令的 “安全” 替代品。HTML 代码在解释之前使用 DOMPurify 进行清理。 当前版本仅兼容 Vue 3。如果你需要 Vue 2 支持，请使用 4.1.x 版本。

大屏相关的插件

Magic Grid

DataV

vue2-scale-box

vue3-scale-box

“阿里DataV”与“腾讯云图”两个大厂的数据可视化项目对大屏数据可视化的适应方案均采用css3的transform：scale进行等比缩放实现的，这种方案目前也被很多人在使用，个人在实际项目中也采用的这种方案。

安全相关的插件

xss

是前端能够调用XSS的防护的一个插件。

npm install xss --save

@casl/vue 和 @casl/ability

配合使用 根据定义的角色判断是否有权限显示某个vue组件

  • 简单好维护

Crypto-JS JavaScript加密库

npm install crypto-js --save

轻量级插件

nanoid(轻量级的uuid)

  • 地址：gitee.com/mirrors/nan…
  • 一个小巧、安全、URL友好、唯一的 JavaScript 字符串ID生成器。
  • UUID是基于当前时间、计数器（counter）和硬件标识(通常为无线网卡的MAC地址等数据)计算生成的。UUID可以被任何人独立创建，并按需发布。

moment.js

  • 官网地址：momentjs.cn
  • moment.js是一个js日期处理类库。

Day.js

  • 官网地址：dayjs.fenxianglu.cn/
  • Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

fastclick

解决移动端click事件延迟300ms和点击穿透问题

dom-to-image

重量级插件

xlsx 解析表格内容

npm install xlsx --save

tailwindcss CSS 框架

  • 官方文档
  • Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
npm install -D tailwindcss

pl-table大数据表格

  • pl-table是基于element ui的一个大数据表格插件，在el-tabled的功能上增加了一些功能
  • 由于做vue前端项目页面性能优化时，需要优化表格数据太多页面卡顿的问题，发现了这个好用的插件，下面附上表格地址链接:
  • 官方github
  • umy-ui官网
  • pl table api

ol

  • 官方github
  • OpenLayers是一个高性能、功能丰富的库，用于在网络上创建交互式地图。它可以在任何网页上显示从任何来源加载的地图瓦片、矢量数据和标记。开发OpenLayers是为了进一步利用各种地理信息。它是完全免费的开源JavaScript，根据BSD 2条款许可证发布。
npm install ol --save

mathjs

  • 专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。支持数字，大数字(超出安全数的数字)，复数，分数，单位和矩阵。 功能强大，易于使用。
  • 官方文档
  • 官方github

JSZip

  • 官方文档
  • jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。

flv.js

  • Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发（ECMAScript 6 编写） ，没有用到 Flash。
    它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器，实现了 FLV 格式视频的播放。
  • flv.js 中文文档

Hls.js

  • hls.js是一个JavaScript库，可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。
  • hls.js不需要任何播放器，它可以直接在标准HTML 元素上运行。
  • 优点：包比较小，很纯净，UI可以根据自己的业务自扩展，自己封装功能和UI，比较切合自己开发的直播播放器，而且专业直播HLS
  • 缺点：没有封装好的UI，功能上也需要自己去实现
  • Hls.js 使用文档
  • hls.js播放hls直播源

FileSaver

  • 使用FileSaver强大的前端下载插件
npm install file-saver --save
npm install @types/file-saver --save-dev

fabric-pure-browser

  • 是一个易于使用HTML5画布元素的框架。
  • 它是一个交互式对象模型在canvas元素的顶部。
  • 它也是一个SVG到画布解析器.

ExcelJS

  • 读取，操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。
  • 一个 Excel 电子表格文件逆向工程项目。
npm install --save exceljs

lodash

  • lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
  • 官网地址 ：www.lodashjs.com

npm导入

$ npm i -g npm
$ npm i --save lodash

常用方法

  • _.cloneDeep (深拷贝)
  • _.merge (合并对象)

vue 使用的组件插件

vuex-persistedstate(Vuex持久化插件)

vue-cropper

  • 一个可以进行图片剪辑的插件，使用于vue
  • github地址

vue-giant-tree

npm i vue-giant-tree --save

vue-navigation

在移动端经常遇到这样的情形：有三个页面，首页---> 列表--> 详情，我们每次从详情返回列表的时候，列表都要重新加载一次，这个对于用户体验比较差，同时也增加了服务器的压力。所以这时候我们需要把列表页缓存起来，那我们就可以使用vue提供的keep-alive进行缓存。 如果我们仅仅把该组件的keep-alive改为true的话，遇到这样场景就会有bug：当首页进入列表时，假如此时列表的第一条数据为 "姓名：张三" ，那我们点击这条数据进入 张三 的详情页，若详情中有修改功能的话，我们将张三的名字改为 李四 再返回列表。此时列表因为被keep-alive缓存了，所以列表的第一条数据还是 张三，这时我们就需要动态的改变keep-alive的值，但是如果我们页面层级比较多的时候，判断起来会非常麻烦且容易错乱，那我们就可以借助vue-navigation来帮我们解决这个问题。

所以在项目中使用了vue-navigation，完美的实现了 前进刷新，后退缓存 的效果 使用地方在app.vue中，用navigation 标签包裹着router-view

vue-clipboard2

是前端能够调用 剪切板 的一个插件。

数字滚动插件

  • vue3-count-to(vue3比较完善的 数字滚动插件)
  • vue-count-to(vue2比较完善的 数字滚动插件)

关于拓扑结构的比较好的插件

vue

relation-graph

vis.js(国外免费的开源库)

  • 官网地址：visjs.org/
  • 基于浏览器的动态可视化库。
  • 该库设计为易于使用，可以处理大量动态数据，并支持对数据的操作和交互。
  • 该库由组件DataSet、Timeline、Network、Graph2d和Graph3d组成。

vis-network(本身只有普通布局、树形布局，无法拓展其他布局)

中文文档: ame.cool/pages/a7d85…

Cytoscape.js(国外免费的开源库)

地图相关可扩展性比较高的插件

OpenLayers

@arcgis/core

Cesium

-Cesium简介

avatar
文章
阅读
粉丝