Vue project commonly used plug-ins - personal summary

This paper describes commonly used in the learning process vue plug. Follow-up will be organized into web version of the manual, and upload to github.
We prepared a demo and source code in my github . Small partners can go to see Oh ~ https://github.com/Gesj-yean/vue-demo-collection
the project run shot as follows, welcome small partners for comments ~ ~ ~ ~ thanks

resize-detector

Address: http: //npm.taobao.org/package/resize-detector
when used to monitor changes in the size of the element, rendering the page. Common language echarts sometimes change with changes in the size of the chart window.

NProgress

NProgress is used to display a progress bar at the top of the window.

eslint-plugin-prettier

This is to eslint can be combined with prettier

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

eslint-config-prettier

This is to allow eslint compatible with prettier, close prettier with eslint conflict rules

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

Export Excel table

1. installation:

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

2. New vendor in the src folder, the new Export2Excel.js
3. Instructions:

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

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

view-lazyload

vue-lazyload for lazy loading images, the default image when loading is not complete.

npm i vue-lazyload

Reference: https: //www.npmjs.com/package/vue-lazyload

better-scroll

better-scroll movable end for scrolling, the scroll bar can be removed. Raja also has a carrier, such as pull-down refresh feature.
Documentation: http: //ustbhuangyi.github.io/better-scroll/doc/api.html

createLogger

createLogger vuex method, the console can then print out the data before and after the change in state 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 console for moving the print data call ends.

npm i vconsole

Reference: https: //www.npmjs.com/package/vconsole

rwa-loader

raw-loader is a code display plug-ins. You can show your code in text mode, usually with vue-highlightjs plugin.

npm install raw-loader --save-dev

Reference: https: //www.npmjs.com/package/raw-loader

view-highlightjs

It used to highlight code.