vue相关插件总结

一些常用但不被熟知的vue相关生态及插件

本人在项目开发及个人练习中，用到的一些好的插件或工具库。话不多说，直接安排（官方有文档的直接附上url）

①vxe-table :一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。

地址：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

②Clipboard:打印文本插件

地址：http://www.clipboardjs.cn/

③做大数据展示

地址： http://datav.jiaminghi.com/

④vue3.0中文文档

地址：https://www.vue3js.cn/docs/zh/api/application-api.html

⑤Vuepress:Vue 驱动的静态网站生成器（个人也是仿照vuepress做的博客）

地址：https://www.vuepress.cn/

⑥vue qs：用于数据序列化或解析字符串

npm install  qs  //安装
import qs from 'qs'// 在main.js引入
Vue.prototype.$qs = qs//全局配置（如果全局配置必须在main.js里面写）

⑦qrcodejs2：根据地址生成二维码

methods:{
	qrcode() {
	//qrCode有两个参数，第一个参数是绑定dom元素，这里根据refs取的，取id话：('#img',{})，第二个参数是一个对象
      let qrcode = new QRCode(this.$refs.img, {
        width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: "https://www.vuepress.cn/", // 设置二维码内容或跳转地址
      });
    },
}

⑧lodash:Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。(官方原话)

npm i --save lodash  //安装
//哪个页面需要使用就取哪个页面引入，下面以节流为例
import throttle from "lodash.throttle"

地址：https://www.lodashjs.com/

⑨vuex**-**persistedstate：vuex持久化插件

npm i -S vuex-persistedstate  //安装
import createPersistedState from 'vuex-persistedstate'  //在vuex初始化的时候，作为组件引入
export default new Vuex.Store({
	//...
 plugins: [
     createPersistedState({

      })
  ]; //vuex-persistedstate默认使用localStorage来固化数据，如果要用sessionStorage，则createPersistedState({storage: window.sessionStorage})
}）

⑩vue-json-excel:导出excel表格数据

import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);

<download-excel
    class = "export-excel-wrapper"
    :data = "json_data"
    :fields = "json_fields"
    name = "filename.xls">
    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
    <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
</download-excel>

• json_data：需要导出的数据
• json_fields：自主选择要导出的字段，若不指定，默认导出全部数据中心全部字段

属性名	类型	描述
data	Array	需要导出的数据，支持中文
fields	Object	定义需要导出数据的字段
name	String	导出excel的文件名
type	String	导出excel的文件类型（xls,csv）,默认是xls

⑪ core-js:针对初始化报错

core-js/modules/es6.array.fill core-js/modules/es6.array.find core-js/modules/es6.array.find-index core-js/modules/es6.array.from core-js/modules/es6.array.iterator core-js/modules/es6.function.name core-js/modules/es6.map core-js/modules/es6.number.constructor core-js/modules/es6.number.is-integer core-js/modules/es6.number.is-nan core-js/modules/es6.number.parse-int core-js/modules/es6.object.assign core-js/modules/es6.object.freeze core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.flags core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.set core-js/modules/es6.string.anchor core-js/modules/es6.string.bold core-js/modules/es6.string.ends-with core-js/modules/es6.string.fixed core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.link core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es6.typed.uint8-array core-js/modules/es6.typed.uint8-clamped-array core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.object.values core-js/modules/es7.promise.finally core-js/modules/web.dom.iterable

npm install core-js@2  //安装

⑫echarts：一个基于 JavaScript 的开源可视化图表库

地址：https://echarts.apache.org/zh/index.html

⑬v-charts：基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表

地址：https://vue-echarts.github.io/guide/data.html

⑭uCharts：高性能跨端图表

地址：https://www.ucharts.cn/

小伙伴们有其他好用的组件欢迎评论哦~