初始化
This commit is contained in:
liulongbin
parent
875041ecc7
commit
9ae71448f4
328
package-lock.json
generated
328
package-lock.json
generated
@ -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",
|
||||
"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",
|
||||
"integrity": "sha1-YJlyDIg5yoZaJjfmyFhS6tC9tZU=",
|
||||
"version": "7.21.8",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.8.tgz",
|
||||
"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",
|
||||
"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",
|
||||
"integrity": "sha1-YJlyDIg5yoZaJjfmyFhS6tC9tZU=",
|
||||
"version": "7.21.8",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.21.8.tgz",
|
||||
"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",
|
||||
|
||||
@ -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"
|
||||
|
||||
104
src/App.vue
104
src/App.vue
@ -1,11 +1,107 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<h1>App 根组件</h1>
|
||||
</div>
|
||||
<div class="app-container">
|
||||
<!-- Header 头部区域 -->
|
||||
<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>
|
||||
|
||||
@ -1,16 +1,50 @@
|
||||
<template>
|
||||
<div class="number-container d-flex justify-content-center align-items-center">
|
||||
<!-- 减 1 的按钮 -->
|
||||
<button type="button" class="btn btn-light btn-sm">-</button>
|
||||
<!-- 购买的数量 -->
|
||||
<span class="number-box">1</span>
|
||||
<!-- 加 1 的按钮 -->
|
||||
<button type="button" class="btn btn-light btn-sm">+</button>
|
||||
</div>
|
||||
<div class="number-container d-flex justify-content-center align-items-center">
|
||||
<!-- 减 1 的按钮 -->
|
||||
<button class="btn btn-light btn-sm" type="button" @click="sub">-</button>
|
||||
<!-- 购买的数量 -->
|
||||
<span class="number-box">{{ num }}</span>
|
||||
<!-- 加 1 的按钮 -->
|
||||
<button class="btn btn-light btn-sm" type="button" @click="add">+</button>
|
||||
</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>
|
||||
|
||||
@ -1,24 +1,48 @@
|
||||
<template>
|
||||
<div class="footer-container">
|
||||
<!-- 左侧的全选 -->
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="cbFull" :checked="true" />
|
||||
<label class="custom-control-label" for="cbFull">全选</label>
|
||||
</div>
|
||||
<div class="footer-container">
|
||||
<!-- 左侧的全选 -->
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input id="cbFull" :checked="isfull" class="custom-control-input" type="checkbox" @change="fullChange"/>
|
||||
<label class="custom-control-label" for="cbFull">全选</label>
|
||||
</div>
|
||||
|
||||
<!-- 中间的合计 -->
|
||||
<div>
|
||||
<span>合计：</span>
|
||||
<span class="total-price">￥{{ 0 }}</span>
|
||||
</div>
|
||||
<!-- 中间的合计 -->
|
||||
<div>
|
||||
<span>合计：</span>
|
||||
<span class="total-price">￥{{ amount.toFixed(2) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 结算按钮 -->
|
||||
<button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
|
||||
</div>
|
||||
<!-- 结算按钮 -->
|
||||
<button class="btn btn-primary btn-settle" type="button">结算（{{ all }}）</button>
|
||||
</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>
|
||||
|
||||
@ -1,31 +1,82 @@
|
||||
<template>
|
||||
<div class="goods-container">
|
||||
<!-- 左侧图片 -->
|
||||
<div class="thumb">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<!-- 复选框 -->
|
||||
<input type="checkbox" class="custom-control-input" id="cb1" :checked="true" />
|
||||
<label class="custom-control-label" for="cb1">
|
||||
<!-- 商品的缩略图 -->
|
||||
<img src="../../assets/logo.png" alt="" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="goods-container">
|
||||
<!-- 左侧图片 -->
|
||||
<div class="thumb">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<!-- 复选框 -->
|
||||
<input :id="'cb' + id" :checked="state" class="custom-control-input" type="checkbox"
|
||||
@change="stateChange"/>
|
||||
<label :for="'cb' + id" class="custom-control-label">
|
||||
<!-- 商品的缩略图 -->
|
||||
<img :src="pic" alt=""/>
|
||||
</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;
|
||||
|
||||
@ -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>
|
||||
|
||||
3
src/components/eventBus.js
Normal file
3
src/components/eventBus.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
export default new Vue()
|
||||
@ -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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user