vue-进度条插件-nprogress

如图所示：     开始时 开始进度条！  加载好 结束进度条！

 

 

 

 

 

 

官方网站： NProgress: slim progress bars in JavaScript (ricostacruz.com) 

第一步：安装nprogress

npm install --save nprogress 

第二步在main.js中导入 nprogress 的js 和 css

import Nprogress from 'nprogress'

import 'nprogress/nprogress.css' 

   

第三步使用：

 NProgress.start()                 //显示进度条
NProgress.set(0.4)     //将进度设置到具体的百分比位置
NProgress.inc()       //增加一点点进度
NProgress.done()                    //完成结束进度条

如下图所示，可看：