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：自主選擇要匯出的欄位，若不指定，默認匯出全部資料中心全部欄位

? 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/

小伙伴們有其他好用的組件歡迎評論哦~