babel.config.js

@@ -1,5 +1,14 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
   ]
 }

package-lock.json

@@ -2107,7 +2107,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/download/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2124,8 +2123,12 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1637524478967&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
-      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0="
+    },
+    "alloyfinger": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmmirror.com/alloyfinger/download/alloyfinger-0.1.16.tgz",
+      "integrity": "sha512-AfsLALs929WQsjSk1pbysoiVU3bgm/4k1wdZDtMQ7uI7b8XweqCCnUiBYqqdp8uPZ1fBq/+LCJhgUlhd90FssQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -2384,6 +2387,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2445,6 +2456,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.2.3",
       "resolved": "https://registry.npmmirror.com/babel-loader/download/babel-loader-8.2.3.tgz",
@@ -2457,6 +2473,38 @@
         "schema-utils": "^2.6.5"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz",
+          "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.35",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.0.0-beta.35.tgz",
+          "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-dynamic-import-node/download/babel-plugin-dynamic-import-node-2.3.3.tgz?cache=0&sync_timestamp=1587496311403&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-plugin-dynamic-import-node%2Fdownload%2Fbabel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -2496,6 +2544,27 @@
         "@babel/helper-define-polyfill-provider": "^0.3.1"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714298273&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@@ -2593,8 +2662,7 @@
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmmirror.com/big.js/download/big.js-5.2.2.tgz",
-      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
-      "dev": true
+      "integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg="
     },
     "binary-extensions": {
       "version": "2.2.0",
@@ -4142,8 +4210,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4592,6 +4659,19 @@
       "integrity": "sha512-k/0t1TRfonHIp8TJKfjBu2cKj8MqYTiEpOhci+q7CVEE5xnCQnx1pTa+V8b/sdhe4S3PR4p4iceEQWhGrKQORQ==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.6",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.6.tgz",
+      "integrity": "sha512-rcYXEKd/j2G0AgficAOk1Zd1AsnHRkhmrK4yLHmNOiimU2JfsywgfKUjMoFuT6pQx0luhovj8lFjpE4Fnt58Iw==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz?cache=0&sync_timestamp=1612290836352&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.4.tgz",
@@ -4624,8 +4704,7 @@
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
-      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
-      "dev": true
+      "integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -5545,8 +5624,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz?cache=0&sync_timestamp=1591599675178&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
-      "dev": true
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -5588,8 +5666,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
-      "dev": true
+      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -7228,8 +7305,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz?cache=0&sync_timestamp=1608000211395&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson-schema-traverse%2Fdownload%2Fjson-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
-      "dev": true
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -7457,7 +7533,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/loader-utils/download/loader-utils-1.4.0.tgz",
       "integrity": "sha1-xXm140yzSxp07cbB+za/o3HVphM=",
-      "dev": true,
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -7468,7 +7543,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmmirror.com/json5/download/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -7787,8 +7861,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz?cache=0&sync_timestamp=1584051509720&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminimist%2Fdownload%2Fminimist-1.2.5.tgz",
-      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=",
-      "dev": true
+      "integrity": "sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI="
     },
     "minipass": {
       "version": "3.1.6",
@@ -7855,6 +7928,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmmirror.com/moment/download/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -7967,6 +8045,11 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-ensure": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npm.taobao.org/node-ensure/download/node-ensure-0.0.0.tgz",
+      "integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc="
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmmirror.com/node-forge/download/node-forge-0.10.0.tgz",
@@ -8067,6 +8150,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1633420566316&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
@@ -8563,6 +8651,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.2.228",
+      "resolved": "https://registry.npmmirror.com/pdfjs-dist/download/pdfjs-dist-2.2.228.tgz",
+      "integrity": "sha1-d3sGigoWyWQYQzMDgHwYMFi0eqo=",
+      "requires": {
+        "node-ensure": "^0.0.0",
+        "worker-loader": "^2.0.0"
+      }
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
@@ -9365,8 +9462,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
-      "dev": true
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
     },
     "q": {
       "version": "1.5.1",
@@ -9731,6 +9827,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.21.0",
       "resolved": "https://registry.npmmirror.com/resolve/download/resolve-1.21.0.tgz",
@@ -10953,6 +11054,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -11348,7 +11454,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npm.taobao.org/uri-js/download/uri-js-4.4.1.tgz?cache=0&sync_timestamp=1610237530009&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furi-js%2Fdownload%2Furi-js-4.4.1.tgz",
       "integrity": "sha1-mxpSWVIlhZ5V9mnZKPiMbFfyp34=",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -12379,6 +12484,26 @@
         "errno": "~0.1.7"
       }
     },
