vue 相关的 UI 库和插件

本文整理一些自己使用过的 UI 库和插件

一.vue 相关的 UI 库

1.element ui 

自己比较常用的 ui 库，后台系统还有 vue-element-admin，后台效果请看

Vue Element Admin

Vue Admin Template

更多：nx-admin

其他高 start 的 UI 库：iView；Ant Design Vue 

2.vant（移动端）

适合移动端开发的UI库，也有小程序版本的 Vant Weapp

3.VuePress（开发文档）

用于开发类似 vue 官方文档的框架

参考博文：VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客_怎么写类似vue文档的开发文档-CSDN博客

二.vue 开发相关的插件

开发中用到的各类插件。

1.bable-ployfill

es6转es5

@babel/polyfill · Babel

2.fastclick

解决移动端点击事件300ms延迟问题

GitHub：GitHub - ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs

demo：

import fastClick from 'fastclick'
fastClick.attach(document.body)

3.better-scroll

滚动处理插件，主要是处理移动端滚动，现在也支持 pc 端

GitHub：GitHub - ustbhuangyi/better-scroll: :scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance

文档：

1.X better-scroll | :scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance

2.X BetterScroll 2.0

demo：

import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')

4.vue-awesome-swiper

基于 swiper 的轮播组件

GitHub：GitHub - surmon-china/vue-awesome-swiper: 🏆 Swiper component for @vuejs

5.vue-lazyload

图片懒加载

GitHub：GitHub - hilongjw/vue-lazyload: A Vue.js plugin for lazyload your Image or Component in your application.

6.vue-video-player

基于 video.js 的视频播放插件

GitHub：https://github.com/surmon-china/vue-video-player

这个插件在移动端似乎有些坑

7.jsonp

处理 jsonp 相关的请求

GitHub：GitHub - webmodules/jsonp: A simple JSONP implementation

8.create-keyframe-animation

js 操作 css3 动画

GitHub：https://github.com/HenrikJoreteg/create-keyframe-animation

9.vue-echarts

数据图表化展示

GitHub：https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.md

10.element-china-area-data

Element UI 中国省市区级联数据

GitHub：GitHub - Plortinus/element-china-area-data: :cn: Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据

11.Vue i18n

用于多语言，国际化

文档：介绍 | Vue I18n

初始化

import en_us from './assets/language/en_us'
import zh_cn from './assets/language/zh_cn'

const i18n = new VueI18n({
  locale: 'zh_cn',
  messages: {
    'zh_cn': zh_cn,
    'en_us': en_us
  }
})

new Vue({
  i18n,
  // ...
})

组件的 template 中获取文字

<span>{{$t('buttonText.search')}}</span>

组件的 script 中获取文字

this.$i18n.t('buttonText.search')
// 或者
this.$t('buttonText.search')

注意：若要 Element UI 兼容 i18n 可参考文档 ：Element - The world's most popular Vue UI framework。我这里使用的是 Element 2.12.0 版本，使用的是 “兼容 vue-i18n@6.x”方式，具体代码并没有写在上面例子中

12.SortableJS

功能强大的JavaScript 拖拽库，用于做列表拖拽排序

GitHub：GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

文档：Sortable.js中文网

13.jsbn

JaveScript能有效表示的数是有范围限制的（+- 2^53 = +-9007199254740992 => 16位），超过这个范围的数无法正确的进行操作，同时JS的一些方法也会有问题，比如toString()、parseInt()等。jsbn就是用于JaveScript大数操作的，比如超大数的比较，进制转换等。

GitHub：GitHub - andyperlitch/jsbn: The jsbn library is a fast, portable implementation of large-number math in pure JavaScript, enabling public-key crypto and other applications on desktop and mobile browsers.

这个插件文档写得不是很全，可以参照 Java 中的 BigInteger：BigInteger (Java Platform SE 7 )

npm 上测试：RunKit

当然，JS 中新增的 BigInt 也可以尝试使用，不过有些问题要注意：

BigInt 不能用于 Math 对象中的方法；不能和任何 Number 实例混合运算，两者必须转换成同一种类型。在两种类型来回转换时要小心，因为 BigInt 变量在转换成 Number 变量时可能会丢失精度。

另外，BigInt 兼容性不好，不兼容 IE。

14.vue-async-computed

如果你想在 vue 的计算属性中使用异步，那可以考虑使用这个插件。

GitHub：https://github.com/foxbenjaminfox/vue-async-computed

15.nprogress

页面加载顶部进度条。

GitHub: https://github.com/rstacruz/nprogress

16.v-viewer

图片点击放大预览的插件。

GitHub: https://github.com/mirari/v-viewer

17.html2canvas

用于网页截图

GitHub: https://github.com/niklasvh/html2canvas

18.dayjs

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间

https://dayjs.fenxianglu.cn/

19.simple-mind-map

功能丰富的web在线思维导图

GitHub: https://github.com/wanglin2/mind-map