Vue-cli脚手架的安装过程

废话少说，当你看到这里的时候我认为你已经浏览过相关的文章了。这也是我自己安装过程的总结。不管是Vue的官方文档还是Vue的菜鸟教程，甚至CSDN博客上面都有许多的安装教程，他们的总结也非常棒。我也把我的安装过程说一说，希望总会有帮助到某个人的那一天。我用的是window系统

总结一下就是：
1   cnpm install --global vue-cli
2   vue init webpack my-project  这里一直默认也行
3   cnpm install  关键是这一步，很多文章、或者教程都会漏掉
4   npm run dev
5   http://localhost:8081 在网上输入这个网址回车，是否成功很明显可以看出来
具体操作下面详细介绍：会花点时间浏览

一、全局安装 vue-cli
window+R打开cmd窗口，然后cd Desktop回车进入到桌面(这一步是可有可无的，我也是图个方便，以后好找)。然后输入cnpm install --global vue-cli。如下所示：

C:\Users\lenovo>cd Desktop
C:\Users\lenovo\Desktop>cnpm install --global vue-cli

cnpm install --global vue-cli在全局安装这个后，他就会在安装好多下面这个东西，英语不怎么好，我也不仔细去翻译了。总之不出现红色报错就没问题

[1/20] commander@^2.9.0 installed at node_modules\[email protected]@commander
[2/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[4/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[5/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consoli
date
[6/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf
[7/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[8/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[9/20] [email protected] installed at node_modules\[email protected]@uid
[10/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[11/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read
-metadata
[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]@coffe
e-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm
[email protected]@validate-npm-package-name
[15/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith

[16/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars

[17/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
1.0@download-git-repo
[18/20] request@^2.67.0 installed at node_modules\[email protected]@request
[19/20] async@^2.4.0 installed at node_modules\[email protected]@async
[20/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer
deprecate [email protected] › [email protected] › coffee-script@^1.12.4 CoffeeScr
ipt on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2019-04-06): 1 packages (detail see file C:\Users\lenovo
\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
  2019-04-10
    → [email protected] › uglify-js@^3.1.4(3.5.4) (13:34:25)
All packages installed (238 packages installed from npm registry, used 2m(networ
k 2m), speed 57.43kB/s, json 223(406.63kB), tarball 4.72MB)
[[email protected]] link C:\Users\lenovo\AppData\Roaming\npm\vue@ -> C:\Users\lenovo
\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[[email protected]] link C:\Users\lenovo\AppData\Roaming\npm\vue-init@ -> C:\Users\l
enovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[[email protected]] link C:\Users\lenovo\AppData\Roaming\npm\vue-list@ -> C:\Users\l
enovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\lenovo\Desktop>

二、创建一个基于 webpack 模板的新项目
接着再输入 vue init webpack mydemo。后面这个mydemo名字是可以随便取得，不过我们尽量专业一点，不能随便取什么a,b,c之类的。
回车之后
在下所示，我们都默认安装，不过有几条不需要默认，分别是

	? Install vue-router?No   路由我们项目中可能用不到，不过也没事
	? Set up unit tests No     这里我们不需要自动化的测试。
	? Setup e2e tests with Nightwatch? No

上面这三个我们NO就行，再回车就行

C:\Users\lenovo\Desktop> vue init webpack mydemo
	? Project name y
	? Project description A Vue.js project
	? Author xuzhuodong <[email protected]>
	? Vue build (Use arrow keys)
	? Vue build standalone
	? Install vue-router?No
	? Use ESLint to lint your code? Yes
	? Pick an ESLint preset Standard
	? Set up unit tests No
	? Setup e2e tests with Nightwatch? No
	? Should we run `npm install` for you after the project has been created? (recom
	? Should we run `npm install` for you after the project has been created? (recom

	mended) npm

   	vue-cli · Generated "mydemo".
	**# Installing project dependencies ...**
	**# ========================**

三、到这了的话他就会提示说直接进入到mydemo文件，然后运行npm run dev就行了。
不过问题就出现在这了，回车后发现出错了

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/web
pack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to in
stall?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2019-04-13T03_57_07
_211Z-debug.log

C:\Users\lenovo\Desktop\mydemo>

四、这时候你看一下自己的桌面，打开mydemo的文件夹看看

注意看一下，mydemo文件里面没有node_modules这个文件，我第一次安装的时候都没有注意到这个，出了很多错，问了很多人才发现的，因为上面已经有 npm install安装过了。不过没有也没关系
这时候我们只需再次安装就可以了，那就cnpm install安装就行了。（这里我用过npm install安装，不过不知道为什么不行，因为已经安装好所以就没去查了，如果知道的可以在下方留言，谢谢。）。这个过程可能会花个几分钟，所以网速尽量好的时候安装。有的时候你的网速不好的话可能会导致某些文件下载不全，明明你的步骤都没有错，可能就是网速问题，这也是一方面。网速不好真的很难受，我现在就是一边安装一边写这个博客的，网速有点不好，不过最后也安装好了。

C:\Users\lenovo\Desktop\mydemo>cnpm install
- [34/47] Installing webpack@^3.6.0platform unsupported [email protected] › web
[email protected] › [email protected] › [email protected] › fsevents@^1.2.7 Package require
 os(darwin) not compatible with your platform(win32)
/ [34/47] Installing loader-utils@^1.0.2[fsevents@^1.2.7] optional install error
: Package require os(darwin) not compatible with your platform(win32)
√ Installed 47 packages
√ Linked 757 latest versions
[1/1] scripts.postinstall [email protected] › [email protected] › uglifyjs-webpack
-plugin@^0.4.6 run "node lib/post_install.js", root: "C:\\Users\\lenovo\\Desktop
\\mydemo\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[1/1] scripts.postinstall [email protected] › [email protected] › uglifyjs-webpack
-plugin@^0.4.6 finished in 5s
√ Run 1 scripts
peerDependencies link [email protected] in C:\Users\lenovo\Desktop\mydemo\node_modules\_
[email protected]@ajv-keywords unmet with C:\Users\lenovo\Desktop\mydemo\node_m
odules\ajv(6.10.0)
deprecate [email protected] › browserslist@^2.11.3 Browserslist 2 could fail on
 reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › [email protected] › [email protected] › browserslis
t@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in o
ther tools.
deprecate [email protected] › [email protected] › [email protected] › circular-j
son@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate [email protected] › bfj-node4@^5.2.0 Switch to the `bfj`
package for fixes and new features!
Recently updated (since 2019-04-06): 5 packages (detail see file C:\Users\lenovo
\Desktop\mydemo\node_modules\.recently_updates.txt)
  Today:
    → [email protected] › [email protected] › url-parse@^1.1.8(1.4.6)
 (00:33:53)
    → [email protected] › prettier@^1.7.0(1.17.0) (04:36:46)
√ All packages installed (912 packages installed from npm registry, used 6m(net
work 6m), speed 5.25kB/s, json 804(1.76MB), tarball 0B)

C:\Users\lenovo\Desktop\mydemo>

出现一些警告，不过也没关系。这时候你在看看你的mydemo文件，里面就出现node_modules这个文件了

五、然后你再运行npm run dev 或者 npm run start回车
这时候他也会下载一堆东西下来，我就觉得没什么用。最主要是最后面一行
C:\Users\lenovo\Desktop\mydemo>npm run dev

> [email protected] dev C:\Users\lenovo\Desktop\mydemo
> 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 ...client\index.js?http://localhost:8
 10% building modules 2/3 modules 1 active ...5@webpack-dev-server\client\socket
 10% building modules 2/4 modules 2 active ...@webpack-dev-server\client\overlay
 10% building modules 2/5 modules 3 active ...\webpack\hot nonrecursive /^\.\/lo
 10% building modules 2/6 modules 4 active ...o\node_modules\[email protected]@url\url
 10% building modules 3/6 modules 3 active ...o\node_modules\[email protected]@url\url
 10% building modules 4/6 modules 2 active ...o\node_modules\[email protected]@url\url
 10% building modules 5/6 modules 1 active ...o\node_modules\[email protected]@url\url
 10% building modules 5/7 modules 2 active [email protected]@webpack\hot\dev-server
 10% building modules 5/8 modules 3 active [email protected]@webpack\hot\emitter
 10% building modules 5/9 modules 4 active ...es\[email protected]@webpack\hot\log
 10% building modules 6/9 modules 3 active ...es\[email protected]@webpack\hot\log
 10% building modules 7/9 modules 2 active ...es\[email protected]@webpack\hot\log
 10% building modules 8/9 modules 1 active ...es\[email protected]@webpack\hot\log
 10% building modules 8/10 modules 2 active ...ers\lenovo\Desktop\mydemo\src\mai
 10% building modules 8/11 modules 3 active [email protected]@loglevel\lib\logleve
 11% building modules 9/11 modules 2 active [email protected]@loglevel\lib\logleve
 11% building modules 9/12 modules 3 active ....12.0@webpack\hot\log-apply-resul
 11% building modules 9/13 modules 4 active [email protected]@strip-ansi\inde
 11% building modules 9/14 modules 5 active ...odules\[email protected]@events\event
 11% building modules 9/15 modules 6 active [email protected]@sockjs-client\dist\sockj
 11% building modules 10/15 modules 5 active [email protected]@sockjs-client\dist\sock
 11% building modules 11/15 modules 4 active [email protected]@sockjs-client\dist\sock
 11% building modules 12/15 modules 3 active [email protected]@sockjs-client\dist\sock
 11% building modules 12/16 modules 4 active [email protected]@querystring-es3\ind
 11% building modules 12/17 modules 5 active ...\node_modules\[email protected]@url\ut
 11% building modules 13/17 modules 4 active ...\node_modules\[email protected]@url\ut
 11% building modules 13/18 modules 5 active ...\[email protected]@punycode\punyco
 11% building modules 13/19 modules 6 active ...s\[email protected]@ansi-html\ind
 11% building modules 14/19 modules 5 active ...s\[email protected]@ansi-html\ind
 11% building modules 14/20 modules 6 active [email protected]@html-entities\ind
 11% building modules 15/20 modules 5 active [email protected]@html-entities\ind
 11% building modules 16/20 modules 4 active [email protected]@html-entities\ind
 12% building modules 17/20 modules 3 active [email protected]@html-entities\ind
 12% building modules 18/20 modules 2 active [email protected]@html-entities\ind
 12% building modules 19/20 modules 1 active [email protected]@sockjs-client\dist\sock
 12% building modules 19/21 modules 2 active [email protected]@querystring-es3\deco
 12% building modules 19/22 modules 3 active [email protected]@querystring-es3\enco
 12% building modules 19/23 modules 4 active ...2.1@html-entities\lib\xml-entiti
 12% building modules 19/24 modules 5 active ...1@html-entities\lib\html4-entiti
 12% building modules 19/25 modules 6 active ...1@html-entities\lib\html5-entiti
 12% building modules 19/26 modules 7 active [email protected]@webpack\buildin\glob
 12% building modules 19/27 modules 8 active [email protected]@webpack\buildin\modu
 12% building modules 19/28 modules 9 active ...vo\Desktop\mydemo\src\router\ind
 12% building modules 19/29 modules 10 active ...dules\[email protected]@vue\dist\vue.
 12% building modules 20/29 modules 9 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 21/29 modules 8 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 22/29 modules 7 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 23/29 modules 6 active ...dules\[email protected]@vue\dist\vue.e
 12% building modules 24/29 modules 5 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 25/29 modules 4 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 26/29 modules 3 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 27/29 modules 2 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 28/29 modules 1 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 28/30 modules 2 active ...ers\lenovo\Desktop\mydemo\src\Ap
 13% building modules 28/31 modules 3 active [email protected]@ansi-regex\ind
 13% building modules 28/32 modules 4 active ...\mydemo\src\components\HelloWorl
 13% building modules 29/32 modules 3 active ...\mydemo\src\components\HelloWorl
 13% building modules 30/32 modules 2 active ...\mydemo\src\components\HelloWorl
 13% building modules 31/32 modules 1 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 31/33 modules 2 active ...ers\lenovo\Desktop\mydemo\src\Ap
 13% building modules 31/34 modules 3 active ...\mydemo\src\components\HelloWorl
 13% building modules 32/34 modules 2 active ...\mydemo\src\components\HelloWorl
 13% building modules 33/34 modules 1 active ...dules\[email protected]@vue\dist\vue.e
 13% building modules 33/35 modules 2 active ...ue-loader\lib\component-normaliz
 13% building modules 33/36 modules 3 active ...ers\lenovo\Desktop\mydemo\src\Ap
 13% building modules 33/37 modules 4 active ...\mydemo\src\components\HelloWorl
d.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }
.
 14% building modules 34/37 modules 3 active ...\mydemo\src\components\HelloWorl
 14% building modules 35/37 modules 2 active ...ue-loader\lib\component-normaliz
 14% building modules 35/38 modules 3 active ...0.4@vue-router\dist\vue-router.e
 14% building modules 36/38 modules 2 active ...0.4@vue-router\dist\vue-router.e
 14% building modules 36/39 modules 3 active ....3.3@vue-hot-reload-api\dist\ind
 14% building modules 36/40 modules 4 active ...ers\lenovo\Desktop\mydemo\src\Ap
 14% building modules 37/40 modules 3 active ....3.3@vue-hot-reload-api\dist\ind
 14% building modules 37/41 modules 4 active ...\mydemo\src\components\HelloWorl
 14% building modules 38/41 modules 3 active ....3.3@vue-hot-reload-api\dist\ind
 14% building modules 38/42 modules 4 active ...ers\lenovo\Desktop\mydemo\src\Ap
 14% building modules 38/43 modules 5 active ...\mydemo\src\components\HelloWorl
 14% building modules 39/43 modules 4 active ...\mydemo\src\components\HelloWorl
 14% building modules 40/43 modules 3 active ...\mydemo\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 ...\mydemo\src\components\HelloWorl
 15% building modules 43/44 modules 1 active ...\mydemo\src\components\HelloWorl
 15% building modules 44/45 modules 1 active [email protected]@css-loader\lib\css-ba
 15% building modules 44/46 modules 2 active ...@vue-style-loader\lib\listToStyl
 15% building modules 44/47 modules 3 active ...vo\Desktop\mydemo\src\assets\log
 15% building modules 45/47 modules 2 active ...vo\Desktop\mydemo\src\assets\log
 15% building modules 46/47 modules 1 active ...@vue-style-loader\lib\listToStyl
 95% emitting

 DONE  Compiled successfully in 35216ms                                 12:11:58


 I  Your application is running here: http://localhost:8081

六、看到最后一行的路径没有，把它复制下来
然后在你的网页上打开，出现这个就表示我们成功了

好了，到这里就结束了。虽然有点长，不过都是本人一边安装一边写下来的，非常感谢你的光顾。谢谢大家。
总结一下就是：
1 .cnpm install --global vue-cli
2. vue init webpack my-project 这里一直默认也行
3. cnpm install
4. npm run dev
具体操作下面详细介绍：