add: loader加载样式 && 图片浏览功能

.vuepress/config.js

@@ -10,6 +10,8 @@ module.exports = {
   themeConfig: themeConf,
   plugins: [
     require('./plugins/my-router'),
+    require('./plugins/my-loader'),
+    require('vuepress-plugin-viewer'),
     '@vuepress/back-to-top',
     [ 
       '@vuepress/google-analytics', { 'ga': 'UA-124601890-1' }

.vuepress/plugins/my-loader/Loader.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="my-loader center" v-show="show">
+    <div class="my-loader-circle"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      show: false
+    }
+  },
+  mounted () {
+    this.$router.beforeEach((to, from, next) => {
+      if (to.path !== from.path) {
+        this.show = true
+        next()
+      } else {
+        next()
+      }
+    })
+    this.$router.afterEach((to, from) => {
+      this.show = false
+    })
+  }
+}
+</script>
+
+<style scoped>
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.my-loader {
+  background: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 600;
+}
+
+.my-loader-circle {
+  z-index: 900;
+  border: 3px solid#f6ffed;
+  border-top: 3px solid #3eaf7c;
+  border-radius: 50%;
+  transform: rotate(0deg);
+  width: 3.5em;
+  height: 3.5em;
+  animation: circle-rotate 1s linear infinite;
+}
+
+@keyframes circle-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

.vuepress/plugins/my-loader/index.js

@@ -0,0 +1,6 @@
+const path= require('path')
+
+module.exports = {
+  enhanceAppFiles: path.resolve(__dirname, 'loader.js'),
+  globalUIComponents: 'Loader'
+}

.vuepress/plugins/my-loader/loader.js

@@ -0,0 +1,5 @@
+import Loader from './Loader.vue'
+
+export default ({ Vue }) => {
+  Vue.component('Loader', Loader)
+}

package.json

@@ -10,7 +10,8 @@
     "husky": "^2.3.0",
     "prettier": "^1.17.1",
     "vuepress": "^1.0.0-beta.2",
-    "vuepress-plugin-comment": "^0.5.4"
+    "vuepress-plugin-comment": "^0.5.4",
+    "vuepress-plugin-viewer": "^1.0.0"
   },
   "devDependencies": {},
   "scripts": {