diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/.gitignore" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/.gitignore" new file mode 100644 index 00000000..38adffa6 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/.gitignore" @@ -0,0 +1,28 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/README.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/README.md" new file mode 100644 index 00000000..1a929480 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/README.md" @@ -0,0 +1,29 @@ +# vue-05 + +This template should help get you started developing with Vue 3 in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Compile and Minify for Production + +```sh +npm run build +``` diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/index.html" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/index.html" new file mode 100644 index 00000000..99f583aa --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/index.html" @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/package-lock.json" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/package-lock.json" new file mode 100644 index 00000000..47f516ee --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/package-lock.json" @@ -0,0 +1,727 @@ +{ + "name": "vue-05", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "vue-05", + "version": "0.0.0", + "dependencies": { + "vue": "^3.3.2", + "vue-router": "^4.2.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.2.3", + "vite": "^4.3.5" + } + }, + "node_modules/@babel/parser": { + "version": "7.22.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz", + "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==", + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz", + "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz", + "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz", + "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz", + "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz", + "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz", + "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz", + "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz", + "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz", + "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz", + "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz", + "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz", + "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz", + "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz", + "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz", + "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz", + "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz", + "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz", + "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz", + "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz", + "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz", + "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz", + "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" + }, + "node_modules/@vitejs/plugin-vue": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz", + "integrity": "sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==", + "dev": true, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.0.0", + "vue": "^3.2.25" + } + }, + "node_modules/@vue/compiler-core": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz", + "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==", + "dependencies": { + "@babel/parser": "^7.21.3", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz", + "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==", + "dependencies": { + "@vue/compiler-core": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz", + "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==", + "dependencies": { + "@babel/parser": "^7.20.15", + "@vue/compiler-core": "3.3.4", + "@vue/compiler-dom": "3.3.4", + "@vue/compiler-ssr": "3.3.4", + "@vue/reactivity-transform": "3.3.4", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.0", + "postcss": "^8.1.10", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz", + "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==", + "dependencies": { + "@vue/compiler-dom": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/@vue/devtools-api": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz", + "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==" + }, + "node_modules/@vue/reactivity": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz", + "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==", + "dependencies": { + "@vue/shared": "3.3.4" + } + }, + "node_modules/@vue/reactivity-transform": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz", + "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==", + "dependencies": { + "@babel/parser": "^7.20.15", + "@vue/compiler-core": "3.3.4", + "@vue/shared": "3.3.4", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.0" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz", + "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==", + "dependencies": { + "@vue/reactivity": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz", + "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==", + "dependencies": { + "@vue/runtime-core": "3.3.4", + "@vue/shared": "3.3.4", + "csstype": "^3.1.1" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz", + "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==", + "dependencies": { + "@vue/compiler-ssr": "3.3.4", + "@vue/shared": "3.3.4" + }, + "peerDependencies": { + "vue": "3.3.4" + } + }, + "node_modules/@vue/shared": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", + "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==" + }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/esbuild": { + "version": "0.17.19", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz", + "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.17.19", + "@esbuild/android-arm64": "0.17.19", + "@esbuild/android-x64": "0.17.19", + "@esbuild/darwin-arm64": "0.17.19", + "@esbuild/darwin-x64": "0.17.19", + "@esbuild/freebsd-arm64": "0.17.19", + "@esbuild/freebsd-x64": "0.17.19", + "@esbuild/linux-arm": "0.17.19", + "@esbuild/linux-arm64": "0.17.19", + "@esbuild/linux-ia32": "0.17.19", + "@esbuild/linux-loong64": "0.17.19", + "@esbuild/linux-mips64el": "0.17.19", + "@esbuild/linux-ppc64": "0.17.19", + "@esbuild/linux-riscv64": "0.17.19", + "@esbuild/linux-s390x": "0.17.19", + "@esbuild/linux-x64": "0.17.19", + "@esbuild/netbsd-x64": "0.17.19", + "@esbuild/openbsd-x64": "0.17.19", + "@esbuild/sunos-x64": "0.17.19", + "@esbuild/win32-arm64": "0.17.19", + "@esbuild/win32-ia32": "0.17.19", + "@esbuild/win32-x64": "0.17.19" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" + }, + "node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/magic-string": { + "version": "0.30.0", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz", + "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.13" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/nanoid": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + }, + "node_modules/postcss": { + "version": "8.4.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", + "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rollup": { + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz", + "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vite": { + "version": "4.3.9", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz", + "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==", + "dev": true, + "dependencies": { + "esbuild": "^0.17.5", + "postcss": "^8.4.23", + "rollup": "^3.21.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vue": { + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", + "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==", + "dependencies": { + "@vue/compiler-dom": "3.3.4", + "@vue/compiler-sfc": "3.3.4", + "@vue/runtime-dom": "3.3.4", + "@vue/server-renderer": "3.3.4", + "@vue/shared": "3.3.4" + } + }, + "node_modules/vue-router": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.2.tgz", + "integrity": "sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==", + "dependencies": { + "@vue/devtools-api": "^6.5.0" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + } + } +} diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/package.json" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/package.json" new file mode 100644 index 00000000..03199c31 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/package.json" @@ -0,0 +1,18 @@ +{ + "name": "vue-05", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "vue": "^3.3.2", + "vue-router": "^4.2.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.2.3", + "vite": "^4.3.5" + } +} diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/public/favicon.ico" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/public/favicon.ico" new file mode 100644 index 00000000..df36fcfb Binary files /dev/null and "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/public/favicon.ico" differ diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/App.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/App.vue" new file mode 100644 index 00000000..f5e7f12c --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/App.vue" @@ -0,0 +1,28 @@ + + + + + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/assets/logo.svg" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/assets/logo.svg" new file mode 100644 index 00000000..75656603 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/assets/logo.svg" @@ -0,0 +1 @@ + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/main.js" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/main.js" new file mode 100644 index 00000000..c2a7564d --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/main.js" @@ -0,0 +1,10 @@ + +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' + +const app = createApp(App) + +app.use(router) + +app.mount('#app') diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/router/index.js" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/router/index.js" new file mode 100644 index 00000000..3338172a --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/router/index.js" @@ -0,0 +1,35 @@ +import { createRouter, createWebHashHistory } from 'vue-router' + +const router = createRouter({ + history: createWebHashHistory(), + routes: [ + { + path: '/', + redirect: "/HomeView" + }, + { + path: '/HomeView', + name: 'home', + component: () => import('../views/HomeView.vue'), + children: [{ + path: 'user/:id', + component: () => import("../views/user.vue"), + children: [{ + path: 'detail/:id2', + component:()=>import("../views/detail.vue") + }] + }] + }, + { + path: '/about', + name: 'about', + component: () => import('../views/AboutView.vue') + }, + { + path: '/:pathMatch(.*)', + component:()=> import("../views/not.vue") + }, + ] +}) + +export default router diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/AboutView.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/AboutView.vue" new file mode 100644 index 00000000..61658b74 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/AboutView.vue" @@ -0,0 +1,8 @@ + + + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/HomeView.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/HomeView.vue" new file mode 100644 index 00000000..ee487191 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/HomeView.vue" @@ -0,0 +1,63 @@ + + + + + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/detail.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/detail.vue" new file mode 100644 index 00000000..7277079a --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/detail.vue" @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/not.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/not.vue" new file mode 100644 index 00000000..ce0718d0 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/not.vue" @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/user.vue" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/user.vue" new file mode 100644 index 00000000..c2440c68 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/src/views/user.vue" @@ -0,0 +1,26 @@ + + + + + \ No newline at end of file diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/vite.config.js" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/vite.config.js" new file mode 100644 index 00000000..de5cb31c --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\344\272\224\346\254\241\344\273\273\345\212\241/vue-05/vite.config.js" @@ -0,0 +1,14 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/Vue3\347\237\245\350\257\206\346\200\273\347\273\223.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/Vue3\347\237\245\350\257\206\346\200\273\347\273\223.md" new file mode 100644 index 00000000..e121591e --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/Vue3\347\237\245\350\257\206\346\200\273\347\273\223.md" @@ -0,0 +1,377 @@ +# Vue3知识总结： + +### vue3语法中做出的改变便是将option api 转化为 composition api (即对象式编程转化为函数式编程) + +​ **而实现这一转变的重要前提便是使用setup函数(它可以用来替代之前所编写的大部分其他选项)** + + + +#### 1.Vue3中的响应式数据(ref与reactive)： + +```vue + + + +``` + +**Reactive可以响应式的原因：** + +​ ●这是因为当我们使用reactive函数处理我们的数据之后，数据**再次被使用时就会进行依赖收集** + +​ ●当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作(比如更新界面) ; + +​ ●事实上，我们编写的**data选项**，也是在内部交给了**Reactive函数将其编程响应式对象的;** + + + +**Ref与Reactive的区别：** + +​ ●Ref主要用来处理**简单数据或者从网络中获取的数据** + +​ ●Reacive用于处理**复杂类型的数据**（主要是相互之间有联系的数据） + + + +**Reactive的值的解构问题：** + +（值被解构后会变成普通的值，失去响应性，toRefs函数可以解决此问题） + +```vue + +``` + + + +#### 2.Vue3中的ref其余的API： + +■unref + ■如果我们想要获取一个ref引用中的value,那么也可以通过unref方法: + ●如果参数是-一个ref,则返回内部值，否则返回参数本身; + ●这是val = isRef(val) ? val.value : val 的语法糖函数; + +■isRef + ●判断值是否是一个ref对象。 + +■shallowRef + ●创建一个浅层的ref对象; + +■triggerRef + ●手动触发和shallowRef相关联的副作用: + + + +#### **3.Vue3中computed函数的使用：** + +```vue + + + +``` + + + +#### 4.Vue3中通过ref获取元素： + +```vue + + + +``` + + + +#### 5.Vue3中的生命周期： + +```vue + +``` + +##### setup除 created 与 beforecreate 其余均与Vue2中的option API的生命周期相同，需要在首字母前加上 “on” + +##### **（原因是setup函数本身就是围绕created 与 beforecreate 生命周期钩子运行的，因此不需要再setup函数中定义它们）** + + + +#### 6.Vue3中provide与inject的使用： + +```vue + + + + + + +``` + + + +#### 7.Vue3中watch与watchEffect的使用： + +```vue + +``` + +​ 两者之间的区别： + +​ ●watch必须指定监听的数据源，watchEffect会自动监听会响应的数据 + +​ ●watch监听到改变后，可以拿到改变前后两个数据 + +​ ●watchEffect默认刚开始就会执行一次 + +#### 8.Vue3setup语法糖： + +```vue + +``` + + + +#### 9.Vue3声明props与emits（ defineProps() defineEmits() ）： + +```vue + +``` + + + +#### 10.Vue3 setup语法糖中父组件使用子组件实例的方法： + +​ （使用语法糖后其组件实例是关闭的，无法直接通过ref或者￥parent来调用实例） + +```vue +//父组件 + + + + +//子组件 + +``` + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/Vue\346\211\200\345\255\246\347\237\245\350\257\206\346\200\273\347\273\223.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/Vue\346\211\200\345\255\246\347\237\245\350\257\206\346\200\273\347\273\223.md" new file mode 100644 index 00000000..1b327a3d --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/Vue\346\211\200\345\255\246\347\237\245\350\257\206\346\200\273\347\273\223.md" @@ -0,0 +1,691 @@ +# Vue所学知识总结： + +**（Vue的本质就是一个JavaScript库，我们可以把它理解成一个已经帮助我们封装好的库。）** + +### + +### 1.Vue与DOM的最主要区别就是：原生DOM为命令式编程(即怎么做)，而Vue为声明式编程(即做什么)。 + +### 2.Vue的源码来源： + +```html + +``` + +​ (或者直接复制网址打开并复制Vue源码进行手动引入。) + +### 3.Vue内部的部分指令： + +```vue +1. v-once => 会让vue只渲染所设计的标签以及子元素‘一次’，即最开始的初值。。。 + + +2. v-pre => 用于跳过元素和它的子元素的编译过程，显示最原始的Mustache标签。。 + + +3. v-cloak => 斗篷效果，配合css使用 [v-cloak]{ }，vue渲染完成后自动删除 + (常用于防止未渲染完时Mustache标签泄漏) + + +4. v-memo = ["属性名"] => 只有当属性名'所代表的属性'发生变化时，此元素'整体'才会重新渲染。。 + (个别影响整体) + +``` + +### 4.Vue动态元素绑定指令（v-bind）： + +```vue +v-bind => 用于绑定一个或多个属性值，或者向另一个组件传递props值，其中 ‘ : ’ 为v-bind的语法糖形式。 + +v-bind可以使元素进行动态绑定(直接绑定数据，或者绑定函数并利用return返回值(函数存在于methods中))： + class、style的动态绑定中对象语法以及数组语法都有v-bind的身影，还可以直接赋值一个对象，对 象在data中赋值 + (style语法与class相似，此处以class为例)。 + + 动态class之对象语法 { } 的使用，可以写入多个对象，”属性名必须是布尔值“。具体写法为 :class = "{active(类名): 布尔值(true为显示，false为不显示)}" + + 动态class之数组语法 [ ] 的使用，可以写入多个类名，亦可以写入对象语法或三元运算符。写法为 + :class = "['active01','active02',{'active03': 布尔值}]" +``` + +### 5.Vue事件响应指令（v-on）： + +```vue +v-on => 语法糖为 ' @ '(eg: v-on:click = @click)。 + 其常用于触发事件(固定和自定义)的条件以及所触发事件后的响应(调用methods或computed中的函数) + (eg: @click = "add(实参)" + +v-on还支持修饰符，相当于对事件进行了一些特殊的处理： + v-on.stop -调用event.stopPropagation()。 + v-on.prevent -调用event.preventDefault()。 + v-on.capture -添加事件侦听器时使用capture模式。 + v-on.self-只当事件是从侦听器绑定的‘元素本身’触发时才触发回调。 + v-on.{keyAlias} -仅当事件是从特定键触发时才触发回调。 + eg: ● @keydown: 当用户按下键盘上的任意按键时触发,如果按住不放，会重复触发此事件。 + ● @keyup: 当用户释放键盘上的按键时触发。 + v-on.once -只触发'一次'回调。 + v-on.left -只当点击鼠标左键时触发。 + v-on.right -只当点击鼠标右键时触发。 + v-on.middle -只当点击鼠标中键时触发。 + v-on.passive - { passive: true }模式添加侦听器 +``` + +### 6.Vue条件渲染指令（v-if v-else v-else-if v-show）： + +```vue +写法为 v-if = "数据对比(布尔值)" {v-else v-else-if 与 v-if 配合使用} +v-show与v-if作用相似，但其仍然有着本质区别: + ● v-if本身为惰性，当后方数据对比(布尔值)为false时,数据会被销毁或者甚至不会进行渲染。 + ● v-show本质为操控其元素的css样式(display),不会销毁元素,且其不能与v-else一起使用。 +``` + +### 7.Vue事件遍历指令（v-for）: + +```vue +v-for可以遍历数组，对象，字符串以及数字。 +对于对象：v-for = "(value,key,index) in object" +对于数组：v-for = "(element,index) in array" +对于数字：v-for = "ele in 10" => 会生成1-10 + +v-for还能通过设置key值来保证性能，key类似于一种id，会对已经遍历的元素进行检阅。 +v-for设置key，当内容变化时会利用patch来检索已经拥有key的数据来做相应的局部变化以此使性能更好，不会重复渲染已经渲染过的元素。 + eg：v-for = "(ele,index) in array" :key = "index" +``` + +### 8.Vue中的部分options api： + +```vue +●template元素可以当做不可见的包裹元素，并且最终template不会被渲染出来，以此template可以用来当作v-if、 slot替换等等的载体。template会替换mount所指向的元素的内部内容，不赋值则使用原有内容并开始渲染。 + +●data中主要存放编写的数据，当开始渲染时，data中的所有数据将由proxy来代理。 (data(){return{}}) + +●methods主要用来存放回调函数(绑定事件)，当要用到data中的数据时要用到this.这里的this并不是代表window， 因为页面渲染时data中的数据已经被proxy代理，所以this代表的是proxy进行代理的所有对象，这也就意味着 methods中的函数不能使用箭头函数(箭头函数的this是window，无法读取data中的数据) (method:{}) +``` + +### 9.Vue中的计算属性computed： + +```vue +对于任何包含响应式数据的‘复杂逻辑’，都应该使用computed。 +计算属性computed拥有内部缓存，重复调用时可以提高性能，防止重复计算，可以提高性能。 +语法糖写法: +computed:{ + fullname(){ + return this.firstname + this.lastname + } +} +完整写法: +computed:{ + fullname:{ + get: function(){ + return this.firstname + this.lastname + }, + set: function(value){ + this.secondname = value + } + } + +} + +computed的set语法一般不使用，因此语法糖写法只涉及到get，如果‘传入参数‘则会传到’set‘中进行处理。 +``` + +### 10.Vue事件监听器（watch）： + +```vue +watch监听的主要是props或者data中的数据,当所监听数据发生改变时就会进行函数的调用。 +写法为： +watch:{ + //默认两个参数 + msg(newValue,OldValue){ + console.log(newValue,oldValue) + } + //当监听数据为对象时我们拿到的会是代理对象 + obj(newValue,OldValue){ + //Vue内部自带的代理对象处理方法 + console.log(Vue.toRaw(newValue)) + //利用展开运算符 + console.log({...newValue}) + } + //使用以上两种方法保证获取到原生对象 +} + +watch本身的默认监听为浅层监听，例如当数组append一个元素时watch不会监听到，这时就需要深层监听。 +watch:{ + msg:{ + handler (newValue,OldValue){ + console.log(newValue,oldValue) + }, + deep:true, + immediate:true, //页面第一次渲染时也监听 + } + +} +``` + +### 11.Vue双向绑定（v-model）： + +```vue +v-model可以实现数据之间的共同变化。 +●当在input输入框中用到v-model = "msg",此时在输入框中输入内容，data中的msg也会相应变化。 + +其本质便是v-bind与@input的结合使用。 + + +●对于组件之间使用v-model也可以实现数据同步变化，本质为props与自定义事件的结合。 + + 对于不同组件v-model默认为modelValue，也可以自定义。 + 写成 + 这也就意味着props接收的为counter而不是默认的modelValue。 + +●当在多个复选框中使用v-model时需要给每一个复选框一个value值，返回的数据为value值。 +●当在单个复选框中使用v-model时返回的数据为布尔值。 +●当在单选框中使用v-model时也需要给每一个单选框一个value值。 +``` + +### 12.Vue中组件化管理的方式： + +```vue +Vue CLI的搭建方法： +vue create "项目名称" + +Vite体系的搭建方法： +npm init vue@latest +``` + +### 13.Vue单个组件的模板： + +```vue + + + + + +``` + +**scoped**起到一种限制样式作用域的功能，让此样式只在本组件中生效。 + +​ （本质是在每一个标签样式后增加了一个属性选择器） + +### 14.父子组件之间的通信： + +​ ●父组件传递给子组件:**通过props属性**; +​ ●子组件传递给父组件:**通过$emit触发事件**; + +```vue +//父组件 + + + + +//子组件 + + + +``` + +​ ● Props是你可以在组件上注册一些**自定义的attribute;** +​ ●父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值; . + +### 15.Vue中slot插槽的使用： + +​ ● Vue中将 元素作为承载分发内容的出口; +​ ●在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽; +​ ●该插槽插入什么内容**取决于父组件如何使用**; + +```vue +//父组件 + + + + +//子组件 + + + +``` + +### 16.Vue中povide与inject，eventBus： + +​ **(主要用于非父子组件之间的通信)** + +```vue +//Provide与Inject用于非父子组件之间共享数据 + +//传递数据的组件 + + + + +//接收数据的组件 + + + +``` + +```vue +//eventBus相关内容 +//使用eventBus的前提是要先在项目中安装依赖 'npm i hy-event-store' + +//安装完成后进行配置,首先先新创建一个js文件 +import {HYEventBus} from 'hy-event-store' + +const eventBus = new HYEventBus() + +export default eventBus + +//js文件中写入上述内容，然后在后续某个组件使用时进行import导入 + +//eventBus的核心内容 + eventBus.$emit("名字", " 内容(实参) ") + eventBus.$on("相同的名字",(形参)=>{ 操作 }) + +//传递数据 + + + + +//接收数据 + + + +``` + +### 17.Vue中DOM的获取方法(DOM的获取在mounted api中进行)： + +```vue + + + +``` + +### 18.Vue中动态组件的设置方法： + +**动态组件默认会删除不相关的多余组件(即所有事物回归于0，重新开始渲染)** + +**keep-alive标签保证组件不会被销毁，即被缓存，与component标签配合使用** + +利用 activated() 与 deactivated() option api来监听保持keep-alive的组件是否被切换。 + +```vue +component 标签: + +//组件名是谁就显示那个组件的内容 + +//父组件 + + + + +//子组件 + +``` + +### 19.Vue组件的分包处理： + +```vue +利用defineAsyncComponent来进行组件之间的分包 + + + + + +//处理完成后直接npm run build 进行打包，就能保证组件分包。 +``` + +### 20.Vue中Mixin的使用： + +**Mixin类似于一种代码模板，可以减少代码工作量，减少代码重复率。** + +```vue +//先创建一个js文件 +const mixin = { + created(){ + console.log("created") + }, + methods:{ + sayHello(){ + console.log("hello,mixin") + } + } +} + +export default mixin + +//之后直接在组件中利用mixins option api引用即可 + +``` + +**Mixin的data默认情况下会与组件自身合并，数据冲突时以组件自身data为主，生命周期的函数都会执行，methods等对象选项数据冲突时以组件自身为主** + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/webPack\347\233\270\345\205\263\347\237\245\350\257\206.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/webPack\347\233\270\345\205\263\347\237\245\350\257\206.md" new file mode 100644 index 00000000..e86522d4 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/webPack\347\233\270\345\205\263\347\237\245\350\257\206.md" @@ -0,0 +1,275 @@ +# WebPack相关内容整合： + +#### 1.path模块的使用： + +​ ●获取路径相关信息： + +​ ■dirname：获取文件的**父文件夹的路径** (path.dirname(filepath)) + +​ ■basename：获取该文件名称 (path.basename(filepath)) + +​ ■extname：获取文件**扩展名** (path.extname(filepath)) + +​ ●文件路径的拼接： + +​ ■path.join (将多个路径进行拼接) + +​ ■path.resolve **(拼接绝对路径)**： + +​ ●它会把一个路径或路径片段的序列解析为一个**绝对路径**; + +​ ●给定的路径的序列是从右往左被处理的，后面每个path被依次解析,直到构造完成一个绝对路径; + +​ ●如果在处理完所有给定path的段之后，还没有生成绝对路径，**则使用当前工作目录;** + +​ ●生成的路径被规范化并删除尾部斜杠，**零长度path段被忽略;** + +​ ●如果没有path传递段，path.resolve()将**返回当前工作目录的绝对路径;** + +```javascript +path.resolve("./a/b","../c","./d.txt") => C://a/c/d.txt +``` + +#### 2.初识WebPack： + +​ ●**WebPack是一个静态的为现代的JavaScript应用工具的模块化打包工具** + +​ ■静态的：webpack最终会将代码打包成静态资源（部署到静态服务器） + +​ ■现代的：正是为了解决如今前端开发面临的各种各样问题才催生了webpack + +​ ■模块化：其默认支持各种模块化开发，ES Module，CommonJS，AMD等 + +​ ■打包：可以帮助我们继续打包，其是一个打包工具 + +​ ●WebPack安装方法： + +​ npm install webpack webpack-cli -D(--save-dev) + +#### 3.WebPack配置(webpack.config.js): + +```javascript +const path = require("path") +const { VueLoaderPlugin } = require("vue-loader/dist/index") +const { CleanWebpackPlugin } = require("clean-webpack-plugin") +const HtmlWebpackPlugin = require("html-webpack-plugin") +const { DefinePlugin } = require("webpack") //此插件无需安装由webpack内部提供 +module.exports = { + + //mode配置默认为production，还有development与none两个选项 + //development打包后，一些没有依赖的方法、变量、文件会保留；而 production 则会移除。 + //production 打包后，代码会进行压缩，比 development 的文件小。 + mode:"production", + + //设置打包的文件入口 + entry:"./src/index.js", + + //设置打包完成后的内容 + output: { + //设置打包后的文件名称 + filename:"bundle.js", + + //设置打包后的文件夹名称(仅支持绝对路径) + path:path.resolve( __dirname, "./build"), + + //与CleanWebpackPlugin插件有着相同的效果 + clean: true + }， + + //设置文件打包时所用到的模块 + module:{ + rules:[ + { + //利用正则表达式规定限制的文件类型 + test:/\.css$/, + + //对于此类型文件用到的操作 + use:[ + + //loader可以用于对模块(import css 文件后css会被当成一个模块)的源代码进行转换 + //由于css-loader只是负责将.css文件解析，不会将css插入到页面中 + //因此需要用到style-loader来讲css插入到页面中 + + { loader: "css-loader" }, + { loader: "style-loader" }, + { + //利用postcss-loader来提前对浏览器CSS属性进行设置 + //loader会读取options内的数据进行操作 + loader: "postcss-loader", + options: { + postcssOptions:{ + plugins:[ + //该插件用于自动将供应商前缀添加到需要它们的 CSS 属性中 + "autoprefixer" + + //postcss-preset-env除了autoprefixer的功能外还有许多其余的功能 + //帮助我们将一些现代的CSS特性转成大多数浏览器认识的CSS并根据所需添 加polyfill + "postcss-preset-env" + ] + } + } + } + ] + //use:[ "css-loader", "style-loader" ] + }, + { + test: /\.vue$/ + use:[ + { loader: "vue-loader" } + { + //利用babel-loader将ES6+的语法转化为ES5 + loader: "babel-loader", + options: { + plugins: [ + "@babel/preset-env" + ] + } + }, + ] + } + + { + //对于图片等资源的配置 + test:/\.(png|jpe?g|svg|gif)$/ + + //打包图片，每张图片都有自己的地址 + //缺点：进行了两次网络请求 + type:"asset/resource", + + //将图片进行base64的编码，并且直接打包至生成的js文件中 + //缺点：造成js文件过大，代码下载与解析时间过长 + type:"asset/inline", + + //自动选择方式 + type:"asset", + + //规定两种方式的界限(仅适用于type为asset的情况下) + parser: { + dataUrlCondition: { + //以60kb大小为界限 + maxSize:60 * 1024 //(此处单位为byte(字节) 1kb == 1024byte) + } + }, + + //设置生成的文件的相关内容 + generator: { + //利用占位符来实现名称传递 + //name：指向原来的图片名称 + //ext：扩展名 + //hash：webpack生成的hash编码 + + filename: "img/[name]_[hash:8][ext]" + //上述做法会将图片存放至img文件夹中 + } + } + + ] + }, + + plugins:{ + //解析.vue文件除了vue-loader外还需要VueLoaderPlugin来支撑(处理css属性) + new VueLoaderPlugin(), + + //每次打包时对于原来已经打包好的文件进行清除 + new CleanWebpackPlugin(), + + //每次打包额外生成一个html文件来提供浏览 + new HtmlWebpackPlugin({ + //设置页面名称 + title:"页面名称" + + //页面依据的模板(例如vue的html需要使用) + template:"./index.html" + }), + + //类似于对名称进行的全局定义 + //内部还有一个默认属性process.env.NODE_ENV其依附于mode属性的配置 + //为development时为模块与chunk启用有效的名，production时启用确定性的混淆名 + new DefinePlugin({ + //引号内部犹如eval算法，因此若需要传入路径等相关应再加一层单引号 + BASE:" './' ", + code:" 'coder' " + }) + } + +} +``` + +##### Loader与Plugin: + +​ ■Loader用于对**特定的模块类型**进行转换。 + +​ ■Plugin用于**执行更加广泛的任务**，比如打包优化，资源管理，环境变量注入等。 + + + +#### 3.WebPack搭建本地服务器： + +​ ■webpack watch mode + +​ ■webpack-dev-serve (常用) + +​ ■webpack-dev-middleware + +```javascript +//第一步先安装包： +npm i webpack-dev-serve -D + +//可以package.json中设置脚本 +"scripts": { + "serve": "webpack serve" +} + +//在webpack中的配置 +module.exports = { + devServer: { + //是否启动热更新 + hot: true, + + //设置主机地址 + host: "localhost", + + //设置监听端口 + port:8888, + + //是否打开浏览器 + open:true, + + //是否启用gzip压缩 + //gzip 压缩 用于减少服务器向前端传输的数据量，提高浏览的速度 + compress:true, + } +} + +//利用模块热更新来保证所涉及元素变化时不会刷新整个页面 +//指定哪些模块发生更新时进行HMR，而不刷新整个页面 +if(module.hot) { + module.hot.accept("./index.js") +} +``` + +#### 4.babel与postcss的配置： + +​ ■babel会自动读取babel.config.js文件中的内容。 + +​ ■postcss会自动读取postcss.config.js文件中的内容。 + +​ ■因此可以将其从loader配置中分离出来。 + +```javascript +//babel.config.js +module.exports = { + presets: { + "@babel/preset-env" + } +} + +//postcss.config.js +module.exports = { + plugins: { + "autoprefixer", + "postcss-preset-env" + } +} +``` + diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226\345\237\272\347\241\200\347\233\270\345\205\263\347\237\245\350\257\206\346\200\273\347\273\223.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226\345\237\272\347\241\200\347\233\270\345\205\263\347\237\245\350\257\206\346\200\273\347\273\223.md" new file mode 100644 index 00000000..ffd6bbf4 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\345\274\240\346\231\217\351\223\255/\345\205\250\346\240\210-\345\274\240\346\231\217\351\223\255-Vue\347\254\254\345\233\233\346\254\241\344\273\273\345\212\241/\345\211\215\347\253\257\345\267\245\347\250\213\345\214\226\345\237\272\347\241\200\347\233\270\345\205\263\347\237\245\350\257\206\346\200\273\347\273\223.md" @@ -0,0 +1,371 @@ +# 前端工程化基础相关知识总结： + +### 1.Node在终端指令的补充： + +```javascript +console.clear() + ●清空控制台 + +console.trace() + ●打印函数的调用栈 + +console.log(__dirname) + ●当前的文件所在的目录的结构(不包括该文件名) 【重要】 + +console.log(__filename) + ●当前目录+文件名 + +setImmediate(()=>{ + console.log("active immediate") +}) + ●立即执行(计时器) + +process.nextTick(()=>{ + console.log("active nextTick") +}) + ●额外执行函数(与immediate类似) + +console.log(global) +console.log(globalThis) +console.log(gloabl == globalThis) --> true + ●打印全局对象 +``` + + + +### 2.模块化的概念： + +​ ●事实上模块化开发最终的目的是**将程序划分成一个个小的结构;** + +​ ●这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时**不会影响到其他的结构;** + +​ ●这个结构可以将自己希望暴露的变量、函数、对象等**导出给其结构使用**; + +​ ●也可以通过某种方式，**导入另外结构中**的变量、函数、对象等; + + + +### 3.CommonJS规范： + +■我们需要知道CommonJS是一个规范,最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS,后来为了体现它的广泛性，修改为CommonJS,平时我们也会简称为CJS。 + +​ ● Node是CommonJS在服务器端一个具有代表性的实现; + +​ ● Browserify是CommonJS在浏览器中的-种实现 (已经不怎么使用); + +​ ● webpack打包工具具备对CommonJS的支持和转换; + + + +■其中最为重要的内容便是： + +​ ●模块中要**导出内容**：exports (module.exports) + +​ ●模块中要**导入内容**：require + + + +##### ■注：浏览器中并不支持CommonJS的语法，需要在Node终端中运行.（Node对CommonJS进行了支持和实现） + + + +■exports其实**本质是一个对象**： + +​ ●当使用require方法时，require会通过各种查找方法最终找到exports这个对象 + +​ ●当对某个变量赋值require时，**实际上是把exports对象赋值给了变量**，即两者相等。 + + + +■**module.exports与exports**： + +​ ●默认情况下module.exports和exports是**同一个对象** + +​ ●当给module.exports赋予新的对象时会重新开辟一个内存空间，此内存空间与exports的不同，无法通过exports.变量名 = “ ” 来进行修改 + + + +■**require查找文件**的过程： + +​ ●若查找的是内置模块（如：require("http") ）将直接返回值 + +​ ●若查找的是以 ./ 或 ../ 或 / 开头的 + +​ ■第一步:将X当做一个文件在对应的目录下查找: + +​ ●如果有后缀名,按照后缀名的格式查找对应的文件. +​ ●如果没有后缀名,会按照如下顺序: +​ 1.直接查找文件X +​ 2.查找X.js文件 +​ 3.查找X.json文件 +​ 4.查找X.node文件 +​ + +​ ■第二步:没有找到对应的文件,将X作为一个目录 +​ ●查找目录下面的index文件 +​ 1.查找X/index.js文件 +​ 2.查找X/index.json文件 +​ 3.查找X/index.node文件 +​ + +​ ■如果没有找到，那么报错: not found + +​ ●若查找的不是内置模块也不是路径将会在node_modules文件夹中寻找 + + + +■**模块加载过程**： + +​ ●模块被**第一次引入**时，模块中的js代码会被执行一次 + +​ ●被多次引入时最终也会**只运行一次(**内部拥有一个**module.loaded: boolean** 默认为false 引入一次变为true) + +​ ●模块引入**遵循“一步到位”原则(深度优先搜索)** + + + +### 4.ES Module相关内容： + +```javascript +//浏览器本身支持es module(ECMA 2015提出来的模块化规范) +//需要给script标签定义 module 的模块类型 + + +``` + +​ ■ES Module 和 CommonJS的模块化有一些不同之处： + +​ ●ES Module**使用了import和export关键字**； + +​ ●并且它也采用了编译期的静态分析，加入了动态引用的方式。 + +​ + +​ ■**注：export导出的不是对象，是一个个标识符。** + + + +​ ■export导出的三种方式： + +```javascript +const name = 'zym' +const age = 18 +function sayHello() { + console.log("123") +} +//1. +export { + name, + age, + sayHello +} + +//2.起别名 (不常用) +export { + name as tname, + age as tage, + sayHello +} + +//3. +export const name = 'zym' +export const age = 18 +``` + + + +​ ■import导入的三种方式 (import默认无法写入逻辑语句中)： + +```javascript +//1. +import { name, age, sayHello } from "" + +//2.给标识符起别名 +import { name as tname, age, sayHello } from "" + +//3.导入时可以给整个模块起别名 +import * as foo from "" + +//4.如果确实要放入逻辑语句中，需要用到import()函数（本质是promise） +const flag = true +if(flag) { + import("").then((res)=>{ + console.log(res.name, res.age) + }) +} +``` + + + +​ ■export的默认导出（默认导出每个模块只有一个）： + +```javascript +export default function() { + console.log("123") + const name = 'zym' + const age = 18 +} + +import message from "" +console.log(message().name, message().age) +``` + + + +​ ■export 与 import 的结合： + +```javascript +//当从外部导入模块时，可以设置一个中转站（导入所有要用到的，再导出，保证主代码的简洁度） + +import { formatCount, formatDate } from "" +import { parseLyric } from "" +export { + formatCount, + formatDate, + parseLyric +} + + +//以上代码仍过于繁琐，可以利用export和import的结合 +//1. +export { formatCount, formatDate } from "" +export { parseLyric } from "" + +//2.（不太推荐，阅读性太差） +export * from "" +``` + + + +​ ■ES Module解析过程可以划分为**三个阶段**（模块记录 --> 各个变量名称 --> 变量赋值）： + +​ ●阶段一:**构建**(Construction) ，根据地址查找js文件,并且下载,将其**解析成模块记录**(Module Record) 。 + +​ ●阶段二: **实例化**(Instantiation) ，对模块记录进行实例化，并且**分配内存空间**,解析模块的导入和导出语 句，把模块指向对应的内存地址。 + +​ ●阶段三:**运行**(Evaluation) ，运行代码,计算值,并且**将值填充到内存地址中**。 + + + +### 5,包管理工具相关知识： + +​ ■npm: + +​ ●npm全称是Node Package Manager，也就是包管理工具。 + +​ ●npm install (things) 会从云端的register仓库中拉取资源并且生成package.json, package-lock.json等 文件 + +​ + +​ ■yarn: + +​ ●yarn是为了**弥补早期npm的一些缺陷**(安装依赖速度很慢，版本依赖混乱等等)而出现的 + +​ ●它是由Facebook，Google，Exponent和Tilde联合推出的**新的JS包管理工具** + +```javascript +//安装包 +yarn add + +//运行脚本 +yarn run + +//删除包 +yarn remove +``` + +​ + +​ ■cnpm： + +​ ●可以理解为中国版的npm，其主要是为了**解决包下载慢的问题**。 + +​ ●每过**十分钟**便去同步registry仓库的内容。 + + + +​ ■pnpm: + +​ ●是一个高效的npm工具 + +​ ●通过**硬链接和符号链接(软链接)**两种方式实现高效运行 + +​ ■硬链接： + +​ ●多个文件平等地共享一个文件存储单元 + +​ ●删除一个文件名字后，还可以用其它名字继续访问该文件 + +​ ■符号链接(软链接)： + +​ ●它是一类特殊的文件 + +​ ●包含有一条以绝对路径以及相对路径的形式指向其它文件或者目录的引用(例如快捷方式)。 + +```javascript +//硬链接 +mklink /H a.js b.js + +//软链接 +mklink a.js b.js +``` + +​ ●依赖包会被存放在一个统一的位置 + +​ ●已经安装过的文件再次安装时会**通过硬链接来连接到硬盘上的真实数据**。 + +​ ●如果对同一个依赖包使用**相同的**版本，那么磁盘上只有**一份**与之相关的文件 + +​ ●如果对同一个依赖包使用**不同的**版本，那么**只会存储版本之间不用的文件** + +​ ●pnpm会创建非扁平的node_modules目录 + +​ (即每个依赖包都有各自的node_modules,不会被提升到同一个node_modules根目录下) + +##### ●用户访问数据通过软连接（连接在.pnpm文件夹下），访问到后又通过硬链接访问真实数据。 + +​ ●指令与yarn相似。 + +​ ●通过 **pnpm store path** 来获取当前活跃的存储项目 + +​ (利用 pnpm store prune 来删除未被引用的包，释放空间) + +##### ●保证源码不会访问到本不属于当前项目所设定的包。 + +​ + +​ ■package.json： + +​ ●每一个项目都会有此配置文件 + +​ ●他会记录你项目的名称，版本号，项目描述，你所依赖的其他库的信息以及依赖库的版本号。 + +​ ■scripts属性： + +​ ●常用于配置一些脚本命令，以键值对的形式存在，通过npm run key 来执行命令。 + +​ ■dependencies属性**(生产依赖)**： + +​ ●它指**无论开发环境还是生成环境都需要依赖的包** + +​ ●**通常是**我们项目实际开发用到的一些库模块：axios，vue等 + +​ ●devDependencies与其对应 + +​ ■devDependencies属性**(开发依赖)**： + +​ ●主要用来存储生成环境不需要的，webpack，babel等。 + +​ ●通过**npm i -D(--save-dev) webpack** 来安装 + +​ ■peerDependencies属性**(对等依赖)**： + +​ ●你依赖的一个包必须是以另外一个宿主包为前提的(element-plus是依赖于vue3的)。 + +​ + +​ ■package-lock.json： + +​ ●npm i 拥有缓存 (会对每个安装过的包记录标识符【位于package-lock.json】) 概念,npm i 将会依据其**下载准确版本** + +​ ●package.json中记录的是所用库模块粗略版本。