add network progress bar

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "axios-progress-bar": "^1.2.0",
     "bootstrap": "^4.2.1",
     "element-ui": "^2.4.9",
     "lodash": "^4.17.11",

src/plugins/axios.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import axios from "axios";
 import router from "../router";
+import { loadProgressBar } from "axios-progress-bar";
 
 const ERROR_MSG_CONFIG = require("./errorMsgConfig").default;
 
@@ -282,4 +283,10 @@ Plugin.install = function(Vue) {
 
 Vue.use(Plugin);
 
+loadProgressBar({}, Vue.$http);
+loadProgressBar({}, Vue.$httpWithMsg);
+loadProgressBar({}, Vue.$httpWithoutAuth);
+
+import "axios-progress-bar/dist/nprogress.css";
+
 export default Plugin;

src/styles/global.css

@@ -1,4 +1,5 @@
 @import "./elementuiCustomize.css";
+@import "./nprogress.css";
 
 body {
   margin: 0;

src/styles/nprogress.css

@@ -0,0 +1,12 @@
+#nprogress .bar {
+  background: yellow !important;
+}
+
+#nprogress .peg {
+  box-shadow: 0 0 10px yellow, 0 0 5px yellow !important;
+}
+
+#nprogress .spinner-icon {
+  border-top-color: yellow !important;
+  border-left-color: yellow !important;
+}

yarn.lock

@@ -1488,6 +1488,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios-progress-bar@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/axios-progress-bar/-/axios-progress-bar-1.2.0.tgz#f9ee88dc9af977246be1ef07eedfa4c990c639c5"
+  integrity sha512-PEgWb/b2SMyHnKJ/cxA46OdCuNeVlo8eqL0HxXPtz+6G/Jtpyo49icPbW+jpO1wUeDEjbqpseMoCyWxESxf5pA==
+
 axios@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"