一些常用但不被熟知的vue相關(guān)生態(tài)及插件
本人在項目開發(fā)及個人練習(xí)中，用到的一些好的插件或工具庫。話不多說臂容，直接安排（官方有文檔的直接附上url）
①vxe-table :一個基于 vue 的 PC 端表格組件窜锯，支持增刪改查熏挎、虛擬滾動蚌成、懶加載、快捷菜單凛捏、數(shù)據(jù)校驗担忧、樹形結(jié)構(gòu)、打印導(dǎo)出坯癣、表單渲染瓶盛、數(shù)據(jù)分頁、虛擬列表示罗、模態(tài)窗口惩猫、自定義模板、渲染器蚜点、賊靈活的配置項轧房、擴(kuò)展接口等。
地址：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install
②Clipboard:打印文本插件
地址：http://www.clipboardjs.cn/
③做大數(shù)據(jù)展示
地址： http://datav.jiaminghi.com/
④vue3.0中文文檔
地址：https://www.vue3js.cn/docs/zh/api/application-api.html
⑤Vuepress:Vue 驅(qū)動的靜態(tài)網(wǎng)站生成器（個人也是仿照vuepress做的博客）
地址：https://www.vuepress.cn/
⑥vue qs：用于數(shù)據(jù)序列化或解析字符串
npm install qs //安裝
import qs from 'qs'// 在main.js引入
Vue.prototype.$qs = qs//全局配置（如果全局配置必須在main.js里面寫）
⑦qrcodejs2：根據(jù)地址生成二維碼
methods:{
qrcode() {
//qrCode有兩個參數(shù)绍绘，第一個參數(shù)是綁定dom元素奶镶，這里根據(jù)refs取的，取id話：('#img',{})陪拘，第二個參數(shù)是一個對象
let qrcode = new QRCode(this.$refs.img, {
width: 200, // 設(shè)置寬度厂镇，單位像素
height: 200, // 設(shè)置高度，單位像素
text: "https://www.vuepress.cn/", // 設(shè)置二維碼內(nèi)容或跳轉(zhuǎn)地址
});
},
}
⑧l(xiāng)oadsh:Lodash 是一個一致性左刽、模塊化捺信、高性能的 JavaScript 實用工具庫。(官方原話)
npm i --save lodash //安裝
//哪個頁面需要使用就取哪個頁面引入欠痴，下面以節(jié)流為例
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默認(rèn)使用localStorage來固化數(shù)據(jù)，如果要用sessionStorage喇辽，則createPersistedState({storage: window.sessionStorage})
}）
⑩vue-json-excel:導(dǎo)出excel表格數(shù)據(jù)
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">導(dǎo)出EXCEL</el-button> -->
</download-excel>
- json_data：需要導(dǎo)出的數(shù)據(jù)
- json_fields：自主選擇要導(dǎo)出的字段，若不指定茵臭，默認(rèn)導(dǎo)出全部數(shù)據(jù)中心全部字段
| 屬性名 | 類型 | 描述 |
|---|---|---|
| data | Array | 需要導(dǎo)出的數(shù)據(jù)疫诽，支持中文 |
| fields | Object | 定義需要導(dǎo)出數(shù)據(jù)的字段 |
| name | String | 導(dǎo)出excel的文件名 |
| type | String | 導(dǎo)出excel的文件類型（xls,csv）,默認(rèn)是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 //安裝
