vue3小demo

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1 @@
+### Vite-Vue

Vite-Vue-tutorial/package-lock.json

@@ -8,7 +8,12 @@
       "name": "vite-vue-tutorial",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.2.37"
+        "axios": "^0.27.2",
+        "nprogress": "^0.2.0",
+        "router": "^1.3.7",
+        "vant": "^3.6.3",
+        "vue": "^3.2.37",
+        "vue-router": "^4.1.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.0",
@@ -58,6 +63,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.4.3.tgz",
+      "integrity": "sha512-rSnETN7P9qT1WbItMpQxBqe3cHeK2ZFYp1sCxWUXaTeI71TqA8sOdzC36ledZ36NQgFNTch9fsRPYOkrCgZfQA=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.1.2.tgz",
@@ -117,6 +137,11 @@
         "@vue/shared": "3.2.40"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.3.tgz",
+      "integrity": "sha512-9WCRwdROJvWcHAdyrR7SZMM/qUvllDZnpndHXokThkUsjnJ2xe4/pvsH9FZrxFe22L+JmDKczL79HjLJ7DK9rg=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.2.40",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.40.tgz",
@@ -173,11 +198,57 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.40.tgz",
       "integrity": "sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ=="
     },
+    "node_modules/array-flatten": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-3.0.0.tgz",
+      "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.15.10",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.15.10.tgz",
@@ -540,6 +611,32 @@
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz",
@@ -589,6 +686,38 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
@@ -600,12 +729,30 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -653,6 +800,28 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/router": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmmirror.com/router/-/router-1.3.7.tgz",
+      "integrity": "sha512-bYnD9Vv2287+g3AIll2kHITLtHV5+fldq6hVzaul9RbdGme77mvBY/1cO+ahsgstA2RI6DSg/j4W1TYHm4Lz4g==",
+      "dependencies": {
+        "array-flatten": "3.0.0",
+        "debug": "2.6.9",
+        "methods": "~1.1.2",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "setprototypeof": "1.2.0",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -683,6 +852,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/vant": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-3.6.3.tgz",
+      "integrity": "sha512-OmqQXgtgJgNNoGV8FzvGkm/fvXOB70ZmruOUU4iJaEmEwdsdYl+31D6niisWZLVAbGW1Xx9rLrOu9hivdxQbbg==",
+      "dependencies": {
+        "@vant/icons": "^1.8.0",
+        "@vant/popperjs": "^1.2.1",
+        "@vant/use": "^1.4.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "3.1.4",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-3.1.4.tgz",
@@ -735,6 +925,17 @@
         "@vue/server-renderer": "3.2.40",
         "@vue/shared": "3.2.40"
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.1.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   },
   "dependencies": {
@@ -757,6 +958,21 @@
       "dev": true,
       "optional": true
     },
+    "@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "@vant/use": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.4.3.tgz",
+      "integrity": "sha512-rSnETN7P9qT1WbItMpQxBqe3cHeK2ZFYp1sCxWUXaTeI71TqA8sOdzC36ledZ36NQgFNTch9fsRPYOkrCgZfQA=="
+    },
     "@vitejs/plugin-vue": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.1.2.tgz",
@@ -810,6 +1026,11 @@
         "@vue/shared": "3.2.40"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.3.tgz",
+      "integrity": "sha512-9WCRwdROJvWcHAdyrR7SZMM/qUvllDZnpndHXokThkUsjnJ2xe4/pvsH9FZrxFe22L+JmDKczL79HjLJ7DK9rg=="
+    },
     "@vue/reactivity": {
       "version": "3.2.40",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.40.tgz",
@@ -863,11 +1084,51 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.40.tgz",
       "integrity": "sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ=="
     },
+    "array-flatten": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/array-flatten/-/array-flatten-3.0.0.tgz",
+      "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "esbuild": {
       "version": "0.15.10",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.15.10.tgz",
@@ -1043,6 +1304,21 @@
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz",
@@ -1082,17 +1358,55 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
+    },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -1128,6 +1442,25 @@
         "fsevents": "~2.3.2"
       }
     },
