<p><code></p> <p>首先,搭建Node环境,安装<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>JS。这里我下载的是<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>JS 8.11.1版本(自带npm5.6.0,npm用于安装插件)&gt;&gt;&gt;传送门:<a href="https://nodejs.org/dist/v8.11.1/" rel="nofollow noreferrer" target="_blank">https://nodejs.org/dist/v8.11.1/</a></p> <p>安装完成后,进入Node的命令行终端。由于npm安装插件是从国外的服务器下载,受网络影响大,经常会出现下载缓慢或异常问题,因此更换国内的淘宝npm镜像--cnpm。<br />在Node命令行下输入安装cnpm命令</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g cnpm --registry=http://registry.npm.taobao.org" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">npm install -g cnpm --registry=<span class="hljs-string">http:</span><span class="hljs-comment">//registry.npm.taobao.org</span></code></pre> <p>之后在网络上看到教程使用npm安装插件的,直接改用cnpm就可以了。</p> <p>npm简介:npm全程是Node package manager,即Node的包管理器,用于Nodejs的插件管理(包括安装、卸载、管理依赖等)。<br />类似VSCode的package manager(左侧栏扩展),从应用市场上安装插件到自己的电脑。</p> <p><span class="img-wrap"><img data-src="/img/bVbbH9J?w=382&amp;h=615" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>顺带提一下VS CODE中提高效率的vue插件安装:<br />Auto Close Tag 自动补全html标签<br />Auto Rename Tag——修改<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>标签时,自动修改匹配的标签<br />AutoFileName——自动补全文件路径提示<br />Babel ES6/ES7——ES6,ES7语法加亮检查插件<br />Chinese (Simplified) Language Pack for Visual Studio Code——为 VS Code 提供简体中文界面<br />ESLint——代码检查插件<br />vetur——<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>语法高亮<br />vscode-icons——为每个文件类型增加一个小图标,使文件目录更直观<br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> 2 Snippets——<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>2 片段补全工具<br />VueHelper——Vue2代码段(包括Vue2 api、vue-router2、vuex2)</p> <p>————————————————————————————————————<br />NodeJS安装完成后,就可以开始创建一个实例了。<br />本人的项目文件夹路径在D:/下,进入Node cmd后要转路径到项目文件夹下。</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: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><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>1.安装vue-cli,-g代表全局安装,不加-g表示本项目安装,这里是本项目安装。<br />vue-cli简介:Vue-cli是Vue的脚手架工具,就像建筑工人在高处作业时一般都要搭一个脚手架,方便工作,在这里vue-cli为我们生成了目录结构。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cnpm install -g vue-cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">cnpm <span class="hljs-keyword">install</span> -g vue-cli</code></pre> <p><span class="img-wrap"><img data-src="/img/bVbbIbD?w=640&amp;h=312" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>2.初始化项目<br />vue init &lt;构建工具&gt; &lt;项目名&gt;</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue init webpack vue-test" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">vue <span class="hljs-keyword">init</span> webpack vue-test</code></pre> <p><span class="img-wrap"><img data-src="/img/bVbbH7r?w=640&amp;h=349" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>等待自动构建完成后,使用npm run dev打开新建的vue项目</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run dev</code></pre> <p><span class="img-wrap"><img data-src="/img/bVbbH7t?w=641&amp;h=195" 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/bVbbH7C?w=648&amp;h=154" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>在浏览中地址栏中输入 [ <a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:8080 ] 便可以看到新建的VUE项目了!<br />文件目录及对应说明:<br /><span class="img-wrap"><img data-src="/img/bVbbH8Q?w=441&amp;h=513" 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/bVbbIaj?w=889&amp;h=602" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>好了!第一个VUE项目就构建完成,可以在浏览器中看到了!~</p> <p></code></p>

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