vue3使用progress

Vue 3中使用NProgress进度条的方法如下：

首先，你需要安装NProgress库。可以通过npm或yarn来安装，在终端中运行以下命令：

npm install nprogress

或

yarn add nprogress

接下来，在你的Vue组件中引入NProgress并初始化进度条，在需要显示进度条的地方调用`NProgress.start()`方法。例如，在页面加载时可以在`mounted`钩子函数中调用`NProgress.start()`：

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export default {
  mounted() {
    NProgress.start()
  }
}

在需要隐藏进度条的地方调用`NProgress.done()`方法。例如，在异步请求完成后可以在`then`或`catch`中调用`NProgress.done()`：

axios.get('/api/data')
  .then(() => {
    // 处理响应
  })
  .catch(() => {
    // 处理错误
  })
  .finally(() => {
    NProgress.done()
  })

你还可以通过调用`NProgress.configure()`方法来自定义进度条的配置。例如，你可以设置进度条的颜色、高度等参数：

NProgress.configure({
  minimum: 0.1,
  easing: 'ease',
  speed: 500,
  showSpinner: false,
  barColor: '#29d',
  trickleSpeed: 200,
  height: 2
})

通过上述方法，你可以在Vue 3项目中使用NProgress进度条实现页面加载和异步请求的进度显示。希望对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3+TS的项目中使用NProgress进度条](https://blog.csdn.net/NMGWAP/article/details/126863343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]