vue添加页面顶部进度条效果

添加进度条

https://github.com/rstacruz/nprogress
给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress :参考github上安装使用
如果是 vue ui 可视化面板则步骤如下：

• 点击依赖 -- 右上角的安装依赖 -- 切换到运行依赖 -- 查找对应的插件 （nprogress）这个插件
  打开main.js，编写如下代码

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'
.....
//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {
  //当进入request拦截器，表示发送了请求，我们就开启进度条
  NProgress.start()
  //为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //必须返回config
  return config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{
  //当进入response拦截器，表示请求已经结束，我们就结束进度条
  NProgress.done()
  return config
})