Some commonly used but not well-known vue related ecology and plugins
I have used some good plug-ins or tool libraries in project development and personal exercises. Don’t say much, just arrange it directly (attach the url directly to the official document)
①vxe-table: a PC-side table component based on vue, supports addition, deletion, modification, query, virtual scrolling, lazy loading, shortcut menu, data verification, tree structure, print export, form rendering, data paging, virtual list, modal window , Customized templates, renderers, flexible configuration items, extended interfaces, etc.
Address: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install
②Clipboard: Print text plugin
Address: http://www.clipboardjs.cn/
③Do big data display
Address: http://datav.jiaminghi.com/
④vue3.0 Chinese document
Address: https://www.vue3js.cn/docs/zh/api/application-api.html
⑤Vuepress: Vue-driven static website generator (personal is also a blog modeled after vuepress)
Address: https://www.vuepress.cn/
⑥vue qs: used for data serialization or string parsing
npm install qs //安装
import qs from 'qs'// 在main.js引入
Vue.prototype.$qs = qs//全局配置（如果全局配置必须在main.js里面写）
⑦ qrcodejs2 : Generate QR code according to the address
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 is a consistent, modular, high-performance JavaScript utility library. (Official original words)
npm i --save lodash //安装
//哪个页面需要使用就取哪个页面引入，下面以节流为例
import throttle from "lodash.throttle"
Address: https://www.lodashjs.com/
⑨vuex**-**persistedstate: vuex persistence plugin
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: export excel table data
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: the data to be exported
- json_fields: Choose the fields to be exported. If not specified, all fields in all data centers will be exported by default
| Attribute name | Types of | description |
|---|---|---|
| data | Array | Need to export data, support Chinese |
| fields | Object | Define the fields that need to export data |
| name | String | Export the file name of excel |
| type | String | Export excel file type (xls, csv), the default is xls |
⑪ core-js: report errors for initialization
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 //安装