初始化

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "demo-cart",
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.21.1",
@@ -420,9 +421,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.14.7",
+      "version": "7.21.8",
-      "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.7.tgz?cache=0&sync_timestamp=1624313307720&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.14.7.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.8.tgz",
-      "integrity": "sha1-YJlyDIg5yoZaJjfmyFhS6tC9tZU=",
+      "integrity": "sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -2307,6 +2308,95 @@
         "node": ">=8"
       }
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
+      "version": "8.4.23",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
+      "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/@vue/compiler-sfc/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
     "node_modules/@vue/component-compiler-utils": {
       "version": "3.2.2",
       "resolved": "https://registry.nlark.com/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.2.2.tgz?cache=0&sync_timestamp=1623744211654&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.2.2.tgz",
@@ -2370,6 +2460,27 @@
         "webpack": ">=4.0.0"
       }
     },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npm.taobao.org/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz?cache=0&sync_timestamp=1613217512415&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fweb-component-wrapper%2Fdownload%2F%40vue%2Fweb-component-wrapper-1.3.0.tgz",
@@ -5654,6 +5765,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/esutils/download/esutils-2.0.3.tgz",
@@ -8056,6 +8174,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
@@ -8441,6 +8569,19 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",
@@ -9230,6 +9371,13 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&sync_timestamp=1621648305056&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz",
@@ -11213,6 +11361,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npm.taobao.org/source-map-resolve/download/source-map-resolve-0.5.3.tgz",
@@ -11251,6 +11409,14 @@
       "integrity": "sha1-CvZmBadFpaL5HPG7+KevvCg97FY=",
       "dev": true
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz",
@@ -14106,9 +14272,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.14.7",
+      "version": "7.21.8",
-      "resolved": "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.7.tgz?cache=0&sync_timestamp=1624313307720&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fparser%2Fdownload%2F%40babel%2Fparser-7.14.7.tgz",
+      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.8.tgz",
-      "integrity": "sha1-YJlyDIg5yoZaJjfmyFhS6tC9tZU=",
+      "integrity": "sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==",
       "dev": true
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
@@ -15522,6 +15688,90 @@
         }
       }
     },
+    "@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.23",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.23.tgz",
+          "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "peer": true
+        }
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
     "@vue/component-compiler-utils": {
       "version": "3.2.2",
       "resolved": "https://registry.nlark.com/@vue/component-compiler-utils/download/@vue/component-compiler-utils-3.2.2.tgz?cache=0&sync_timestamp=1623744211654&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Fcomponent-compiler-utils%2Fdownload%2F%40vue%2Fcomponent-compiler-utils-3.2.2.tgz",
@@ -15576,6 +15826,27 @@
       "dev": true,
       "requires": {}
     },
+    "@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==",
+      "dev": true,
+      "peer": true
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npm.taobao.org/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz?cache=0&sync_timestamp=1613217512415&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fweb-component-wrapper%2Fdownload%2F%40vue%2Fweb-component-wrapper-1.3.0.tgz",
@@ -18364,6 +18635,13 @@
       "integrity": "sha1-OYrT88WiSUi+dyXoPRGn3ijNvR0=",
       "dev": true
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "peer": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/esutils/download/esutils-2.0.3.tgz",
@@ -20312,6 +20590,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
@@ -20636,6 +20924,13 @@
       "dev": true,
       "optional": true
     },
+    "nanoid": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "dev": true,
+      "peer": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npm.taobao.org/nanomatch/download/nanomatch-1.2.13.tgz",
@@ -21294,6 +21589,13 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
       "dev": true
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true,
+      "peer": true
+    },
     "picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&sync_timestamp=1621648305056&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz",
@@ -23009,6 +23311,13 @@
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "peer": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npm.taobao.org/source-map-resolve/download/source-map-resolve-0.5.3.tgz",
@@ -23046,6 +23355,13 @@
       "integrity": "sha1-CvZmBadFpaL5HPG7+KevvCg97FY=",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true,
+      "peer": true
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/spdx-correct/download/spdx-correct-3.1.1.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "bootstrap": "^5.0.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.11"

src/App.vue

@@ -1,11 +1,107 @@
 <template>
-  <div class="app-container">
+    <div class="app-container">
-    <h1>App 根组件</h1>
+        <!-- Header 头部区域 -->
-  </div>
+        <Header title="购物车案例"></Header>
+        <!-- 循环渲染每一个商品的信息 -->
+        <Goods
+                v-for="item in list"
+                :id="item.id"
+                :key="item.id"
+                :count="item.goods_count"
+                :pic="item.goods_img"
+                :price="item.goods_price"
+                :state="item.goods_state"
+                :title="item.goods_name"
+                @state-change="getNewState"
+        ></Goods>
+
+        <!-- Footer 区域 -->
+        <Footer :all="total" :amount="amt" :isfull="fullState" @full-change="getFullState"></Footer>
+    </div>
 </template>
 
 <script>
