一些常用但不被熟知的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 //安装