您的位置:首页 > Web前端 > Vue.js

Vue-cli脚手架的安装过程

2019-04-13 12:26 232 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_38934214/article/details/89280625

废话少说,当你看到这里的时候我认为你已经浏览过相关的文章了。这也是我自己安装过程的总结。不管是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\_commander@2.20.0@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] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consoli
date
[6/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.3@rimraf
[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.0@semver
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[11/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read
-metadata
[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@coffe
e-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm
-package-name@3.0.0@validate-npm-package-name
[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith

[16/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.1.1@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\_request@2.88.0@request
[19/20] async@^2.4.0 installed at node_modules\_async@2.6.2@async
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.2.2@inquirer
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 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
→ handlebars@4.1.1 › 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)
[vue-cli@2.9.6] link C:\Users\lenovo\AppData\Roaming\npm\vue@ -> C:\Users\lenovo
\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link C:\Users\lenovo\AppData\Roaming\npm\vue-init@ -> C:\Users\l
enovo\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] 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 <1056409086@qq.com>
? 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! y@1.0.0 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 y@1.0.0 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 babel-loader@7.1.5 › web
pack@3.12.0 › watchpack@1.6.0 › chokidar@2.1.5 › 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 babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack
-plugin@^0.4.6 run "node lib/post_install.js", root: "C:\\Users\\lenovo\\Desktop
\\mydemo\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[1/1] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack
-plugin@^0.4.6 finished in 5s
√ Run 1 scripts
peerDependencies link ajv@5.5.2 in C:\Users\lenovo\Desktop\mydemo\node_modules\_
ajv-keywords@2.1.1@ajv-keywords unmet with C:\Users\lenovo\Desktop\mydemo\node_m
odules\ajv(6.10.0)
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on
reading Browserslist >3.0 config used in other tools.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslis
t@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in o
ther tools.
deprecate eslint@4.19.1 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-j
son@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate webpack-bundle-analyzer@2.13.1 › 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:
→ webpack-dev-server@2.11.5 › sockjs-client@1.1.5 › url-parse@^1.1.8(1.4.6)
(00:33:53)
→ vue-loader@13.7.3 › 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

> y@1.0.0 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\_url@0.11.0@url\url
10% building modules 3/6 modules 3 active ...o\node_modules\_url@0.11.0@url\url
10% building modules 4/6 modules 2 active ...o\node_modules\_url@0.11.0@url\url
10% building modules 5/6 modules 1 active ...o\node_modules\_url@0.11.0@url\url
10% building modules 5/7 modules 2 active ...pack@3.12.0@webpack\hot\dev-server
10% building modules 5/8 modules 3 active ...webpack@3.12.0@webpack\hot\emitter
10% building modules 5/9 modules 4 active ...es\_webpack@3.12.0@webpack\hot\log
10% building modules 6/9 modules 3 active ...es\_webpack@3.12.0@webpack\hot\log
10% building modules 7/9 modules 2 active ...es\_webpack@3.12.0@webpack\hot\log
10% building modules 8/9 modules 1 active ...es\_webpack@3.12.0@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 ...glevel@1.6.1@loglevel\lib\logleve
11% building modules 9/11 modules 2 active ...glevel@1.6.1@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 ..._strip-ansi@3.0.1@strip-ansi\inde
11% building modules 9/14 modules 5 active ...odules\_events@3.0.0@events\event
11% building modules 9/15 modules 6 active ...nt@1.1.5@sockjs-client\dist\sockj
11% building modules 10/15 modules 5 active ...nt@1.1.5@sockjs-client\dist\sock
11% building modules 11/15 modules 4 active ...nt@1.1.5@sockjs-client\dist\sock
11% building modules 12/15 modules 3 active ...nt@1.1.5@sockjs-client\dist\sock
11% building modules 12/16 modules 4 active ...ng-es3@0.2.1@querystring-es3\ind
11% building modules 12/17 modules 5 active ...\node_modules\_url@0.11.0@url\ut
11% building modules 13/17 modules 4 active ...\node_modules\_url@0.11.0@url\ut
11% building modules 13/18 modules 5 active ...\_punycode@1.4.1@punycode\punyco
11% building modules 13/19 modules 6 active ...s\_ansi-html@0.0.7@ansi-html\ind
11% building modules 14/19 modules 5 active ...s\_ansi-html@0.0.7@ansi-html\ind
11% building modules 14/20 modules 6 active ...entities@1.2.1@html-entities\ind
11% building modules 15/20 modules 5 active ...entities@1.2.1@html-entities\ind
11% building modules 16/20 modules 4 active ...entities@1.2.1@html-entities\ind
12% building modules 17/20 modules 3 active ...entities@1.2.1@html-entities\ind
12% building modules 18/20 modules 2 active ...entities@1.2.1@html-entities\ind
12% building modules 19/20 modules 1 active ...nt@1.1.5@sockjs-client\dist\sock
12% building modules 19/21 modules 2 active ...g-es3@0.2.1@querystring-es3\deco
12% building modules 19/22 modules 3 active ...g-es3@0.2.1@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 ...pack@3.12.0@webpack\buildin\glob
12% building modules 19/27 modules 8 active ...pack@3.12.0@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\_vue@2.6.10@vue\dist\vue.
12% building modules 20/29 modules 9 active ...dules\_vue@2.6.10@vue\dist\vue.e
12% building modules 21/29 modules 8 active ...dules\_vue@2.6.10@vue\dist\vue.e
12% building modules 22/29 modules 7 active ...dules\_vue@2.6.10@vue\dist\vue.e
12% building modules 23/29 modules 6 active ...dules\_vue@2.6.10@vue\dist\vue.e
12% building modules 24/29 modules 5 active ...dules\_vue@2.6.10@vue\dist\vue.e
13% building modules 25/29 modules 4 active ...dules\_vue@2.6.10@vue\dist\vue.e
13% building modules 26/29 modules 3 active ...dules\_vue@2.6.10@vue\dist\vue.e
13% building modules 27/29 modules 2 active ...dules\_vue@2.6.10@vue\dist\vue.e
13% building modules 28/29 modules 1 active ...dules\_vue@2.6.10@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 ..._ansi-regex@2.1.1@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\_vue@2.6.10@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\_vue@2.6.10@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 ...er@0.28.11@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
具体操作下面详细介绍:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: