Add progressbar

Author: shyling

package.json

@@ -37,6 +37,7 @@
     "request-promise": "^4.2.0",
     "roboto-fontface": "^0.7.0",
     "vue": "^2.2.5",
+    "vue-progressbar": "^0.7.1",
     "vue-resource": "^1.2.1",
     "vue-router": "^2.1.1",
     "vuex": "^2.2.1"

src/App.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
   div#app
+    vue-progress-bar
     app-header
     router-view
     app-footer

src/components/list.vue

@@ -92,8 +92,11 @@ export default {
   }),
   async created() {
     try {
+      this.$Progress.start();
       await this.$store.dispatch('fetchList');
+      this.$Progress.finish();
     } catch (e) {
+      this.$Progress.fail();
       this.message = '加载出错，你可以尝试登陆后重试';
       this.snackbar = true;
     }

src/components/post.vue

@@ -111,11 +111,14 @@ export default {
   },
   async created() {
     try {
+      this.$Progress.start();
       await Promise.all([
         this.$store.dispatch('fetchPost', this.id),
         this.$store.dispatch('fetchComments', this.id)
       ]);
+      this.$Progress.finish();
     } catch (e) {
+      this.$Progress.fail();
       this.message = '加载出错，你可以尝试登陆后重试';
       this.snackbar = true;
     }

src/main.js

@@ -3,6 +3,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import VueRouter from 'vue-router'
 import VueResource from 'vue-resource'
+import VueProgressBar from 'vue-progressbar'
 
 import MuseUI from 'muse-ui'
 
@@ -19,6 +20,11 @@ Vue.use(VueResource);
 Vue.use(VueRouter);
 Vue.use(MuseUI);
 Vue.use(Vuex);
+Vue.use(VueProgressBar, {
+    color: '#42a5f5',
+    failedColor: '#f44336',
+    thickness: '2px'
+});
 
 Vue.http.options.root = '/api';
 const token = window.localStorage && window.localStorage.getItem('GITHUB_TOKEN');