脚本宝典收集整理的这篇文章主要介绍了

vue-cli入门(一)——项目搭建

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">前言</h1> <p>vue-cli作为一款mvvm框架语言(vue)的脚手架,集成了webpack环境及主要依赖,对于项目的搭建、打包、维护管理等都非常方便快捷。在开始项目之前,建议先熟悉vue.js基本语法。<br />安装Node环境</p> <h1 id="articleHeader1">安装<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>环境</h1> <h2 id="articleHeader2">1.安装node.js</h2> <p>在node.js官网下载稳定版本</p> <p><span class="img-wrap"><img data-src="/img/bVMyJp?w=626&amp;h=226" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。</p> <p>检验是否安装成功,在cmd输入命令 node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功</p> <p><span class="img-wrap"><img data-src="/img/bVMyKA?w=445&amp;h=155" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader3">2.安装vue-cli</h2> <p>打开cmd命令行工具,输入npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> -g vue-cli,回车 全局安装vue-cli</p> <p>注:npm会有点慢,建议更改为国内淘宝的镜像,只换源即可。在cmd输入命令:</p> <p><strong>npm config set regis<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a> <a href="https://registry.npm.taobao.org/strong" rel="nofollow noreferrer" target="_blank">https://registry.npm.taobao.o...</a></strong></p> <h1 id="articleHeader4">构建vue-cli项目</h1> <h2 id="articleHeader5">1.创建项目</h2> <p>打开cmd,进入想要创建项目的目录下,输入:<strong>vue init webpack project<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></strong></p> <p>webpack默认是安装2.0版本,若要安装1.0版本,需在webpack后面加上版本号信息,</p> <p><strong>vue init webpack#1.0 project-name</strong>(安装1.0版本)</p> <p>projextname是自定义的项目名称,例:我这里命名为vuedemo</p> <p><span class="img-wrap"><img data-src="/img/bVMyNM?w=477&amp;h=107" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图</p> <p><span class="img-wrap"><img data-src="/img/bVMyNY?w=545&amp;h=259" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>Project name:——项目名称</p> <p>Project description:——项目描述</p> <p>Author:——作者</p> <p><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> build:——构建模式,一般默认选择第一种</p> <p>Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到</p> <p>Use ESL<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a> to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装</p> <h2 id="articleHeader6">2.安装依赖</h2> <p>项目创建完成,打开文件夹可以看到目录结构如下</p> <p><span class="img-wrap"><img data-src="/img/bVMyP8?w=344&amp;h=364" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>此时,项目已经初具雏形,但还未安装依赖,需打开cmd,进入项目所在根目录下,输入npm install,回车</p> <p><span class="img-wrap"><img data-src="/img/bVMyPu?w=623&amp;h=150" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="依赖安装中" title="依赖安装中" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVMyQf?w=610&amp;h=204" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>安装完成后,再返回查看目录结构,可以看到多了node_modules文件夹,里面是各种需要的依赖包</p> <p><span class="img-wrap"><img data-src="/img/bVMyQu?w=285&amp;h=394" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader7">3.运行项目</h2> <p>打开cmd,进入到项目所在目录下,输入npm run dev,回车,启动项目</p> <p><span class="img-wrap"><img data-src="/img/bVMyQM?w=320&amp;h=77" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>完成后,浏览器会自动打开,监听端口8080</p> <p><span class="img-wrap"><img data-src="/img/bVMyQU?w=357&amp;h=73" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>可以在浏览器看到如下画面,恭喜你,已成功构建vue-cli项目,接下来就可以开始开发啦</p> <p><span class="img-wrap"><img data-src="/img/bVMyQ6?w=1171&amp;h=648" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue-cli入门(一)——项目搭建

全部内容,希望文章能够帮你解决

vue-cli入门(一)——项目搭建

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过