Vue项目中常用的插件-个人总结

本文介绍了在vue学习过程中常用的插件。后续将会整理成网页版的使用手册，并上传到github上。
在我的github中编写了demo和源码。小伙伴可以去查看喔~ https://github.com/Gesj-yean/vue-demo-collection
项目运行后截图如下，欢迎小伙伴们提意见~ 感谢~~~

resize-detector

地址：http://npm.taobao.org/package/resize-detector
用于监听元素大小改变时，页面的渲染。常用语echarts图表随窗口大小变化时而改变。

NProgress

NProgress是用于展示在窗口顶部的进度条。

eslint-plugin-prettier

这个是为了 eslint 跟 prettier 可以联合使用

npm install --save-dev eslint-plugin-prettier

eslint-config-prettier

这个是为了让 eslint 跟 prettier 兼容，关闭 prettier 跟 eslint 冲突的rules

npm install --save-dev eslint-config-prettier

导出Excel表

1. 安装：

npm install xlsx file-saver -S
npm install script-loader -S -D

2. 在src下新建vendor文件夹，新建Export2Excel.js
3. 使用方法：

import('@/vendor/Export2Excel').then(excel => {
  excel.export_json_to_excel({
    header: tHeader, //表头 必填
    data, //具体数据 必填
    filename: 'excel-list', //非必填
    autoWidth: true, //非必填
    bookType: 'xlsx' //非必填
  })
})

4. 文档：
   https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html#excel-export

vue-lazyload

vue-lazyload用于图片懒加载，在加载未完成时显示默认图片。

npm i vue-lazyload

参考：https://www.npmjs.com/package/vue-lazyload

better-scroll

better-scroll用于移动端滚动，可以去掉滚动条。同时具有上拉加载，下拉刷新等功能使用。
文档：http://ustbhuangyi.github.io/better-scroll/doc/api.html

createLogger

createLogger是vuex的方法，可以再控制台中打印出vuex前后数据状态变化。
src/store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import createLogger from 'vuex/dist/logger' // 从vuex中引入

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production' // 生产环境下不开启

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  strict: debug, // 开启严格模式，检查state的修改是否来源于mutation的commit
  plugins: debug ? [createLogger()] : [] // 使用createLogger
})

vconsole

vconsole用于移动端调用控制台打印数据。

npm i vconsole

参考：https://www.npmjs.com/package/vconsole

rwa-loader

raw-loader是一款将代码展示的插件。可以将你的代码用文本的方式展示，通常配合vue-highlightjs插件使用。

npm install raw-loader --save-dev

参考：https://www.npmjs.com/package/raw-loader

vue-highlightjs

用于高亮代码。