+    "router": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmmirror.com/router/-/router-1.3.7.tgz",
+      "integrity": "sha512-bYnD9Vv2287+g3AIll2kHITLtHV5+fldq6hVzaul9RbdGme77mvBY/1cO+ahsgstA2RI6DSg/j4W1TYHm4Lz4g==",
+      "requires": {
+        "array-flatten": "3.0.0",
+        "debug": "2.6.9",
+        "methods": "~1.1.2",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "setprototypeof": "1.2.0",
+        "utils-merge": "1.0.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@@ -1149,6 +1482,21 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
+    },
+    "vant": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-3.6.3.tgz",
+      "integrity": "sha512-OmqQXgtgJgNNoGV8FzvGkm/fvXOB70ZmruOUU4iJaEmEwdsdYl+31D6niisWZLVAbGW1Xx9rLrOu9hivdxQbbg==",
+      "requires": {
+        "@vant/icons": "^1.8.0",
+        "@vant/popperjs": "^1.2.1",
+        "@vant/use": "^1.4.2"
+      }
+    },
     "vite": {
       "version": "3.1.4",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-3.1.4.tgz",
@@ -1173,6 +1521,14 @@
         "@vue/server-renderer": "3.2.40",
         "@vue/shared": "3.2.40"
       }
+    },
+    "vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.1.4"
+      }
     }
   }
 }

Vite-Vue-tutorial/package.json

@@ -9,7 +9,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "axios": "^0.27.2",
+    "nprogress": "^0.2.0",
+    "router": "^1.3.7",
+    "vant": "^3.6.3",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",

Vite-Vue-tutorial/src/App.vue

@@ -1,9 +1,39 @@
 <script setup>
+import { Tabbar, TabbarItem } from "vant";
 </script>
 
 <template>
-<h1>Hello World!</h1>
+	<router-view class="main"></router-view>
+
+	<tabbar route :fixed="false" active-color="deeppink">
+		<tabbar-item icon="home-o" :to="{ name: 'Home' }">首页</tabbar-item>
+		<tabbar-item icon="search" :to="{ name: 'List' }">列表</tabbar-item>
+		<tabbar-item icon="user-o" :to="{ name: 'User' }">用户</tabbar-item>
+		<tabbar-item icon="shopping-cart-o" :to="{ name: 'Carts' }"
+			>购物车</tabbar-item
+		>
+	</tabbar>
 </template>
 
 <style scoped>
+button {
+	font-size: 20px;
+	width: 3rem;
+	background-color: lemonchiffon;
+	border-radius: 5px;
+}
+
+input {
+	font-size: 20px;
+	border-radius: 5px;
+}
+
+a {
+	text-decoration: none;
+}
+
+.main {
+	flex: 1;
+	overflow: auto;
+}
 </style>

Vite-Vue-tutorial/src/hooks/useCategories.js

@@ -0,0 +1,17 @@
+import { loadCategoriesAPI } from "../services/categories";
+import { ref } from "vue";
+
+/**
+ * 返回分类接口的数据
+ * @returns 
+ */
+
+export const useCategories = () => {
+    const categories = ref([]);
+    loadCategoriesAPI().then(res => {
+        categories.value = res.data;
+    });
+    return {
+        categories,
+    }
+};

Vite-Vue-tutorial/src/main.js

@@ -1,5 +1,39 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
 import './style.css'
+import 'vant/lib/index.css' // 引入vant样式
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            name: 'Home',
+            component: () => import('./views/Home.vue'),
+        }, {
+            path: '/list',
+            name: 'List',
+            component: () => import('./views/List.vue'),
+        },
+        {
+            path: '/carts',
+            name: 'Carts',
+            component: () => import('./views/Carts.vue'),
+        },
+        {
+            path: '/user',
+            name: 'User',
+            component: () => import('./views/User.vue'),
+        }
+    ]
+})
+
+// 路由前置守卫
+router.beforeEach((to, from, next) => {
+    console.log('beforeEach');
+    next();
+});
+
+// 使用router组件
+createApp(App).use(router).mount('#app')

Vite-Vue-tutorial/src/services/banners.js

@@ -0,0 +1,7 @@
+import { get } from "../utils/request";
+
+/**
+ * 获取轮播图
+ * @returns 
+ */
+export const loadBannersAPI = () => get('/api/v1/banners');

Vite-Vue-tutorial/src/services/categories.js

@@ -0,0 +1,7 @@
+import { get } from "../utils/request";
+
+/**
+ * 返回所有商品分类
+ * @returns 
+ */
+export const loadCategoriesAPI = () => get('api/v1/product_categories');