+    "worker-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/worker-loader/download/worker-loader-2.0.0.tgz",
+      "integrity": "sha1-Rf2j73asqBV3GokQc5nuQRm0MKw=",
+      "requires": {
+        "loader-utils": "^1.0.0",
+        "schema-utils": "^0.4.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.4.7",
+          "resolved": "https://registry.npmmirror.com/schema-utils/download/schema-utils-0.4.7.tgz?cache=0&sync_timestamp=1637075888461&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-0.4.7.tgz",
+          "integrity": "sha1-unT1l9K+LqiAExdG7hfQoJPGgYc=",
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.nlark.com/wrap-ansi/download/wrap-ansi-7.0.0.tgz?cache=0&sync_timestamp=1631557327268&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrap-ansi%2Fdownload%2Fwrap-ansi-7.0.0.tgz",

package.json

@@ -8,7 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "alloyfinger": "^0.1.16",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.6",
+    "moment": "^2.29.1",
+    "pdfjs-dist": "^2.2.228",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
@@ -21,6 +25,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -1,32 +1,7 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <router-view></router-view>
   </div>
 </template>
 
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<style lang="less"></style>

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/outline.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="outline">
+    <div class="outlineBox">
+      <h4>目录</h4>
+      <outlineItem :outlineData="outlineData" @outline_item="$emit('outline_item', $event)"></outlineItem>
+    </div>
+    <div class="Mask"></div>
+  </div>
+</template>
+<script>
+import outlineItem from './outlineItem.vue'
+export default {
+  name: 'outline',
+  components: {
+    outlineItem
+  },
+  props: {
+    outlineData: { type: Array, default: () => [] }
+  }
+}
+</script>
+<style lang="less">
+#outline {
+  color: #fff;
+}
+.outlineBox {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+.Mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+  background: #000;
+  opacity: 0.8;
+  top: 0;
+  left: 0;
+
+}
+</style>

