Vue中配置页面加载进度条

在Vue项目中配置页面加载进度条，可以通过以下步骤实现：

1. 安装nprogress库：

npm install nprogress --save

2. 在main.js中引入并配置NProgress：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
 
NProgress.configure({
  minimum: 0.1, // 进度条开始的最小百分比
  template: `
    <div class="bar" role="bar">
      <div class="peg"></div>
    </div>
    <div class="spinner" role="spinner">
      <div class="spinner-icon"></div>
    </div>
  `, // 自定义进度条样式
  ease: 'ease', // 动画缓动方式
  speed: 200 // 动画速度
})
 
// 在路由器导航守卫中启动和完成进度条
router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})
 
router.afterEach(() => {
  NProgress.done()
})

3. 在App.vue或全局样式文件中添加NProgress的样式：

/* app.vue 或 styles.css */
 
<style>
/* 进度条容器样式 */
#nprogress .bar {
  background: red; // 进度条颜色
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
 
/* 进度条indeterminate动画样式 */
#nprogress .peg {
  display: none;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px red, 0 0 5px red;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}
 
/* 进度条spinner样式，可以自定义或隐藏 */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}
 
/* 进度条spinner图标样式 */
#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-top-color: red;
  border-radius: 50%;
  position: relative;
  left: -8px;
  
  animation: nprogress-spinner 400ms linear infinite;
}
 
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
</style>

这样配置后，当你的Vue应用启动时，NProgress会在路由切换时自动显示和隐藏进度条，为用户提供更好的用户体验。