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/
小伙伴们有其他好用的组件欢迎评论哦~

猜你喜欢

转载自blog.csdn.net/weixin_43937400/article/details/113178294