-export default {}
+// 导入 axios 请求库
+import axios from 'axios'
+// 导入需要的组件
+import Header from '@/components/Header/Header.vue'
+import Goods from '@/components/Goods/Goods.vue'
+import Footer from '@/components/Footer/Footer.vue'
+
+import bus from '@/components/eventBus.js'
+
+export default {
+    data() {
+        return {
+            // 用来存储购物车的列表数据，默认为空数组
+            list: []
+        }
+    },
+    // 计算属性
+    computed: {
+        // 动态计算出全选的状态是 true 还是 false
+        fullState() {
+            return this.list.every(item => item.goods_state)
+        },
+        // 已勾选商品的总价格
+        amt() {
+            // 1. 先 filter 过滤
+            // 2. 再 reduce 累加
+            return this.list
+                .filter(item => item.goods_state)
+                .reduce((total, item) => (total += item.goods_price * item.goods_count), 0)
+        },
+        // 已勾选商品的总数量
+        total() {
+            return this.list.filter(item => item.goods_state).reduce((t, item) => (t += item.goods_count), 0)
+        }
+    },
+    created() {
+        // 调用请求数据的方法
+        this.initCartList()
+
+        bus.$on('share', val => {
+            this.list.some(item => {
+                if (item.id === val.id) {
+                    item.goods_count = val.value
+                    return true
+                }
+            })
+        })
+    },
+    methods: {
+        // 封装请求列表数据的方法
+        async initCartList() {
+            // 调用 axios 的 get 方法，请求列表数据
+            const {data: res} = await axios.get('http://127.0.0.1:8080/goods')
+            // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
+            if (res.flag === true) {
+                this.list = res.data
+                console.log(this.list)
+            }
+        },
+        // 接收子组件传递过来的数据
+        // e 的格式为 { id, value }
+        getNewState(e) {
+            this.list.some(item => {
+                if (item.id === e.id) {
+                    item.goods_state = e.value
+                    // 终止后续的循环
+                    return true
+                }
+            })
+        },
+        // 接收 Footer 子组件传递过来的全选按钮的状态
+        getFullState(val) {
+            this.list.forEach(item => (item.goods_state = val))
+        }
+    },
+    components: {
+        Header,
+        Goods,
+        Footer
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/components/Counter/Counter.vue

@@ -1,16 +1,50 @@
 <template>
-  <div class="number-container d-flex justify-content-center align-items-center">
+    <div class="number-container d-flex justify-content-center align-items-center">
-    <!-- 减 1 的按钮 -->
+        <!-- 减 1 的按钮 -->
-    <button type="button" class="btn btn-light btn-sm">-</button>
+        <button class="btn btn-light btn-sm" type="button" @click="sub">-</button>
-    <!-- 购买的数量 -->
+        <!-- 购买的数量 -->
-    <span class="number-box">1</span>
+        <span class="number-box">{{ num }}</span>
-    <!-- 加 1 的按钮 -->
+        <!-- 加 1 的按钮 -->
-    <button type="button" class="btn btn-light btn-sm">+</button>
+        <button class="btn btn-light btn-sm" type="button" @click="add">+</button>
-  </div>
+    </div>
 </template>
 
 <script>
-export default {}
+import bus from '@/components/eventBus.js'
+
+export default {
+    props: {
+        // 接收商品的 id 值，将来，使用 EventBus 方案，
+        // 把数量传递到 App.vue 的时候，需要通知 App 组件，更新哪个商品的数量
+        id: {
+            type: Number,
+            required: true
+        },
+        // 接收到的 num 数量值
+        num: {
+            type: Number,
+            default: 1
+        }
+    },
+    methods: {
+        // 点击按钮，数值 +1
+        add() {
+            // 要发送给 App 的数据格式为 { id, value }
+            // 其中，id 是商品的 id; value 是商品最新的购买数量
+            const obj = {id: this.id, value: this.num + 1}
+            // 要做的事情：通过 EventBus 把 obj 对象，发送给 App.vue 组件
+            bus.$emit('share', obj)
+        },
+        sub() {
+            if (this.num - 1 === 0) return
+            // 要发送给 App 的数据格式为 { id, value }
+            // 其中，id 是商品的 id; value 是商品最新的购买数量
+            const obj = {id: this.id, value: this.num - 1}
+            // 要做的事情：通过 EventBus 把 obj 对象，发送给 App.vue 组件
+            bus.$emit('share', obj)
+        }
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/components/Footer/Footer.vue

@@ -1,24 +1,48 @@
 <template>
-  <div class="footer-container">
+    <div class="footer-container">
-    <!-- 左侧的全选 -->
+        <!-- 左侧的全选 -->
-    <div class="custom-control custom-checkbox">
+        <div class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="true" />
+            <input id="cbFull" :checked="isfull" class="custom-control-input" type="checkbox" @change="fullChange"/>
-      <label class="custom-control-label" for="cbFull">全选</label>
+            <label class="custom-control-label" for="cbFull">全选</label>
-    </div>
+        </div>
 
-    <!-- 中间的合计 -->
+        <!-- 中间的合计 -->
-    <div>
+        <div>
-      <span>合计：</span>
+            <span>合计：</span>
-      <span class="total-price">￥{{ 0 }}</span>
+            <span class="total-price">￥{{ amount.toFixed(2) }}</span>
-    </div>
+        </div>
 
-    <!-- 结算按钮 -->
+        <!-- 结算按钮 -->
-    <button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
+        <button class="btn btn-primary btn-settle" type="button">结算（{{ all }}）</button>
-  </div>
+    </div>
 </template>
 
 <script>
-export default {}
+export default {
+    props: {
+        // 全选的状态
+        isfull: {
+            type: Boolean,
+            default: true
+        },
+        // 总价格
+        amount: {
+            type: Number,
+            default: 0
+        },
+        // 已勾选的商品的总数量
+        all: {
+            type: Number,
+            default: 0
+        }
+    },
+    methods: {
+        // 监听到了全选的状态变化
+        fullChange(e) {
+            this.$emit('full-change', e.target.checked)
+        }
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/components/Goods/Goods.vue

@@ -1,31 +1,82 @@
 <template>
-  <div class="goods-container">
+    <div class="goods-container">
-    <!-- 左侧图片 -->
+        <!-- 左侧图片 -->
-    <div class="thumb">
+        <div class="thumb">
-      <div class="custom-control custom-checkbox">
+            <div class="custom-control custom-checkbox">
-        <!-- 复选框 -->
+                <!-- 复选框 -->
-        <input type="checkbox" class="custom-control-input" id="cb1" :checked="true" />
+                <input :id="'cb' + id" :checked="state" class="custom-control-input" type="checkbox"
-        <label class="custom-control-label" for="cb1">
+                       @change="stateChange"/>
-          <!-- 商品的缩略图 -->
+                <label :for="'cb' + id" class="custom-control-label">
-          <img src="../../assets/logo.png" alt="" />
+                    <!-- 商品的缩略图 -->
-        </label>
+                    <img :src="pic" alt=""/>
-      </div>
+                </label>
+            </div>
+        </div>
+        <!-- 右侧信息区域 -->
+        <div class="goods-info">
+            <!-- 商品标题 -->
+            <h6 class="goods-title">{{ title }}</h6>
+            <div class="goods-info-bottom">
+                <!-- 商品价格 -->
+                <span class="goods-price">￥{{ price }}</span>
+                <!-- 商品的数量 -->
+                <Counter :id="id" :num="count"></Counter>
+            </div>
+        </div>
     </div>
-    <!-- 右侧信息区域 -->
-    <div class="goods-info">
-      <!-- 商品标题 -->
-      <h6 class="goods-title">商品名称商品名称商品名称商品名称</h6>
-      <div class="goods-info-bottom">
-        <!-- 商品价格 -->
-        <span class="goods-price">￥0</span>
-        <!-- 商品的数量 -->
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
-export default {}
+import Counter from '@/components/Counter/Counter.vue'
+
+export default {
+    props: {
+        // 商品的 id
+        // 为啥在这里要封装一个 id 属性呢？
+        // 原因:将来,子组件中商品的勾选状态变化之后, 需要通过子 -> 父的形式,
+        // 通知父组件根据 id 修改对应商品的勾选状态。
+        id: {
+            required: true,
+            type: Number
+        },
+        // 要渲染的商品的标题
+        title: {
+            default: '',
+            type: String
+        },
+        // 要渲染的商品的图片
+        pic: {
+            default: '',
+            type: String
+        },
+        // 商品的单价
+        price: {
+            default: 0,
+            type: Number
+        },
+        // 商品的勾选状态
+        state: {
+            default: true,
+            type: Boolean
+        },
+        // 商品的购买数量
+        count: {
+            type: Number,
+            default: 1
+        }
+    },
+    methods: {
+        // 只要复选框的选中状态发生了变化，就会调用这个处理函数
+        stateChange(e) {
+            const newState = e.target.checked
+            // 触发自定义事件
+            this.$emit('state-change', {id: this.id, value: newState})
+        }
+    },
+    components: {
+        Counter
+    }
+}
 </script>
 
 <style lang="less" scoped>
@@ -33,15 +84,18 @@ export default {}
   + .goods-container {
     border-top: 1px solid #efefef;
   }
+
   padding: 10px;
   display: flex;
+
   .thumb {
     display: flex;
     align-items: center;
+
     img {
       width: 100px;
       height: 100px;
-      margin-right: 10px;
+      margin: 0 10px;
     }
   }
 
@@ -50,13 +104,16 @@ export default {}
     flex-direction: column;
     justify-content: space-between;
     flex: 1;
+
     .goods-title {
       font-weight: bold;
       font-size: 12px;
     }
+
     .goods-info-bottom {
       display: flex;
       justify-content: space-between;
+
       .goods-price {
         font-weight: bold;
         color: red;

src/components/Header/Header.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="header-container">标题</div>
+    <div class="header-container">{{ title }}</div>
 </template>
 
 <script>
-export default {}
+export default {
+    props: {
+        // 声明 title 自定义属性，允许使用者自定义标题的内容
+        title: {
+            default: '',
+            type: String
+        }
+    }
+}
 </script>
 
 <style lang="less" scoped>

src/components/eventBus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export default new Vue()

src/main.js

@@ -6,5 +6,5 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App)
+    render: h => h(App)
 }).$mount('#app')