Vue技术栈中使用的插件
- 基本介绍：
- 安装：
- 功能
- 案例
- 链接
1、sortablejs
- 基本介绍：
Sortable.js是用于在现代浏览器和触摸设备上重新拖放排序列表的JavaScript库，支持jQuery，Meteor，AngularJS，React，Polymer，Knockout和兼容任何CSS库。
- 安装：
npm install sortablejs --save
- 功能
- 支持触摸设备和现代浏览器（包括IE9）
- 可以从一个列表拖动到另一个列表或在同一列表中
- 移动项目时的CSS动画
- 支持拖动手柄和可选文本
- 智能自动滚动
- 使用原生HTML5拖放API构建
- 支持任何CSS库
- 简单的API
- 不基于jQuery（但同样也支持）
- 案例
- 链接
2、Vue-draggable
-
基本介绍：
-
安装：
yarn add vuedraggable
npm i -S vuedraggable
- 功能
1.在项目中总会遇见一些需要排序的数据 ， 我们可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
3.拖顶的数据和data里的数据为双向绑定 ，在界面变的时候data中的数据也在跟着变化。
4、拖拽排序、
- 案例
- 链接
3、复制粘贴插件
- 基本介绍：
- 安装：
- 功能
- 案例
- 链接
4、前端国际化 i18n
- 基本介绍：
- 安装：
- 功能
- 案例
- 链接
5、富文本编辑器
- 基本介绍：
wangEditor：
百度UEditor：
CKEditor：
KindEditor：
MediumEditor：
Simditor：
Summernote：
Quill：
Slate：
- 安装：
- 功能
- 案例
- 链接
6、Markdown 编辑器
- 基本介绍：
- 安装：
- 功能
- 案例
- 链接
7、PDF 阅读器
- 基本介绍：
- 安装：
$ npm install -g gulp-cli
- 功能
- 案例
- 链接
8、vue视频播放插件vue-video-player
- 基本介绍：
- 安装：
npm install vue-video-player --save
- 功能
- 视频格式
- - type："video/webm" // 可以播放，用ogg也可打开
- - type："video/ogg" // 可以播放，用webm也可打开
- - type："video/3gp" // 可以播放
- - type："video/mp4" // 可以播放
- - type："video/avi" // 打不开
- - type："video/flv" // 打不开
- - type："video/mkv" // 打不开
- - type："video/mov" // 打不开
- - type："video/mpg" // 打不开
- - type："video/swf" // 打不开
- - type："video/ts" // 打不开
- - type："video/wmv" // 打不开
- - type："video/vob" // 没转化
- - type："video/mxf" // 转化出错
- - type: "video/rm" // 转化出错
- 控制播放和暂停
- 案例
- 链接
9、vue打印插件
- 基本介绍：
- 安装：
- 功能
- 网页实现打印 可以选择性的打印某一部分 的vue组件
- 案例
- 链接
10、vxe-table
- 基本介绍：
原理是 只渲染你看的这部分， 其他部分不进行渲染。对大量数据的表格的性能提升有非常大的提升。
- 安装：
- 功能
- 支持增删改查
- 虚拟滚动
- 懒加载
- 快捷菜单
- 数据校验
- 树形结构
- 打印导出
- 表单渲染
- 数据分页
- 模态窗口
- 自定义模板
- 渲染器
- 贼灵活的配置项
- 扩展接口等...
- 案例
- 链接
11、Lodash
- 基本介绍：
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
- 安装：
npm i --save lodash
- 功能
- Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
- - 遍历 array、object 和 string
- - 对值进行操作和检测
- - 创建符合功能的函数
- 案例
- 链接
12、image-conversion
- 基本介绍：
上传图片时压缩大小
对上传图片进行压缩的需求是非常常见的，简单来说，解决方式就是将图片base64或者canvas进行压缩转化，有很多工具包可以实现这种需求
一个简单易用的JS图像转换工具，可以指定大小以压缩图像-源码
- 安装：
npm i image-conversion --save
# or
yarn add image-conversion
- 功能
- 一个简单易用的JS图像转换工具
- 案例
- 链接
13、vue-scroller
- 基本介绍：
- 安装：
npm i vue-scroller -S
- 功能
- 虚拟滚动插件: vue-virtual-scroller 使用
- vue可以记录组件滚动位置等
- 利用vueScroller实现tab左右滑动切换与下拉刷新，上拉加载结合
- 案例
- 链接
14、vue-virtual-scroller
- 基本介绍：
业务开发中存在长列表显示需求，项目中一些用户的聊天列表会出现几千条数据的情况，也就意味着要一次性渲染几千条数据，造成明显的卡顿，这时就有必要对聊天列表进行性能优化来提升用户体验。
对于这种需求，可能很多人首先想到的就是使用懒加载进行性能优化，但是对于很长的列表来说懒加载有三个致命的缺点：
- 如果一直加载到底, 那么最终还是会出现大量的DOM节点，导致滚动不流畅。
- 想要定位到某一个位置的数据会非常困难。
- 滚动条无法正确反映操作者当前浏览的信息在全部列表中的位置。而且大量数据加载，一次给我加载十几条，滚到底太慢了。
懒加载无法满足真正的长列表展示，那么如果真正要解决此类问题该怎么办？
还有一种思路就是：**列表局部渲染，又被称为虚拟列表**。
当前比较知名的一些第三方库有
vue-virtual-scroller、
react-tiny-virtual-list、
react-virtualized。
它们都可以利用局部加载解决列表过长的问题的，
vue-virtual-scroller、react-tiny-virtual-list一类的方案只支持虚拟列表，
而react-virtualized这种大而全的库则是支持表格、集合、列表等多种情况下的局部加载方案。
- 安装：
- 功能
- 案例
- 链接
14、xlsx，前端导出xlsx
- 基本介绍：
- 安装：
- 功能
- 案例
- 链接
15、js-xlsx，使用JavaScript实现纯前端读取和导出excel文件
- 基本介绍：
由[SheetJS](https://sheetjs.com/)出品的
`js-xlsx`是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，
支持`xls`、`xlsx`、`ods`(一种OpenOffice专有表格文件格式)等十几种格式。
- 安装：
- 功能
- 案例
- 链接
16、file-saver，文本保存
- 基本介绍：
- file-saver 负责保存文件
- 安装：
cnpm install file-saver --save
- 功能
- 案例
- 链接
