- 完成 项目搭建

.eslintrc.js

@@ -1,3 +1,10 @@
+/*
+ * @Date: 2022-01-19 10:08:26
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-01-19 10:29:11
+ * @FilePath: \alipay-scan-code-front-end\.eslintrc.js
+ * @description:
+ */
 module.exports = {
   root: true,
   env: {
@@ -8,8 +15,9 @@ module.exports = {
     parser: "babel-eslint",
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "off" : "off",
+    "prettier/prettier": "off", //关闭 prettier 验证
   },
   overrides: [
     {

.postcssrc.js

@@ -0,0 +1,32 @@
+/*
+ * @Date: 2022-01-19 10:10:50
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-01-21 15:57:33
+ * @FilePath: \alipay-scan-code-front-end\.postcssrc.js
+ * @description:
+ */
+const path = require("path");
+
+module.exports = ({ webpack }) => {
+  const designWidth = webpack.resourcePath.includes(path.join("node_modules", "vant")) ? 375 : 375;
+  return {
+    plugins: {
+      autoprefixer: {},
+      "postcss-px-to-viewport": {
+        unitToConvert: "px",
+        viewportWidth: designWidth,
+        unitPrecision: 6,
+        propList: ["*"],
+        viewportUnit: "vw",
+        fontViewportUnit: "vw",
+        selectorBlackList: [],
+        minPixelValue: 1,
+        mediaQuery: true,
+        exclude: [],
+        landscape: false,
+        landscapeUnit: 'vw', // 横屏时使用的单位
+        landscapeWidth: 1125 // 横屏时使用的视口宽度
+      }
+    }
+  };
+};

babel.config.js

@@ -1,3 +1,17 @@
+/*
+ * @Date: 2022-01-19 10:08:26
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-01-19 10:56:39
+ * @FilePath: \alipay-scan-code-front-end\babel.config.js
+ * @description:
+ */
 module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
+  ]
 };

package-lock.json

@@ -7,7 +7,10 @@
     "": {
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.26.0",
         "core-js": "^3.6.5",
+        "nprogress": "^0.2.0",
+        "vant": "^2.12.39",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
         "vuex": "^3.4.0"
@@ -20,10 +23,12 @@
         "@vue/eslint-config-prettier": "^6.0.0",
         "@vue/test-utils": "^1.0.3",
         "babel-eslint": "^10.1.0",
+        "babel-plugin-import": "^1.13.3",
         "eslint": "^6.7.2",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^6.2.2",
         "lint-staged": "^9.5.0",
+        "postcss-px-to-viewport": "^1.1.1",
         "prettier": "^2.2.1",
         "sass": "^1.26.5",
         "sass-loader": "^8.0.2",
@@ -1597,7 +1602,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -2039,6 +2043,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@samverschueren/stream-to-observable": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz",
@@ -2479,11 +2492,23 @@
       "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==",
       "dev": true
     },
+    "node_modules/@vant/icons": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.3.tgz",
+      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
+      "integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
-      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==",
-      "dev": true
+      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -3705,6 +3730,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -3865,6 +3898,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "node_modules/babel-plugin-import": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
+      "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "node_modules/babel-plugin-istanbul": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
@@ -8217,10 +8260,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
-      "dev": true,
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
       "funding": [
         {
           "type": "individual",
@@ -13062,6 +13104,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "node_modules/nth-check": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
@@ -14568,6 +14615,16 @@
       "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
       "dev": true
     },
+    "node_modules/postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "dependencies": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -15163,8 +15220,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
@@ -18048,6 +18104,21 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "2.12.39",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.39.tgz",
+      "integrity": "sha512-6WQdySrjV4e9oCH1hbbI9ynkc3AwarwAc0k54Y3NRXQxciZ1C9DMjqUYxGSSR1acgqSB/GHcumneOdSui+BoCg==",
+      "dependencies": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      },
+      "peerDependencies": {
+        "vue": ">= 2.6.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -18152,6 +18223,11 @@
         "vue-template-compiler": "^2.x"
       }
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "node_modules/vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
@@ -20592,7 +20668,6 @@
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
       "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -20955,6 +21030,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
     "@samverschueren/stream-to-observable": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz",
@@ -21359,11 +21439,23 @@
       "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==",
       "dev": true
     },
+    "@vant/icons": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.3.tgz",
+      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
+    },
+    "@vant/popperjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.1.0.tgz",
+      "integrity": "sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==",
+      "requires": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
-      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==",
-      "dev": true
+      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
     },
     "@vue/babel-helper-vue-transform-on": {
       "version": "1.0.2",
@@ -22354,6 +22446,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.0.tgz",
+      "integrity": "sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -22479,6 +22579,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-import": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
+      "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
@@ -26000,10 +26110,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
-      "dev": true
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -29839,6 +29948,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
@@ -31080,6 +31194,16 @@
         }
       }
     },
