【Vue.js学习笔记】1：使用npm安装Vue.js环境,使用vue-cli创建Vue项目
本地安装Vue
不使用全局安装，先创建一个目录，然后进入到该目录下，使用cnpm install vue安装：
E:\WorkSpace\PhpStorm\myVue>cnpm install vue
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 885ms, s
peed 777.08kB/s, json 1(22.75kB), tarball 664.97kB)
E:\WorkSpace\PhpStorm\myVue>目录下多了：
全局安装vue-cli脚手架
vue-cli是Vue.js的官方命令行工具，工具类的东西一般应当全局安装，使用cnpm install --global vue-cli安装：
E:\WorkSpace\PhpStorm\myVue>cnpm install --global vue-cli
Downloading vue-cli to E:\MyProgram\Node\node_global\node_modules\vue-cli_tmp
Copying E:\MyProgram\Node\node_global\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vu
e-cli to E:\MyProgram\Node\node_global\node_modules\vue-cli
Installing vue-cli's dependencies to E:\MyProgram\Node\node_global\node_modules\
vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.15.1@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[4/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consoli
date
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
[6/20] semver@^5.1.0 installed at node_modules\_semver@5.5.0@semver
[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.1@chalk
[8/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-
metadata
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[11/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[12/20] async@^2.4.0 installed at node_modules\_async@2.6.1@async
[13/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm
-package-name@3.0.0@validate-npm-package-name
[14/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.11@handlebar
s
[15/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[npminstall:get] retry GET https://registry.npm.taobao.org/win-fork after 100ms,
retry left 4, error: ResponseError: socket hang up, GET https://registry.npm.ta
obao.org/win-fork -1 (connected: true, keepalive socket: true, agent status: {"c
reateSocketCount":21,"createSocketErrorCount":0,"closeSocketCount":2,"errorSocke
tCount":0,"timeoutSocketCount":1,"requestCount":388,"freeSockets":{"cdn.npm.taob
ao.org:443:::::::true::":10,"registry.npm.taobao.org:443:::::::true::":3},"socke
ts":{"registry.npm.taobao.org:443:::::::true::":6},"requests":{}})
headers: {}
[npminstall:get] retry GET https://registry.npm.taobao.org/glob after 100ms, ret
ry left 4, error: ResponseError: socket hang up, GET https://registry.npm.taobao
.org/glob -1 (connected: true, keepalive socket: true, agent status: {"createSoc
ketCount":21,"createSocketErrorCount":0,"closeSocketCount":3,"errorSocketCount":
0,"timeoutSocketCount":2,"requestCount":388,"freeSockets":{"cdn.npm.taobao.org:4
43:::::::true::":10,"registry.npm.taobao.org:443:::::::true::":3},"sockets":{"re
gistry.npm.taobao.org:443:::::::true::":5},"requests":{}})
headers: {}
[npminstall:get] retry GET https://registry.npm.taobao.org/extend-shallow after
100ms, retry left 4, error: ResponseError: socket hang up, GET https://registry.
npm.taobao.org/extend-shallow -1 (connected: true, keepalive socket: true, agent
status: {"createSocketCount":21,"createSocketErrorCount":0,"closeSocketCount":4
,"errorSocketCount":0,"timeoutSocketCount":5,"requestCount":388,"freeSockets":{"
cdn.npm.taobao.org:443:::::::true::":10,"registry.npm.taobao.org:443:::::::true:
:":3},"sockets":{"registry.npm.taobao.org:443:::::::true::":2},"requests":{}})
headers: {}
[npminstall:get] retry GET https://registry.npm.taobao.org/coffee-script after 1
00ms, retry left 4, error: ResponseError: socket hang up, GET https://registry.n
pm.taobao.org/coffee-script -1 (connected: true, keepalive socket: true, agent s
tatus: {"createSocketCount":21,"createSocketErrorCount":0,"closeSocketCount":5,"
errorSocketCount":0,"timeoutSocketCount":5,"requestCount":388,"freeSockets":{"cd
n.npm.taobao.org:443:::::::true::":10,"registry.npm.taobao.org:443:::::::true::"
:3},"sockets":{"registry.npm.taobao.org:443:::::::true::":2},"requests":{}})
headers: {}
[npminstall:get] retry GET https://registry.npm.taobao.org/ansi-red after 100ms,
retry left 4, error: ResponseError: socket hang up, GET https://registry.npm.ta
obao.org/ansi-red -1 (connected: true, keepalive socket: true, agent status: {"c
reateSocketCount":21,"createSocketErrorCount":0,"closeSocketCount":6,"errorSocke
tCount":0,"timeoutSocketCount":5,"requestCount":388,"freeSockets":{"cdn.npm.taob
ao.org:443:::::::true::":10,"registry.npm.taobao.org:443:::::::true::":3},"socke
ts":{"registry.npm.taobao.org:443:::::::true::":2},"requests":{}})
headers: {}
[16/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffe
e-script
[17/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[npminstall:get] retry GET https://registry.npm.taobao.org/safer-buffer after 10
0ms, retry left 4, error: ResponseError: socket hang up, GET https://registry.np
m.taobao.org/safer-buffer -1 (connected: true, keepalive socket: true, agent sta
tus: {"createSocketCount":23,"createSocketErrorCount":0,"closeSocketCount":7,"er
rorSocketCount":0,"timeoutSocketCount":6,"requestCount":412,"freeSockets":{"cdn.
npm.taobao.org:443:::::::true::":10,"registry.npm.taobao.org:443:::::::true::":5
},"sockets":{"registry.npm.taobao.org:443:::::::true::":1},"requests":{}})
headers: {}
[18/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.0.0@inquirer
[19/20] request@^2.67.0 installed at node_modules\_request@2.87.0@request
[npminstall:get] retry GET https://registry.npm.taobao.org/decompress after 100m
s, retry left 4, error: SyntaxError: Unexpected end of JSON input
[20/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
0.2@download-git-repo
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScr
ipt on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2018-06-18): 1 packages (detail see file E:\MyProgram\No
de\node_global\node_modules\vue-cli\node_modules\.recently_updates.txt)
2018-06-22
→ inquirer@6.0.0 › rxjs@6.2.1 › tslib@^1.9.0(1.9.3) (15:45:03)
All packages installed (251 packages installed from npm registry, used 42s, spee
d 166.69kB/s, json 235(1.69MB), tarball 5.21MB)
[vue-cli@2.9.6] link E:\MyProgram\Node\node_global\vue@ -> E:\MyProgram\Node\nod
e_global\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link E:\MyProgram\Node\node_global\vue-init@ -> E:\MyProgram\Nod
e\node_global\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] link E:\MyProgram\Node\node_global\vue-list@ -> E:\MyProgram\Nod
e\node_global\node_modules\vue-cli\bin\vue-list
E:\WorkSpace\PhpStorm\myVue>重复进行安装，还是会出现上面的retry问题和Unexpected end of JSON问题，其中retry问题可能出现在其它号码步骤上，而且似乎都是在十几步。
创建Vue项目
使用vue-cli创建一个基于webpack模板的Vue项目时，会提示一系列的项目设置，一路回车。但是这时出现了WARN：
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 istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump而且进度条过一会就卡住(也可能是太慢几乎为0)了，只好CTRL+C终止。网上查，一说是npm的版本太高了，但这在WARN里完全看不出来呀。
调整npm版本
E:\WorkSpace\PhpStorm\myVue>npm install -g [email protected]
E:\MyProgram\Node\node_global\npm -> E:\MyProgram\Node\node_global\node_modules\
npm\bin\npm-cli.js
+ [email protected]
added 43 packages from 22 contributors, removed 426 packages and updated 107 pac
kages in 52.459s
E:\WorkSpace\PhpStorm\myVue>npm -v
4.6.1清理缓存(*)
这一步是按照网上的说法想让安装vue-cli一路顺风，但是重新安装vue-cli还是会出现前面的retry问题和Unexpected end of JSON问题，而且没法使用npm安装，只能用cnpm，不知道这样最后的vue-cli有没有完整地安装成功。现在实在找不到什么解决办法，只能先往后做试试。
E:\WorkSpace\PhpStorm\myVue>npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.
E:\WorkSpace\PhpStorm\myVue>cnpm cache clean --force
npm WARN using --force I sure hope you know what you are doing.重新创建Vue项目
删掉刚刚自动创建的目录，它竟然已经有150多M了。重新创建一个Vue项目，一路回车，然后等待下载。
这次还是出现了WARN，看来不是npm的版本问题，布布扣和知乎上的说法似乎不对。慕课问答上说可以忽略，有待考究。
创建Vue项目使用的命令是：
vue init webpack 项目名一路回车、等待下载之后：
测试运行Vue项目
E:\WorkSpace\PhpStorm\myVue>cd lzhpro
E:\WorkSpace\PhpStorm\myVue\lzhpro>cnpm install
√ Installed 58 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 82ms, speed 0B/s, json 0(0B), tarball 0B)
E:\WorkSpace\PhpStorm\myVue\lzhpro>cnpm run dev
> lzhpro@1.0.0 dev E:\WorkSpace\PhpStorm\myVue\lzhpro
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
10% building modules 1/2 modules 1 active ...ode_modules\webpack\hot\dev-server
10% building modules 2/3 modules 1 active ...client\index.js?http://localhost:8
10% building modules 2/4 modules 2 active ...ace\PhpStorm\myVue\lzhpro\src\main
10% building modules 2/5 modules 3 active ...zhpro\node_modules\webpack\hot\log
10% building modules 2/6 modules 4 active ...dules\webpack\hot\log-apply-result
10% building modules 2/7 modules 5 active ...o\node_modules\webpack\hot\emitter
10% building modules 3/7 modules 4 active ...o\node_modules\webpack\hot\emitter
10% building modules 4/7 modules 3 active ...o\node_modules\webpack\hot\emitter
10% building modules 5/7 modules 2 active ...o\node_modules\webpack\hot\emitter
10% building modules 6/7 modules 1 active ...o\node_modules\webpack\hot\emitter
10% building modules 7/8 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo
10% building modules 7/9 modules 2 active ...s\webpack-dev-server\client\socket
10% building modules 7/10 modules 3 active ...\webpack-dev-server\client\overla
10% building modules 8/10 modules 2 active ...\webpack-dev-server\client\overla
10% building modules 8/11 modules 3 active ...\myVue\lzhpro\node_modules\url\ur
10% building modules 8/12 modules 4 active ...hpro\node_modules\vue\dist\vue.es
10% building modules 8/13 modules 5 active ...\lzhpro\node_modules\events\event
11% building modules 9/13 modules 4 active ...\lzhpro\node_modules\events\event
11% building modules 10/13 modules 3 active ...\lzhpro\node_modules\events\even
11% building modules 11/13 modules 2 active ...\lzhpro\node_modules\events\even
11% building modules 12/13 modules 1 active ...\lzhpro\node_modules\events\even
11% building modules 12/14 modules 2 active ...ode_modules\webpack\buildin\glob
11% building modules 13/14 modules 1 active ...\lzhpro\node_modules\events\even
11% building modules 14/15 modules 1 active ...torm\myVue\lzhpro\src\router\ind
11% building modules 14/16 modules 2 active ...myVue\lzhpro\node_modules\url\ut
11% building modules 14/17 modules 3 active ...hpro\node_modules\strip-ansi\ind
11% building modules 14/18 modules 4 active ...node_modules\loglevel\lib\loglev
11% building modules 14/19 modules 5 active ...pro\node_modules\punycode\punyco
11% building modules 15/19 modules 4 active ...pro\node_modules\punycode\punyco
11% building modules 15/20 modules 5 active ...node_modules\querystring-es3\ind
11% building modules 15/21 modules 6 active ..._modules\sockjs-client\dist\sock
11% building modules 15/22 modules 7 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
11% building modules 16/22 modules 6 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 17/22 modules 5 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 18/22 modules 4 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 18/23 modules 5 active ...ode_modules\webpack\buildin\modu
12% building modules 19/23 modules 4 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 20/23 modules 3 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 21/23 modules 2 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 22/23 modules 1 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
12% building modules 23/24 modules 1 active ...zhpro\node_modules\ansi-html\ind
12% building modules 23/25 modules 2 active ...o\node_modules\html-entities\ind
12% building modules 23/26 modules 3 active ...\lzhpro\src\components\HelloWorl
12% building modules 23/27 modules 4 active ...ode_modules\querystring-es3\deco
12% building modules 23/28 modules 5 active ...ode_modules\querystring-es3\enco
12% building modules 24/28 modules 4 active ...ode_modules\querystring-es3\enco
13% building modules 25/28 modules 3 active ...ode_modules\querystring-es3\enco
13% building modules 25/29 modules 4 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
13% building modules 26/29 modules 3 active ...ode_modules\querystring-es3\enco
13% building modules 26/30 modules 4 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
13% building modules 27/30 modules 3 active ...ode_modules\querystring-es3\enco
13% building modules 27/31 modules 4 active ...ue-loader\lib\component-normaliz
13% building modules 28/31 modules 3 active ...ue-loader\lib\component-normaliz
13% building modules 28/32 modules 4 active ...\lzhpro\src\components\HelloWorl
13% building modules 28/33 modules 5 active ...\lzhpro\src\components\HelloWorl
13% building modules 29/33 modules 4 active ...\lzhpro\src\components\HelloWorl
13% building modules 30/33 modules 3 active ...ue-loader\lib\component-normaliz
13% building modules 31/33 modules 2 active ...ue-loader\lib\component-normaliz
13% building modules 32/33 modules 1 active ...ue-loader\lib\component-normaliz
13% building modules 32/34 modules 2 active ...s\html-entities\lib\html5-entiti
13% building modules 32/35 modules 3 active ...les\html-entities\lib\xml-entiti
13% building modules 33/35 modules 2 active ...les\html-entities\lib\xml-entiti
13% building modules 33/36 modules 3 active ...s\html-entities\lib\html4-entiti
13% building modules 33/37 modules 4 active ...les\vue-router\dist\vue-router.e
14% building modules 34/37 modules 3 active ...les\vue-router\dist\vue-router.e
14% building modules 35/37 modules 2 active ...les\vue-router\dist\vue-router.e
14% building modules 35/38 modules 3 active ...hpro\node_modules\ansi-regex\ind
14% building modules 36/38 modules 2 active ...hpro\node_modules\ansi-regex\ind
14% building modules 37/38 modules 1 active ...hpro\node_modules\ansi-regex\ind
14% building modules 37/39 modules 2 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
14% building modules 38/39 modules 1 active ...hpro\node_modules\ansi-regex\ind
14% building modules 38/40 modules 2 active ...\lzhpro\src\components\HelloWorl
14% building modules 39/40 modules 1 active ...hpro\node_modules\ansi-regex\ind
14% building modules 39/41 modules 2 active ...ules\vue-hot-reload-api\dist\ind
14% building modules 39/42 modules 3 active ...ace\PhpStorm\myVue\lzhpro\src\Ap
14% building modules 39/43 modules 4 active ...\lzhpro\src\components\HelloWorl
14% building modules 40/43 modules 3 active ...\lzhpro\src\components\HelloWorl
14% building modules 40/44 modules 4 active ...e-style-loader\lib\addStylesClie
14% building modules 41/44 modules 3 active ...e-style-loader\lib\addStylesClie
15% building modules 42/44 modules 2 active ...\lzhpro\src\components\HelloWorl
15% building modules 42/45 modules 3 active ...torm\myVue\lzhpro\src\assets\log
15% building modules 43/45 modules 2 active ...torm\myVue\lzhpro\src\assets\log
15% building modules 44/45 modules 1 active ...torm\myVue\lzhpro\src\assets\log
15% building modules 45/46 modules 1 active ...\vue-style-loader\lib\listToStyl
15% building modules 46/47 modules 1 active ...de_modules\css-loader\lib\css-ba
95% emitting
DONE Compiled successfully in 4859ms 14:37:16
I Your application is running here: http://localhost:8080
浏览器访问http://localhost:8080：
