安装nodejs，安装后关闭
cmd命令行
C:\Users\Administrator>node -v
v14.15.0
返回版本号 则nodejs 安装成功
安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\Administrator>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 688 packages from 971 contributors in 37.432s
新建一个文件夹，并进入目录
e:
cd updata
dir
cd vue
cnpm i vue -g //安装vue
i====install g 全局安装
C:\Users\Administrator>e:
E:\>cd update
E:\update>cd vue
cnpm i webpack webpack-cli -g //安装vue-cli 脚手架
cnpm i webpack webpack-cli -g //安装vebpack webpack-cli
vue -V
webpack -v
vue init webpack vue //第二个vue为文件夹名称，可以随便起，下面可更改 //创建vue项目
E:\update\vue>cnpm i vue -g
Downloading vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp\_vue@2.6.12@vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue
Installing vue's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue/node_modules
All packages installed (used 3ms(network 2ms), speed 0B/s, json 0(0B), tarball 0B)
E:\update\vue>cnpm i vue-cli -g
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[4/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[7/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[8/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[9/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[11/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[12/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[14/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.6@handlebars
[15/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[16/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[18/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
[19/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
[buffer-fill@1.0.0] download Error: GET https://registry.npm.taobao.org/buffer-fill/download/buffer-fill-1.0.0.tgz response 503 status, fail count: 1
[20/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate request@2.88.2 › har-validator@~5.1.3 this library is no longer supported
Recently updated (since 2020-11-04): 2 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
Today:
→ download-git-repo@1.1.0 › download@5.0.3 › decompress@4.2.1 › decompress-tarbz2@4.1.1 › unbzip2-stream@1.4.3 › buffer@5.7.1 › base64-js@^1.3.1(1.5.0) (10:39:27)
2020-11-05
→ download-git-repo@1.1.0 › download@5.0.3 › decompress@4.2.1 › decompress-tarbz2@4.1.1 › unbzip2-stream@1.4.3 › buffer@^5.2.1(5.7.1) (05:51:35)
All packages installed (233 packages installed from npm registry, used 56s(network 47s), speed 108.27kB/s, json 220(478.42kB), tarball 4.54MB)
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
E:\update\vue>
E:\update\vue>cnpm i webpack webpack-cli -g
Downloading webpack to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack_tmp\_webpack@5.4.0@webpack to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack
Installing webpack's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack/node_modules
[1/24] acorn@^8.0.4 installed at node_modules\_acorn@8.0.4@acorn
[2/24] @types/estree@^0.0.45 installed at node_modules\_@types_estree@0.0.45@@types\estree
[3/24] @webassemblyjs/helper-module-context@1.9.0 installed at node_modules\_@webassemblyjs_helper-module-context@1.9.0@@webassemblyjs\helper-module-context
[4/24] enhanced-resolve@^5.3.1 installed at node_modules\_enhanced-resolve@5.3.1@enhanced-resolve
[5/24] events@^3.2.0 installed at node_modules\_events@3.2.0@events
[6/24] graceful-fs@^4.2.4 existed at node_modules\_graceful-fs@4.2.4@graceful-fs
[7/24] chrome-trace-event@^1.0.2 installed at node_modules\_chrome-trace-event@1.0.2@chrome-trace-event
[8/24] glob-to-regexp@^0.4.1 installed at node_modules\_glob-to-regexp@0.4.1@glob-to-regexp
[9/24] json-parse-better-errors@^1.0.2 installed at node_modules\_json-parse-better-errors@1.0.2@json-parse-better-errors
[10/24] loader-runner@^4.1.0 installed at node_modules\_loader-runner@4.1.0@loader-runner
[11/24] @types/eslint-scope@^3.7.0 installed at node_modules\_@types_eslint-scope@3.7.0@@types\eslint-scope
[12/24] tapable@^2.0.0 existed at node_modules\_tapable@2.1.1@tapable
[13/24] eslint-scope@^5.1.1 installed at node_modules\_eslint-scope@5.1.1@eslint-scope
[14/24] @webassemblyjs/wasm-parser@1.9.0 installed at node_modules\_@webassemblyjs_wasm-parser@1.9.0@@webassemblyjs\wasm-parser
[15/24] @webassemblyjs/wasm-edit@1.9.0 installed at node_modules\_@webassemblyjs_wasm-edit@1.9.0@@webassemblyjs\wasm-edit
[16/24] @webassemblyjs/ast@1.9.0 installed at node_modules\_@webassemblyjs_ast@1.9.0@@webassemblyjs\ast
[17/24] mime-types@^2.1.27 installed at node_modules\_mime-types@2.1.27@mime-types
[18/24] neo-async@^2.6.2 installed at node_modules\_neo-async@2.6.2@neo-async
[19/24] watchpack@^2.0.0 installed at node_modules\_watchpack@2.0.1@watchpack
[20/24] webpack-sources@^2.1.1 installed at node_modules\_webpack-sources@2.2.0@webpack-sources
[21/24] pkg-dir@^4.2.0 installed at node_modules\_pkg-dir@4.2.0@pkg-dir
[22/24] browserslist@^4.14.5 installed at node_modules\_browserslist@4.14.7@browserslist
[23/24] terser-webpack-plugin@^5.0.3 installed at node_modules\_terser-webpack-plugin@5.0.3@terser-webpack-plugin
[24/24] schema-utils@^3.0.0 installed at node_modules\_schema-utils@3.0.0@schema-utils
Recently updated (since 2020-11-04): 6 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\node_modules\.recently_updates.txt)
2020-11-10
→ browserslist@^4.14.5(4.14.7) (02:02:53)
→ browserslist@4.14.7 › electron-to-chromium@^1.3.591(1.3.592) (11:02:37)
→ terser-webpack-plugin@5.0.3 › jest-worker@26.6.2 › @types/node@*(14.14.7) (03:42:05)
2020-11-09
→ enhanced-resolve@5.3.1 › tapable@^2.0.0(2.1.1) (18:29:09)
→ browserslist@4.14.7 › caniuse-lite@^1.0.30001157(1.0.30001157) (13:34:05)
2020-11-07
→ browserslist@4.14.7 › node-releases@^1.1.66(1.1.66) (13:22:31)
All packages installed (81 packages installed from npm registry, used 7s(network 5s), speed 529.87kB/s, json 78(375.54kB), tarball 2.29MB)
[webpack@5.4.0] link C:\Users\Administrator\AppData\Roaming\npm\webpack@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
Downloading webpack-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli_tmp\_webpack-cli@4.2.0@webpack-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli
Installing webpack-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli/node_modules
[1/13] interpret@^2.2.0 installed at node_modules\_interpret@2.2.0@interpret
[2/13] colorette@^1.2.1 installed at node_modules\_colorette@1.2.1@colorette
[3/13] @webpack-cli/serve@^1.1.0 installed at node_modules\_@webpack-cli_serve@1.1.0@@webpack-cli\serve
[4/13] leven@^3.1.0 installed at node_modules\_leven@3.1.0@leven
[5/13] enquirer@^2.3.6 installed at node_modules\_enquirer@2.3.6@enquirer
[6/13] v8-compile-cache@^2.2.0 installed at node_modules\_v8-compile-cache@2.2.0@v8-compile-cache
[7/13] commander@^6.2.0 installed at node_modules\_commander@6.2.0@commander
[8/13] @webpack-cli/info@^1.1.0 installed at node_modules\_@webpack-cli_info@1.1.0@@webpack-cli\info
[9/13] command-line-usage@^6.1.0 installed at node_modules\_command-line-usage@6.1.1@command-line-usage
[10/13] import-local@^3.0.2 installed at node_modules\_import-local@3.0.2@import-local
[11/13] rechoir@^0.7.0 installed at node_modules\_rechoir@0.7.0@rechoir
[12/13] webpack-merge@^4.2.2 installed at node_modules\_webpack-merge@4.2.2@webpack-merge
[13/13] execa@^4.1.0 installed at node_modules\_execa@4.1.0@execa
Recently updated (since 2020-11-04): 5 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\.recently_updates.txt)
Today:
→ rechoir@0.7.0 › resolve@^1.9.0(1.19.0) (07:44:03)
2020-11-08
→ command-line-usage@^6.1.0(6.1.1) (06:14:05)
2020-11-05
→ @webpack-cli/serve@^1.1.0(1.1.0) (02:43:06)
→ @webpack-cli/info@^1.1.0(1.1.0) (02:43:06)
→ rechoir@0.7.0 › resolve@1.19.0 › is-core-module@^2.1.0(2.1.0) (04:14:31)
All packages installed (62 packages installed from npm registry, used 14s(network 12s), speed 67.75kB/s, json 62(105.93kB), tarball 689.75kB)
[webpack-cli@4.2.0] link C:\Users\Administrator\AppData\Roaming\npm\webpack-cli@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js
E:\update\vue>vue -V
2.9.6
E:\update\vue>webpack -v
webpack-cli 4.2.0
webpack 5.4.0
E:\update\vue>vue init webpack vue
? Project name vue_pro //改项目名称
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes //安装vue路由 yes
? Use ESLint to lint your code? No //是否安装管理代码 no 其余全回车
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue".
# Installing project dependencies ...
# ========================
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
> chromedriver@2.46.0 install E:\update\vue\vue\node_modules\chromedriver
> node install.js
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:\Users\Administrator\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path E:\update\vue\vue\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at E:\update\vue\vue\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
> core-js@2.6.11 postinstall E:\update\vue\vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\update\vue\vue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modules\sane\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1708 packages from 1086 contributors and audited 1716 packages in 210.117s
40 packages are looking for funding
run `npm fund` for details
found 101 vulnerabilities (76 low, 9 moderate, 15 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
# Project initialization finished!
# ========================
To get started:
cd vue
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
起vue服务
E:\update\vue>cd vue
E:\update\vue\vue>npm run dev
E:\update\vue>cd vue
E:\update\vue\vue>npm run dev
> vue_pro@1.0.0 dev E:\update\vue\vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 27/31 modules 4 active ...index=0!E:\update\vue\vue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 1813ms 下午8:37:47
I Your application is running here: http://localhost:8080
WAIT Compiling... 下午8:40:58
95% emitting
DONE Compiled successfully in 253ms 下午8:40:59
I Your application is running here: http://localhost:8080
浏览器打开网址
http://localhost:8080
可以看到vue项目已经安装成功
将vue整个项目拖拽到vs-code里
image.png
router文件夹下的 index.js放的路由文件
components 文件下的 HelloWorld.vue 是vue文件
网友评论