Vite-Vue-tutorial/src/services/products.js

@@ -0,0 +1,13 @@
+import { get } from '../utils/request'
+
+
+/**
+ * 获取商品信息
+ * @param {*} page 页号
+ * @param {*} category 分类，为空表示不分类
+ * @returns 
+ */
+export const loadProductAPI = (page = 1, category = '') => get('/api/v1/products/', {
+    page,
+    category,
+});

Vite-Vue-tutorial/src/style.css

@@ -0,0 +1,12 @@
+html,body,#app {
+    height: 100%;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+}
+
+img {
+    max-width: 100%;
+}

Vite-Vue-tutorial/src/utils/request.js

@@ -0,0 +1,68 @@
+import axios from "axios";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+export const serverUrl = "http://localhost:1337";
+
+const instance = axios.create({
+    baseURL: serverUrl, // 请求的基础地址
+    timeout: 5000, // 超时时间
+});
+
+/**
+ * get 请求
+ * @param {*} url 请求地址
+ * @param {*} params 传递的数据
+ * @returns
+ */
+export const get = (url, params) =>
+    instance.get(url, {
+        params: params, // url传递的参数
+    });
+
+/**
+ * post 请求
+ * @param {*} url 请求地址
+ * @param {*} data 数据
+ * @returns
+ */
+export const post = (url, data) => instance.post(url, data);
+
+/**
+ * put 请求
+ * @param {*} url 请求地址
+ * @param {*} data 数据
+ * @returns
+ */
+export const put = (url, data) => instance.put(url, data);
+
+/**
+ * delete 请求
+ * @param {*} url 请求地址
+ * @returns
+ */
+export const del = (url) => instance.delete(url);
+
+// Add a request interceptor (全局请求拦截)
+instance.interceptors.request.use(
+    function (config) {
+        NProgress.start(); // 启动进度条
+        // 这里还可以设置token
+        return config;
+    },
+    function (error) {
+        return Promise.reject(error);
+    }
+);
+
+// Add a response interceptor (全局响应拦截)
+instance.interceptors.response.use(
+    function (response) {
+        NProgress.done(); // 关闭进度条
+        return response.data;
+    },
+    function (error) {
+        NProgress.done(); // 关闭进度条
+        return Promise.reject(error);
+    }
+);

Vite-Vue-tutorial/src/utils/tools.js

@@ -0,0 +1,18 @@
+import { serverUrl } from "./request";
+
+
+export const extName = str => `【${str}】`;
+
+/**
+ * 处理返回数据中的url字段
+ * @param {*} url 请求返回的图片url
+ */
+export const dalImageUrl = url => {
+    if (url) {
+        if (url.startsWith('http')) {
+            return url;
+        }
+        return serverUrl + url;
+    }
+    return "https://hugo.bnblogs.cc/images/img/20220215001349.png";
+}

Vite-Vue-tutorial/src/views/Carts.vue

@@ -0,0 +1,78 @@
+<template>
+	<div class="carts">
+		<h1>购物车</h1>
+		<hr />
+		<label><input type="checkbox" v-model="checkAll" />全选</label>
+		<hr />
+		<ul>
+			<li v-for="item in carts" :key="item.id">
+				<label>
+					<input type="checkbox" v-model="item.chk" />
+					{{ item.name }}
+				</label>
+				<p>
+					数量：
+					<button @click="item.amount > 1 ? item.amount-- : null">
+						-
+					</button>
+					{{ item.amount }}
+					<button @click="item.amount++">+</button>
+				</p>
+				<p>价格：{{ item.price }}</p>
+			</li>
+		</ul>
+		<p>总价值：{{ sumPrice }}</p>
+	</div>
+</template>
+<script setup>
+import { ref, computed } from "vue";
+const carts = ref([
+	{
+		id: 1,
+		name: "huawei",
+		chk: true,
+		amount: 2,
+		price: 5000,
+	},
+	{
+		id: 2,
+		name: "xiaomi",
+		chk: true,
+		amount: 5,
+		price: 3000,
+	},
+	{
+		id: 3,
+		name: "oppo",
+		chk: false,
+		amount: 3,
+		price: 4000,
+	},
+]);
+
+const checkAll = computed({
+	// 主动设置值=v
+	set(v) {
+		carts.value.forEach((item) => (item.chk = v));
+	},
+	// 被动改变值
+	get() {
+		return carts.value.every((item) => item.chk);
+	},
+});
+
+const sumPrice = computed(
+	() =>
+		carts.value
+			.filter((item) => item.chk) // 获取选中的商品
+			.reduce((pre, cur) => pre + cur.amount * cur.price, 0) // 求和
+);
+</script>
+
+<style scoped>
+li {
+	list-style: none;
+	padding: 8px;
+	border-bottom: 1px solid black;
+}
+</style>

