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

文章目录

• • 推荐一些好用的前端插件
  • • webpackbar
    • NProgress

推荐一些好用的前端插件

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()
})