一、下载安装Git软件
创建vue默认安装构建目录(如:d:/vue),进入vue目录右击选择“Git Bash Here”
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ node -v@b@v16.15.0@b@@b@Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ npm -v@b@8.5.5
三、安装wepback
npm install --global webpack 可以简写 npm i -g webpack - 利用webpack -v 查看，如果显示版本号，就代表成功
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ npm i -g webpack
四、安装vue
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ npm i vue@b@@b@added 21 packages, and audited 22 packages in 6s@b@@b@1 package is looking for funding@b@ run 'npm fund' for details@b@@b@found 0 vulnerabilities
npm安装vue-cli
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ npm i -g vue-cli@b@npm WARN deprecated har-validator@5.1.5: this library is no longer supported@b@npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.@b@npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142@b@npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)@b@npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli@b@@b@changed 245 packages, and audited 246 packages in 45s@b@@b@11 packages are looking for funding@b@ run 'npm fund' for details@b@@b@found 0 vulnerabilities
五、配置npm远程仓库下载地址
将npm的仓库地址改为淘宝镜像
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ npm config set registry https://registry.npm.taobao.org --global@b@@b@Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ npm config set disturl https://npm.taobao.org/dist --global
六、创建vue项目
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue@b@$ mkdir vue-demo@b@$ cd vue-demo/@b@@b@Think@DESKTOP-SIJ47KQ MINGW64 /d/vue/vue-demo@b@$ vue init webpack vue0501@b@@b@? Project name (vue0501) vue0501@b@? Project name vue0501@b@? Project description (A Vue.js project) vue demo project@b@? Project description vue demo project@b@? Author (鍊繆 <394345319@qq.com>) yes@b@? Author yes@b@? Vue build standalone@b@? Install vue-router? (Y/n) y@b@? Install vue-router? Yes@b@? Use ESLint to lint your code? (Y/n) n@b@? Use ESLint to lint your code? No@b@? Set up unit tests (Y/n) n@b@? Set up unit tests No@b@? Setup e2e tests with Nightwatch? (Y/n) n@b@? Should we run 'npm install' for you after the project has been created? (recom@b@mended) yarn@b@@b@ vue-cli 路 Generated "vue0501".@b@@b@ No, I will handle that myself@b@# Installing project dependencies ...@b@# ========================@b@@b@'yarn' is not recognized as an internal or external command,@b@operable program or batch file.@b@@b@# Project initialization finished!@b@# ========================@b@@b@To get started:@b@@b@ cd vue0501@b@ npm run dev@b@@b@Documentation can be found at https://vuejs-templates.github.io/webpack
六、运行vue项目
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue/vue-demo@b@$ mkdir vue0501@b@$ cd vue0501/@b@Think@DESKTOP-SIJ47KQ MINGW64 /d/vue/vue-demo/vue0501@b@$ npm install webpack-dev-server@b@npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated@b@npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated@b@npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated@b@npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated@b@npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.@b@npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.@b@npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.@b@npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.@b@npm WARN deprecated html-webpack-plugin@2.30.1: out of support@b@npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies@b@npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.@b@npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.@b@npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.@b@npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin@b@npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies@b@npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by 'uglify-js' as of v3.13.0@b@npm WARN deprecated bfj-node4@5.3.1: Switch to the 'bfj' package for fixes and new features!@b@npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.@b@npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.@b@npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.@b@@b@added 1271 packages in 1m
Think@DESKTOP-SIJ47KQ MINGW64 /d/vue/vue-demo/vue0501@b@$ npm run dev@b@@b@> vue0501@1.0.0 dev@b@> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js@b@@b@(node:3140) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.@b@(Use 'node --trace-deprecation ...' to show where the warning was created)@b@ 13% building modules 25/31 modules 6 active ...0!D:\vue\vue-demo\vue0501\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.@b@ 95% emitting DONE Compiled successfully in 6687ms02:10:15@b@@b@ I Your application is running here: http://localhost:8080@b@@b@然后便可以访问 http://localhost:8080 浏览VUE项目页面，截图如下：浏览器输入http://localhost:8080如下图，生成demo下载
