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\_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
具体操作下面详细介绍:
- vue-cli脚手架的安装与基础项目构建
- vue-cli3.0 脚手架搭建项目的过程详解
- Vue-cli 脚手架的安装
- vue在安装cli脚手架的时候怎么不安装语法检测
- vue-cli脚手架一键安装vue项目步骤
- 安装vue-cli脚手架提示Error: spawn npm ENOENT的解决方式
- Vue.js实战系列---Vue-cli完整安装过程
- vue基础17(vue-cli脚手架安装和webpack-simple模板项目生成)
- 学习vue之脚手架安装 - vue-cli
- 安装Vue.js脚手架 vue-cli
- 安装基于Vue-cli脚手架的Vue项目
- vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
- vue-cli搭建脚手架(是需要有一定基础的,不包括node等安装)
- vue-cli脚手架安装
- vue.js通过cli脚手架安装stylus遇到的坑
- vue-cli脚手架安装教程
- vue安装(vue-cli2.0脚手架安装)与创建项目以及打包部署
- 搭建vue脚手架(vue-cli)完整版 / webpack本地安装
- VUE+cli(脚手架安装步骤)以及生成的文件
- 宅小叔前端:Vue2.0搭建Vue脚手架(vue-cli) 及nodejs环境安装