安装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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ [email protected]
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\[email protected]@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\[email protected]@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\[email protected]@commander
[2/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consolidate
[3/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[4/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[5/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf
[6/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[7/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[8/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[9/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read-metadata
[10/20] [email protected] installed at node_modules\[email protected]@uid
[11/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[12/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home
[13/20] [email protected] existed at node_modules\[email protected]@coffee-script
[14/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars
[15/20] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name
[16/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith
[17/20] async@^2.4.0 installed at node_modules\[email protected]@async
[18/20] request@^2.67.0 installed at node_modules\[email protected]@request
[19/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer
[[email protected]] 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\[email protected]@download-git-repo
deprecate [email protected] › [email protected] › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate [email protected] › 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:
→ [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › base64-js@^1.3.1(1.5.0) (10:39:27)
2020-11-05
→ [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › 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)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[[email protected]] 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\[email protected]@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\[email protected]@acorn
[2/24] @types/estree@^0.0.45 installed at node_modules\_@[email protected]@@types\estree
[3/24] @webassemblyjs/[email protected] installed at node_modules\_@[email protected]@@webassemblyjs\helper-module-context
[4/24] enhanced-resolve@^5.3.1 installed at node_modules\[email protected]@enhanced-resolve
[5/24] events@^3.2.0 installed at node_modules\[email protected]@events
[6/24] graceful-fs@^4.2.4 existed at node_modules\[email protected]@graceful-fs
[7/24] chrome-trace-event@^1.0.2 installed at node_modules\[email protected]@chrome-trace-event
[8/24] glob-to-regexp@^0.4.1 installed at node_modules\[email protected]@glob-to-regexp
[9/24] json-parse-better-errors@^1.0.2 installed at node_modules\[email protected]@json-parse-better-errors
[10/24] loader-runner@^4.1.0 installed at node_modules\[email protected]@loader-runner
[11/24] @types/eslint-scope@^3.7.0 installed at node_modules\_@[email protected]@@types\eslint-scope
[12/24] tapable@^2.0.0 existed at node_modules\[email protected]@tapable
[13/24] eslint-scope@^5.1.1 installed at node_modules\[email protected]@eslint-scope
[14/24] @webassemblyjs/[email protected] installed at node_modules\_@[email protected]@@webassemblyjs\wasm-parser
[15/24] @webassemblyjs/[email protected] installed at node_modules\_@[email protected]@@webassemblyjs\wasm-edit
[16/24] @webassemblyjs/[email protected] installed at node_modules\_@[email protected]@@webassemblyjs\ast
[17/24] mime-types@^2.1.27 installed at node_modules\[email protected]@mime-types
[18/24] neo-async@^2.6.2 installed at node_modules\[email protected]@neo-async
[19/24] watchpack@^2.0.0 installed at node_modules\[email protected]@watchpack
[20/24] webpack-sources@^2.1.1 installed at node_modules\[email protected]@webpack-sources
[21/24] pkg-dir@^4.2.0 installed at node_modules\[email protected]@pkg-dir
[22/24] browserslist@^4.14.5 installed at node_modules\[email protected]@browserslist
[23/24] terser-webpack-plugin@^5.0.3 installed at node_modules\[email protected]@terser-webpack-plugin
[24/24] schema-utils@^3.0.0 installed at node_modules\[email protected]@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)
→ [email protected] › electron-to-chromium@^1.3.591(1.3.592) (11:02:37)
→ [email protected] › [email protected] › @types/node@*(14.14.7) (03:42:05)
2020-11-09
→ [email protected] › tapable@^2.0.0(2.1.1) (18:29:09)
→ [email protected] › caniuse-lite@^1.0.30001157(1.0.30001157) (13:34:05)
2020-11-07
→ [email protected] › 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)
[[email protected]] 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\[email protected]@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\[email protected]@interpret
[2/13] colorette@^1.2.1 installed at node_modules\[email protected]@colorette
[3/13] @webpack-cli/serve@^1.1.0 installed at node_modules\_@[email protected]@@webpack-cli\serve
[4/13] leven@^3.1.0 installed at node_modules\[email protected]@leven
[5/13] enquirer@^2.3.6 installed at node_modules\[email protected]@enquirer
[6/13] v8-compile-cache@^2.2.0 installed at node_modules\[email protected]@v8-compile-cache
[7/13] commander@^6.2.0 installed at node_modules\[email protected]@commander
[8/13] @webpack-cli/info@^1.1.0 installed at node_modules\_@[email protected]@@webpack-cli\info
[9/13] command-line-usage@^6.1.0 installed at node_modules\[email protected]@command-line-usage
[10/13] import-local@^3.0.2 installed at node_modules\[email protected]@import-local
[11/13] rechoir@^0.7.0 installed at node_modules\[email protected]@rechoir
[12/13] webpack-merge@^4.2.2 installed at node_modules\[email protected]@webpack-merge
[13/13] execa@^4.1.0 installed at node_modules\[email protected]@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:
→ [email protected] › 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)
→ [email protected] › [email protected] › 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)
[[email protected]] 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 [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: 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 [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: 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 [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: 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 [email protected]: 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 [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
> [email protected] 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
> [email protected] 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 -)
> [email protected] 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 [email protected]: 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 [email protected]: 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
> [email protected] 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文件