Nuxt中使用Nprogress，以及自定义进度条的颜色

1.安装Nprogress

npm install nprogress --save

2..在plugins中新建一个loading.js

3.在loading.js中写入以下内容，他会在每次路由跳转的时候执行

//引入nprogress

import NProgress from 'nprogress'

import 'nprogress/nprogress.css' //这个样式必须引入

//Nprogress的基本配置

NProgress.inc(0.2);

NProgress.configure({easing:'ease', speed:500, showSpinner:false });

export default ({ app }) => {

app.router.beforeEach((to,from,next) => {

    NProgress.start();

    next()

});

  app.router.afterEach(() => {

     NProgress.done()

});

}

4.在nuxt.config.js中引入这个loading.js

plugins: [

  {src:'@/plugins/loading', ssr:false },

],

5.如果要修改进度条的颜色颜色，你写入如下css， ！important是设置最高级权限，可以覆盖本来的颜色

#nprogress .bar {

background:$color-main !important; //自定义颜色

}