+    "postcss-px-to-viewport": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
+      "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": ">=4.0.1",
+        "postcss": ">=5.0.2"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -31559,8 +31683,7 @@
     "regenerator-runtime": {
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -33908,6 +34031,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "2.12.39",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.39.tgz",
+      "integrity": "sha512-6WQdySrjV4e9oCH1hbbI9ynkc3AwarwAc0k54Y3NRXQxciZ1C9DMjqUYxGSSR1acgqSB/GHcumneOdSui+BoCg==",
+      "requires": {
+        "@babel/runtime": "7.x",
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+        "vue-lazyload": "1.2.3"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -33990,6 +34125,11 @@
         "vue-template-es2015-compiler": "^1.6.0"
       }
     },
+    "vue-lazyload": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
+      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
+    },
     "vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",

package.json

@@ -3,13 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve --mode development",
+    "test": "vue-cli-service serve --mode test",
+    "pro": "vue-cli-service serve --mode production",
     "build": "vue-cli-service build",
+    "build-test": "vue-cli-service build --mode test",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "axios": "^0.26.0",
     "core-js": "^3.6.5",
+    "nprogress": "^0.2.0",
+    "vant": "^2.12.39",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
@@ -22,10 +28,12 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.3",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
     "lint-staged": "^9.5.0",
+    "postcss-px-to-viewport": "^1.1.1",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",

public/index.html

@@ -1,11 +1,18 @@
+<!--
+ * @Date: 2022-01-19 10:08:26
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-02-16 10:52:18
+ * @FilePath: \alipay-scan-code-front-end\public\index.html
+ * @description:
+-->
 <!DOCTYPE html>
 <html lang="">
   <head>
     <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, maximum-scale=1.0, user-scalable=0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>电子学生证订购服务</title>
   </head>
   <body>
     <noscript>

src/App.vue

@@ -1,32 +1,48 @@
+<!--
+ * @Date: 2022-01-19 10:08:26
+ * @LastEditors: JinxChen
+ * @LastEditTime: 2022-02-23 17:23:45
+ * @FilePath: \AlipayFrontEnd\src\App.vue
+ * @description:
+-->
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app">
+        <router-view v-if="isRouterAlive" />
     </div>
-    <router-view />
-  </div>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+<script>
+import { VersionModel } from './config/models';
+export default {
+    provide() {
+            return {
+                reload: this.reload
+            }
+        },
+    data() {
+            return {
+                isRouterAlive: true,
+            }
+        },
+        mounted() {
+            console.log("当前版本号::", VersionModel, "当前环境::", process.env.NODE_ENV);
+        },
+        methods: {
+            reload() {
+                this.isRouterAlive = false;
+                this.$nextTick(() => {
+                    this.isRouterAlive = true;
+                });
+            }
+        }
 }
+</script>
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
+<style lang="scss">
+#app {
+    text-align: center;
     color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+    height: 100vh;
+    width: 100vw;
 }
 </style>

vue.config.js

@@ -0,0 +1,53 @@
+/*
+ * @Author: your name
+ * @Date: 2020-04-15 10:00:32
+ * @LastEditTime: 2022-02-23 17:36:48
+ * @LastEditors: JinxChen
+ * @Description: In User Settings Edit
+ * @FilePath: \AlipayFrontEnd\vue.config.js
+ */
+const port = process.env.port || process.env.npm_config_port || 8080;/* 7788 */ // dev port
+
+module.exports = {
+    publicPath: './',
+    outputDir: 'dist',
+    // assetsDir: 'static',
+    // lintOnSave: process.env.NODE_ENV === 'development',
+    productionSourceMap: false,
+    devServer: {
+        port: port,
+        open: true,
+        overlay: {
+            warnings: false,
+            errors: true
+        },
+        /* proxy: proxy, */
+        /* host: '192.168.3.186',  */// 原为: hotst: 'localhost', 可在同一ip局域网下通过网址生成二维码的方式调试h5, 注意:调试完毕请注释
+        //disableHostCheck: true, //真机调试开启
+    },
+    css: {
+        // 将组件内部的css提取到一个单独的css文件（只用在生产环境）
+        // 也可以是传递给 extract-text-webpack-plugin 的选项对象
+        extract: true,
+        // 允许生成 CSS source maps?
+        sourceMap: true,
+        // pass custom options to pre-processor loaders. e.g. to pass options to // sass-loader, use { sass: { ... } }
+        loaderOptions: {},
+        // Enable CSS modules for all css / pre-processor files. // This option does not affect *.vue files.
+        requireModuleExtension: true
+    },
+    chainWebpack: config => {
+        // 该配置用来配置打包生成的文件是否带hash值后缀，该值默认为true，
+        // 在模式为production的时候，打包出的js和css文件会自动添加hash值后缀。
+        // 但是在当前模式为development的时候，就算该值为true，打包出的js文件不带hash值（css文件仍然受该值控制）。
+        // 这个时候我们该怎么给打包的文件增加hash值呢：
+        if (process.env.NODE_ENV !== 'production')
+            config.output.filename('js/[name].[hash].js').chunkFilename('js/[name].[hash].js').end();
+
+        // 如果filenameHashing设置为了false，可以通过这段代码给打包出的css文件增加hash值
+        // config.plugin('extract-css').tap(args => [{
+        //   filename: 'css/[name].[hash].css',
+        //   chunkFilename: 'css/[name].[hash].css'
+        // }])
+    }
+};