<p><code></p> <p><strong>前提:</strong>入坑vue.js,从GitHub上download一个vue.js的开源项目,发现不知如何在浏览器运行,通过查阅网上教程,发现网上的很多是教你怎么新建项目,并没有一个是教如何打开已有的项目。自已折腾了一下,成功搭建好项目环境,最终调试成功。现在将过程分享给大家。</p> <p>首先,这个教程主要针对vue小白,并且不知道安装<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>.js环境的。言归正传,下面开始教程:</p> <p><strong>首先下载安装<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>.js</strong><br />从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了。<br /><span class="img-wrap"><img data-src="/img/bVZvTf?w=1105&amp;h=940" src="/img/bVZvTf?w=1105&amp;h=940" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>根据自己电脑选择32位/64位。安装好node,可以先进行下简单的测试安装是否成功了,后面还要进行环境配置<br />在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口<br /><span class="img-wrap"><img data-src="/img/bVZvVZ?w=677&amp;h=442" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></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><strong>安装cnpm</strong><br />由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm<br />在命令行中输入 npm install -g cnpm --registry=<a href="http://registry.npm.taobao.org" rel="nofollow noreferrer" target="_blank">http://registry.npm.taobao.org</a> </p> <p><strong>安装webpack</strong><br />npm install webpack -g</p> <p><strong>安装vue-cli</strong><br />cnpm install vue-cli -g<br />这个过程会耗时十几秒,等走完就好</p> <p>好了,到此整个环境就搭建好了</p> <p><strong>下面就是运行项目了</strong></p> <p><em>cd desktop/项目名称</em><br /><span class="img-wrap"><img data-src="/img/bVZwhS?w=677&amp;h=442" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>进入项目之后安装依赖<br /><em>npm install</em> <br />安装成功后你会发现项目里多了个<br /><span class="img-wrap"><img data-src="/img/bVZwii?w=502&amp;h=185" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>然后<br />npm run dev<br /><span class="img-wrap"><img data-src="/img/bVZwiS?w=677&amp;h=442" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVZwiZ?w=677&amp;h=442" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>自动启动浏览器就会打开项目了<br /><span class="img-wrap"><img data-src="/img/bVZwji?w=1900&amp;h=950" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25274.html