src/components/outlineItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div v-for="item in outlineData" :key="item.dest">
+        <h5 @click="outlineItem(item)" >{{ item.title }}</h5>
+        <outlineItem class="item" v-if="item.items" :outlineData="item.items" @outline_item="$emit('outline_item', $event)"></outlineItem>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'outlineItem',
+  props: {
+    outlineData: { type: Array, default: () => [] }
+  },
+  methods: {
+    outlineItem (e) {
+      this.$emit('outline_item', e)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.item {
+  text-indent: 2em;
+}
+h5 {
+  cursor: pointer;
+}
+</style>

src/components/pdf.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="pdf">
+    <div class="btnbox">
+      <el-button type="primary" class="el-icon-tickets" size="mini" @click="outlineShow = !outlineShow"></el-button>
+      <!-- <el-button type="primary" v-if="mode == 'pc'" class="el-icon-arrow-left left" size="mini" @click="pre_page"></el-button>
+      <el-button type="primary" v-if="mode == 'pc'" class="el-icon-arrow-right right" size="mini" @click="next_page"></el-button> -->
+      <el-button type="primary" v-if="mode == 'pc'" class="el-icon-plus" size="mini" @click="zoom_big"></el-button>
+      <el-button type="primary" v-if="mode == 'pc'" class="el-icon-minus" size="mini" @click="zoom_small"></el-button>
+    </div>
+    <outline v-if="outlineShow" @outline_item="outline_item" :outlineData="outlineData" class="outline" :style="{ width: outlineWidth }"></outline>
+    <div class="canvasBox">
+      <!-- <canvas v-for="page in pdf_pages" :id="'the-canvas'+page" :key="page" class="canvas"></canvas> -->
+      <canvas @mousewheel="mouseWheel" class="canvas" :id="'the-canvas'"></canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+// pdfjs-dist版本为2.2.228
+import PDFJS from 'pdfjs-dist'
+// 目录
+import outline from './outline.vue'
+// 时间处理
+import moment from 'moment'
+export default {
+  name: 'pdflib',
+  components: {
+    outline
+  },
+  props: {
+    pdf_src: { type: String, default: '/jpa.pdf' }
+  },
+  data () {
+    return {
+      mode: 'phone',
+      flg: false,
+      // pdf放大系数
+      pdf_scale: 1,
+      // 所有页
+      pdf_pages: [],
+      // 当前页
+      is_page: 1,
+      pdfDoc: null,
+      // 目录大纲
+      outlineData: [],
+      // 目录宽度
+      outlineWidth: '100%',
+      // 是否显示目录
+      outlineShow: false,
+      // 记录当前时间
+      date: 0,
+      // 默认阻断阈值 毫秒
+      threshold: 200,
+      // 目录默认点击后打开或关闭
+      showAndHided: false
+    }
+  },
+  mounted () {
+    this.init()
+    this.fingerInit()
+  },
+  methods: {
+    // 初始化屏幕触控
+    fingerInit () {
+      this.$finger(document.getElementsByTagName('canvas')[0], {
+        pinch: this.zoom,
+        swipe: this.swipeHandler
+      })
+    },
+    // 初始化应用 判断屏幕宽度
+    init () {
+      const result = window.matchMedia('(min-width: 500px)').matches
+      if (result) {
+        this.pdf_scale = 0.3
+        this.outlineWidth = '25%'
+        this.showAndHided = true
+        this.mode = 'pc'
+      }
+      this._loadFile(this.pdf_src)
+    },
+    // 初始化pdf 加载pdf文件
+    _loadFile (url) {
+      const loadingTask = PDFJS.getDocument(url)
+      loadingTask.promise
+        .then((pdf) => {
+          this.pdfDoc = pdf
+          this.pdf_pages = this.pdfDoc.numPages
+          this.$nextTick(() => {
+            this._renderPage(this.is_page)
+            this.get_contents()
+          })
+        })
+    },
+    // 渲染pdf页
+    _renderPage (num) {
+      this.pdfDoc.getPage(num)
+        .then((page) => {
+          // 获取dom元素
+          // const canvas = document.getElementById('the-canvas' + num)
+          const canvas = document.getElementById('the-canvas')
+          // 设置2D渲染
+          const ctx = canvas.getContext('2d')
+          // 设备像素比
+          const dpr = window.devicePixelRatio || 1
+          const bsr = ctx.webkitBackingStorePixelRatio ||
+              ctx.mozBackingStorePixelRatio ||
+              ctx.msBackingStorePixelRatio ||
+              ctx.oBackingStorePixelRatio ||
+              ctx.backingStorePixelRatio || 1
+          const ratio = dpr / bsr
+          // 参数为放大倍率
+          const viewport = page.getViewport({ scale: (screen.availWidth / page.getViewport({ scale: 1 }).width) * this.pdf_scale })
+          // 设置元素大小
+          const { width, height } = viewport
+          canvas.width = width * ratio
+          canvas.height = height * ratio
+          canvas.style.width = `${width}px`
+          canvas.style.height = `${height}px`
+          // 重绘cavas
+          ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+          const renderContext = {
+            canvasContext: ctx,
+            viewport: viewport
+          }
+          // 渲染
+          page.render(renderContext)
+          this.flg = false
+          // if (this.pdf_pages > num) {
+          //   this._renderPage(num + 1)
+          // }
+        })
+    },
+    // 获取目录
+    get_contents () {
+      this.pdfDoc.getOutline()
+        .then((Outline) => {
+          this.outlineData = Outline
+        })
+    },
+    // 点击目录
+    async outline_item (e) {
+      const r = await this.pdfDoc.getDestination(e.dest)
+      const p = await this.pdfDoc.getPageIndex(r[0])
+      this.is_page = p + 1
+      this._renderPage(this.is_page)
+      this.outlineShow = this.showAndHided
+    },
+    // 上一页
+    pre_page () {
+      if (this.is_page <= 1) return
+      this.is_page--
+      this._renderPage(this.is_page)
+    },
+    // 下一页
+    next_page () {
+      if (this.is_page >= this.pdf_pages) return
+      this.is_page++
+      this._renderPage(this.is_page)
+    },
+    // 放大
+    zoom_big () {
+      this.pdf_scale += 0.1
+      this._renderPage(this.is_page)
+    },
+    // 缩小
+    zoom_small () {
+      this.pdf_scale -= 0.1
+      this._renderPage(this.is_page)
+    },
+    /*
+    /* 以下为移动端触控事件
+    */
+    // 缩放
+    zoom (e) {
+      const prevent = this.prevent(100)
+      if (!prevent) return
+      this.flg = true
+      const { zoom } = e
+      this.pdf_scale = this.pdf_scale * zoom
+      if (this.pdf_scale > 2) this.pdf_scale = 2
+      if (this.pdf_scale < 1) this.pdf_scale = 1
+      this.domScrol()
+      this._renderPage(this.is_page)
+    },
+    // 移动方向翻页
+    swipeHandler (evt) {
+      if (this.flg) return
+      const prevent = this.prevent(200)
+      if (!prevent) return
+      if (this.pdf_scale !== 0.3 && this.pdf_scale !== 1) {
+        this.domScrol()
+        return
+      }
+      if (evt?.direction === 'Up' || evt?.direction === 'Left') this.next_page()
+      if (evt?.direction === 'Down' || evt?.direction === 'Right') this.pre_page()
+    },
+    // 移动端滚动位置
+    domScrol (e) {
+      const el = document.getElementsByClassName('canvasBox')[0]
+      if (e) {
+        el.scrollLeft = 0
+        el.scrollTop = 0
+      }
+      el.scrollLeft -= 0.1
+      el.scrollTop -= 0.1
+    },
+    // pc滚动事件
+    mouseWheel (e) {
+      if (this.pdf_scale.toFixed(1) > 0.3) return
+      const prevent = this.prevent(200)
+      if (!prevent) return
+      if (e.wheelDelta || e.detail) {
+        // 当鼠标滚轮向上滚动时
+        if (e.wheelDelta > 0 || e.detail < 0) {
+          this.pre_page()
+        }
+        // 当鼠标滚轮向下滚动时
+        if (e.wheelDelta < 0 || e.detail > 0) {
+          this.next_page()
+        }
+      }
+    },
+    // 阻断连续调用
+    prevent (num) {
+      const date = moment().valueOf()
+      if (date - this.data < num ?? this.threshold) return false
+      this.data = date
+      return true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.pdf {
+  width: 100vw;
+  height: 100vh;
+}
+.canvasBox {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #000;
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+}
+.canvas {
+  margin: 0 auto;
+  display: block;
+}
+.btnbox {
+  position: fixed;
+  top: 10px;
+  left: 5%;
+  width: 90%;
+  height: 5vh;
+  .left {
+    margin-left: 40%;
+  }
+  .right {
+    margin-right: 40%;
+  }
+}
+.outline {
+  height: 95vh;
+  top: 5vh;
+  position: fixed;
+  left: 0;
+}
+.outline ::-webkit-scrollbar {
+  width: 0px; /*对垂直流动条有效*/
+  height: 0px; /*对水平流动条有效*/
+}
+</style>

src/lib/alloyfinger.js

@@ -0,0 +1,9 @@
+import AlloyFinger from 'alloyfinger'
+const finger = {}
+finger.install = function (Vue, options) {
+  Vue.prototype.$finger = function (element, options = {}) {
+    return new AlloyFinger(element, options)
+  }
+}
+
+export default finger

src/main.js

@@ -2,9 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+import finger from './lib/alloyfinger'
+import { Button } from 'element-ui'
 Vue.config.productionTip = false
-
+Vue.use(finger)
+Vue.component(Button.name, Button)
 new Vue({
   router,
   store,

src/router/index.js

@@ -9,14 +9,6 @@ const routes = [
     path: '/',
     name: 'Home',
     component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
 ]
 

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +1,23 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <pdf :pdf_src="'/jpa.pdf'" />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import pdf from '@/components/pdf.vue'
 
 export default {
   name: 'Home',
   components: {
-    HelloWorld
+    pdf
   }
 }
 </script>
+<style lang="less">
+html, body {
+  margin: 0;
+  padding: 0;
+}
+</style>