vue常用插件_veq-1p-CSDN博客

本文链接：https://blog.csdn.net/halo1416/article/details/122956775

本文介绍了JavaScript库Day.js处理日期和时间，qs解析URL参数，flv.js播放FLV视频，vConsole前端调试面板，Animate.css和animejs动画库，以及lodash和Chart.js等实用工具。同时涵盖了cookies管理、vue组件和跨平台HTTP库等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day.js ：一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。
qs ：一个轻量的 url 参数转换的 JavaScript 库

// 安装
npm install qs

// 使用
import qs from 'qs'
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

flv.js ：bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。
vConsole ：一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。
chii：移动端远程调试插件，可调试dom；启动后会打开一个chrome的调试工具，关联到你手机上打开的H5页面
Animate.css ：一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。
animejs ：一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。
lodash.js ：一个一致性、模块化、高性能的 JavaScript 实用工具库
Chart.js ：一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库
js-cookie ：一个简单的、轻量的处理 cookies 的 js API

 // 安装
npm install js-cookie

// 使用
import Cookies from 'js-cookie'
Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'

操作cookie: vue-cookie
轮播：vue-awesome-swiper
强大的通用轮播插件: swiper
基于 promise 的 HTTP 库：Axios / 中文文档
基于Promise的、支持请求转发、强大的http请求库：flyio
我选择flyio的主要原因是：支持多平台；目前Fly.js支持的平台包括：Node.js 、微信小程序、Weex 、React Native 、Quick App 和浏览器（特别是小程序这一块）。
图标库：Font Awesome / 官方文档
使用步骤：
安装： cnpm install font-awesome --save
然后在main.js引入 font-awesome/css/font-awesome.min.css 即可。
国际化：vue-i18n
适用于vue的富文本编辑器：vue-quill-editor
日期插件：vue-calendar / 文档
vue瀑布流：vue-waterfall2（有中文文档哦）
滚动插件：better-scroll

// 引入核心库
import BScroll from '@better-scroll/core';

// 初始化要滚动的dom和方向
this.bs = new BScroll(this.$refs.wrapperRef, {
  scrollX: true,
});

// 实现滚动（x轴距离，y轴距离，滚动时长）
this.bs && this.bs.scrollTo(100, 0, 300);

打印：vue-print-nb
非常好用！！！参考文章
数字动态变化效果：vue-count-to
自动滚动：vue-seamless-scroll
五彩纸屑特效 canvas-confetti
参考文章

// 安装：npm install --save canvas-confetti
import confetti from 'canvas-confetti';
// <canvas id="ribbonCanvas"></canvas>

// 选择dom
const canvas = document.getElementById('confettiCanvas');
// 创建一个使用自定义canvas的confetti函数实例
this.myConfetti = this.myConfetti || confetti.create(canvas, {
    resize: true,
    useWorker: true,
});

// 调用方法创建五彩纸屑动画
this.myConfetti({
   particleCount: 100, // 这个值越大颜色越多
   spread: 50,
   origin: { y: 1.2 }
});

基于base64的加密和解密 js-base64

import { encode, decode } from 'js-base64';

encode('字符串') // 加密
decode('字符串') // 解密

// ps: 在url参数或者接口参数中用的较多

基于 mpvue 框架的小程序选择控件： mpvue-picker

后续将持续更新
文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！
对博客文章的参考，若原文章博主介意，请联系删除！