在Vue中使用NProgress可以实现页面加载时的进度条效果

在Vue中使用NProgress实现进度条效果的步骤如下：

1. 首先，安装NProgress库。

npm install --save nprogress

2. 在main.js文件中，引入NProgress和其对应的样式文件。

import { createApp } from 'vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const app = createApp(App)
app.use(NProgress)

3. 创建一个全局的路由守卫，在路由跳转前启动进度条，在路由跳转后结束进度条。

import router from './router'

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

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

4. 在Vue的根组件中，使用`<router-view></router-view>`来渲染路由组件。

通过以上步骤，我们就可以在Vue3中使用NProgress实现进度条效果了。

注意：在Vue3中，NProgress作为Vue3插件的使用方式稍有不同，但原理是一样的。当然，你也可以根据自己的需求，进一步自定义NProgress的样式和行为。