Vue使用NProgress

最新推荐文章于 2025-01-13 21:02:50 发布

原创最新推荐文章于 2025-01-13 21:02:50 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #css #html

vue 专栏收录该内容

38 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中集成NProgress插件，创建页面加载进度条。通过配置NProgress的样式和在Vue实例中调用start()和done()方法，实现了在页面beforeCreate和mounted阶段控制加载进度。此外，还展示了如何自定义加载条的颜色，并给出了在App.vue中添加相应样式的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载插件：

npm install --save nprogress

main.js：


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

NProgress.configure({
  easing: 'ease',  // 动画方式
  speed: 500,  // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})

Vue.prototype.NProgress=NProgress;

页面上使用：

  beforeCreate(){
  this.NProgress.start();  //加载开始
  },
  mounted() {
    this.NProgress.done(); //加载完成
  },

如果要改变其加载颜色

只要在App.vue写相应的样式即可

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
 #nprogress .bar {
      background: #66b1ff !important; 
    }
</style>

关注博主即可阅读全文