Vite-Vue-tutorial/src/views/Home.vue

@@ -0,0 +1,56 @@
+<template>
+	<div class="home">
+		<swipe class="my-swipe" :autoplay="2000" indicator-color="white">
+			<swipe-item v-for="item in banners" :key="item.id">
+				<img :src="dalImageUrl(item.coverImage)" :alt="item.name" />
+			</swipe-item>
+		</swipe>
+		<grid :column-num="3">
+			<grid-item
+				v-for="item in categories"
+				:key="item.id"
+				:icon="dalImageUrl(item.coverImage)"
+				:text="item.name"
+				:to="{ name: 'List', query: { tid: item.id } }"
+			/>
+		</grid>
+		<card
+			v-for="item in products"
+			:key="item.id"
+			:num="item.amount"
+			:price="item.price.toFixed(2)"
+			:title="item.name"
+			:thumb="dalImageUrl(item.coverImage)"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { Card } from "vant";
+import { Swipe, SwipeItem } from "vant";
+import { Grid, GridItem } from "vant";
+import { ref } from "vue";
+import { loadProductAPI } from "../services/products";
+import { dalImageUrl } from "../utils/tools";
+import { loadBannersAPI } from "../services/banners";
+import { useCategories } from "../hooks/useCategories";
+
+// 商品
+const products = ref([]);
+loadProductAPI().then((res) => {
+	products.value = res.data;
+});
+
+// 轮播图
+const banners = ref([]);
+loadBannersAPI().then((res) => {
+	banners.value = res.data;
+});
+
+// 商品分类
+// const categories = useCategories().categories;
+// 和上述代码等价
+const { categories } = useCategories();
+</script>
+
+<style scoped></style>

Vite-Vue-tutorial/src/views/List.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="list">
+		<sidebar v-model="active">
+			<sidebar-item
+				v-for="item in categories"
+				:title="item.name"
+				:key="item.id"
+				:to="{ name: 'List', query: { tid: item.id } }"
+			/>
+		</sidebar>
+
+		<div class="products">
+			<card
+				v-for="item in products"
+				:key="item.id"
+				:num="item.amount"
+				:price="item.price.toFixed(2)"
+				:title="item.name"
+				:thumb="dalImageUrl(item.coverImage)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { Sidebar, SidebarItem, Card } from "vant";
+import { ref, computed } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+import { useCategories } from "../hooks/useCategories";
+import { useRoute } from "vue-router";
+import { loadProductAPI } from "../services/products";
+import { dalImageUrl } from "../utils/tools";
+
+const route = useRoute();
+
+// 当前分类
+const currentCategoryId = ref(route.query.tid);
+// 解构字典中的数据
+const { categories } = useCategories();
+// 当前选择的分类是哪一个
+const active = computed({
+	// 设置属性值
+	set(v) {
+		return v;
+	},
+	// 获取属性值
+	get() {
+		return categories.value.findIndex(
+			(item) => item.id == currentCategoryId.value
+		);
+	},
+});
+
+// 路由改变时执行
+onBeforeRouteUpdate((to, from) => {
+	currentCategoryId.value = to.query.tid;
+	loadDataFromServer();
+});
+
+// 获取对应分类的商品
+const products = ref([]);
+
+const loadDataFromServer = () => {
+	loadProductAPI(1, currentCategoryId.value).then((res) => {
+		products.value = res.data;
+	});
+};
+
+loadDataFromServer();
+</script>
+
+<style scoped>
+.list {
+	display: flex;
+}
+.list .van-sidebar {
+	width: 105px;
+}
+.products {
+	overflow: auto;
+}
+</style>

Vite-Vue-tutorial/src/views/User.vue

@@ -0,0 +1,6 @@
+<template>
+	<div class="user">
+		<h1>用户中心</h1>
+		<hr />
+	</div>
+</template>