项目开发中前端好用的插件推荐

后续会继续更新好用的前端插件

推荐一些好用的前端插件

webpackbar

作用：打包展示对应的进度 用法：

// 安装
npm i --save webpackbar

// 配置
// 在vue.config.js中添加如下代码
var WebpackBar = require(webpackbar)

module.exports = {
          
   
  configureWebpack:(config)=>{
          
   
    config.plugins.push(
      new WebpackBar()
    )
  }
}

NProgress

作用：页面加载进度条 用法：

// 安装
npm i --save nprogress

// 使用
// router目录下的index.js
import Vue from vue
import Router from vue-router

import NProgress from nprogress
import nprogress/nprogress.css

NProgress.configure({
          
   
  showSpinner: false,
})

Vue.use(Router)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
          
   
  return originalPush.call(this, location).catch((err) => err)
}
const router = new Router({
          
   
  mode: hash,
  routes: [
    {
          
   
      path:/,
      redirect:/home
    }
  ],
})

router.beforeEach((to,from,next)=>{
          
   
  NProgress.start()
  next()
})

router.afterEach(()=>{
          
   
  NProgress.done()
})