本地安装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-listE:\WorkSpace\PhpStorm\myVue>

【【Vue.js学习笔记】1（使用npm安装Vue.js环境,使用vue-cli创建Vue项目）】重复进行安装，还是会出现上面的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 npm@4.6.1 E:\MyProgram\Node\node_global\npm -> E:\MyProgram\Node\node_global\node_modules\ npm\bin\npm-cli.js + npm@4.6.1 added 43 packages from 22 contributors, removed 426 packages and updated 107 pac kages in 52.459sE:\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 lzhproE:\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 DONECompiled successfully in 4859ms14:37:16 IYour application is running here: http://localhost:8080

浏览器访问http://localhost:8080：

文章图片

推荐阅读

• 

  色母片是什么
• 

  mysql怎么查找递归 sql实现mysql递归查询
• 

  java数组基础详解
• 

  宝宝|婴幼儿意外伤害第一时间如何正确处置？
• 

  mysql服务层中解析器包含哪些功能 mysql解析器是什么
• 

  别出心裁的“烧南北”
• 

  真机|小米又站起来了！MIX 4真机屏幕曝光：这效果太好
• 

  水果拼盘常用水果 三种水果拼盘图片
• 

  品质分析方法,统计学分析方法有哪些
• 

  2023年北京郁金香文化节有几个展区参加 2023年北京郁金香文化节有几个展区
• 

  拍摄延时摄影用什么格式，延时摄影的图片格式
• 

  htcG13手机应该下个什么文件阅读器或者浏览器？一打开爱奇艺就自动把视频 图片查看器 音乐播放器全改成了爱奇艺万能播放器，
• 

  轻轨是地铁吗
• 

  mysql解压tar
• 

  百度导航下载导航，百度地图导航下载
• 

  go语言控制台输出 go语言控制台输入
• 

  预算在1500,如何配置一台玩DNF的电脑？
• 

  破晓色是什么颜色？
• 

  工程竣工验收需要哪些资料？ 工程竣工验收需要哪些资料
• 

  比亚迪s7报价多少 比亚迪s7报价多少?

• JavaScript|vue 基于axios封装request接口请求——request.js文件
• vue.js|vue中使用axios封装成request使用
• vue.js组件开发
• 前端开发|Vue2.x API 学习
• javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
• vue.js|后端开发学习Vue(一)
• JS|VUE学习笔记[30-46]
• vue.js|Vue为何弃用经典的Ajax，选择自研Axios（）
• vue|vue3替代vuex的框架piniajs实例教程
• cmd配置npm仓库镜像报错