vue-cli3使用vue-progressbar

1. 安装vue-progressbar

yarn add  vue-progressbar --save
或者
npm i vue-progressbar --save

2. 在main.js中引入

import VueProgressBar from 'vue-progressbar'
Vue.use(VueProgressBar, {
  color: '#1890ff',  // 进度条颜色
  failedColor: 'red', // 失败显示的颜色
  height: '2px'  // 进度条高度
})

3. 在Vue组件中使用

<template>
	  <div id="app">
	    <router-view></router-view>
	    <vue-progress-bar></vue-progress-bar>
	  </div>
</template>
<script>
export default {
	name: 'app',
	created () {
		this.$Progress.start()
		this.$router.beforeEach((to, from, next) => {
		    if (to.meta.progress !== undefined) {
		     let meta = to.meta.progress
		     this.$Progress.parseMeta(meta)
		    }
		    //  start the progress bar
		    this.$Progress.start()
		    //  continue to next page
		    next()
		 })
		this.$router.afterEach((to, from) => {
		  //  finish the progress bar
		  this.$Progress.finish()
		 })
	 	}
	}
</script>

4. 若想在http请求中也使用progressbar,需要在main.js改东西

//变动前
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
// 变动后
export default new Vue({
  ...App,
  router,
  render: h => h(App)
}).$mount('#app')
// 在封装好的http请求页面中导入main.js，此处以axios为例：
import axios from 'axios'
import qs from 'qs'
import app from './main'
const Axios = axios.create({
    baseURL: '/api',
    timeout: 10000,
    responseType: "json",
    withCredentials: true, // 是否允许带cookie这些
    headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
    }
});
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
    config => {
        // 在发送请求之前开始进度条
        app.$Progress.start(); // for every request start the progress
        if (config.method === "post") {
            // 序列化
            config.data = qs.stringify(config.data);
            // 温馨提示,若是贵公司的提交能直接接受json 格式,可以不用 qs 来序列化的
        }
        return config;
    },
    error => {
        app.$Progress.fail(); //结束进度条
        return Promise.reject(error.data.error.message);
    }
);
//返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(res => {
        app.$Progress.finish(); // 结束进度条
        return res.data;
    },
    error => {
        // 返回 response 里的错误信息
        app.$Progress.fail(); //错误进度条
        let errorInfo = error.data.error ? error.data.error.message : error.data;
        return Promise.reject(errorInfo);
    }
);

官方npm地址：https://www.npmjs.com/package/vue-progressbar