nprogress为网页设置顶部进度条

首先安装nprogress作为运行依赖

接着回到项目的main.js里，导入nprogress和样式文件：

// 导入nprogress和对应的样式文件
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

nprogress的使用相当简单：

NProgress.start();
NProgress.done();

问题是什么时候调用这两个方法？

我们利用axios的请求拦截器和响应拦截器去使用：

// 挂载axios之前配置请求拦截器，配置显示进度条NProgress.start()
axios.interceptors.request.use(config => {
    
    
  NProgress.start()
  // 一定要return config
  return config
})

// 配置响应拦截器,隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {
    
    
  NProgress.done()
  return config
})

// 挂载axios到Vue的原型对象上，这样每个vue的组件都可以通过$http直接访问到axios从而发起ajax请求
Vue.prototype.$http = axios

这样就配置好了