zfp
/
Vite-Vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vue3小demo

Browse Source
master
barney 2 years ago
parent bf57e860b4
commit f068148073
17 changed files with 819 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      .gitignore
  2. 1
      README.md
  3. 358
      Vite-Vue-tutorial/package-lock.json
  4. 7
      Vite-Vue-tutorial/package.json
  5. 32
      Vite-Vue-tutorial/src/App.vue
  6. 17
      Vite-Vue-tutorial/src/hooks/useCategories.js
  7. 36
      Vite-Vue-tutorial/src/main.js
  8. 7
      Vite-Vue-tutorial/src/services/banners.js
  9. 7
      Vite-Vue-tutorial/src/services/categories.js
  10. 13
      Vite-Vue-tutorial/src/services/products.js
  11. 12
      Vite-Vue-tutorial/src/style.css
  12. 68
      Vite-Vue-tutorial/src/utils/request.js
  13. 18
      Vite-Vue-tutorial/src/utils/tools.js
  14. 78
      Vite-Vue-tutorial/src/views/Carts.vue
  15. 56
      Vite-Vue-tutorial/src/views/Home.vue
  16. 82
      Vite-Vue-tutorial/src/views/List.vue
  17. 6
      Vite-Vue-tutorial/src/views/User.vue

24
.gitignore vendored
Unescape View File

@ -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?

1
README.md
Unescape View File

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

358
Vite-Vue-tutorial/package-lock.json generated
Unescape View File

@ -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"
}
}
}
}

7
Vite-Vue-tutorial/package.json
Unescape View File

@ -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",

32
Vite-Vue-tutorial/src/App.vue
Unescape View File

@ -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>

17
Vite-Vue-tutorial/src/hooks/useCategories.js
Unescape View File

@ -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,
}
};

36
Vite-Vue-tutorial/src/main.js
Unescape View File

@ -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')

7
Vite-Vue-tutorial/src/services/banners.js
Unescape View File

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

7
Vite-Vue-tutorial/src/services/categories.js
Unescape View File

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

13
Vite-Vue-tutorial/src/services/products.js
Unescape View File

@ -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,
});

12
Vite-Vue-tutorial/src/style.css
Unescape View File

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

68
Vite-Vue-tutorial/src/utils/request.js
Unescape View File

@ -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);
}
);

18
Vite-Vue-tutorial/src/utils/tools.js
Unescape View File

@ -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";
}

78
Vite-Vue-tutorial/src/views/Carts.vue
Unescape View File

@ -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>

56
Vite-Vue-tutorial/src/views/Home.vue
Unescape View File

@ -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>

82
Vite-Vue-tutorial/src/views/List.vue
Unescape View File

@ -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>

6
Vite-Vue-tutorial/src/views/User.vue
Unescape View File

@ -0,0 +1,6 @@
<template>
<div class="user">
<h1>用户中心</h1>
<hr />
</div>
</template>
Write Preview
Loading…
Cancel
Save