星点微芒 發表於 2020-7-27 00:00:00

Node.js安装及环境配置

<div class="article-content pt-3 pt-sm-0 container">
<div class="row">
<div class="col-xl w-0 col-12">
<div class="mb-4 card">
<div class="p-lg-30 position-relative card-body">
<h1 class="h2 mb-3">Node.js安装及环境配置</h1>
<div class="d-flex align-items-center justify-content-between flex-wrap mb-4">
<div class="d-flex align-items-center flex-wrap"><img src="https://avatar-static.segmentfault.com/845/057/845057354-603a0af8df38e_huge128"><span class="align-self-center font-size-14">灰太狼的情与殇</span>发布于&nbsp;2020-07-27</div>
</div>
<div id="OA_holder_25" class="ad-container">
<div id="beacon_a28b06c0c4"><img alt="" width="0" height="0" data-src="https://sponsor.segmentfault.com/lg.php?bannerid=0&amp;campaignid=0&amp;zoneid=25&amp;loc=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000023390756&amp;cb=a28b06c0c4"></div>
</div>
<h2 id="item-1">一、安装环境</h2>
<p>1、本机系统：Windows 10 专业版（64位）<br>2、Node.js：node-v8.9.4-x64.msi（64位）</p>
<h2 id="item-2">二、安装Node.js步骤</h2>
<p>1、下载对应自己系统对应的 Node.js 版本，地址：https://nodejs.org/zh-cn/<br>2、选安装目录进行安装<br>3、环境配置<br>4、测试</p>
<h2 id="item-3">三、前期准备</h2>
<p>1、Node.js简介</p>
<p>　　Node.js® 是一个基于&nbsp;Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。它的包生态系统，npm，是目前世界上最大的开源库生态系统。</p>
<p>2、下载Node.js</p>
<p>　　官方地址：https://nodejs.org/en/&nbsp;或&nbsp;https://nodejs.org/zh-cn/<br>　　我下载的是 node-v8.9.4-x64.msi ，如下图：<br><span class="img-wrap"><img src="https://segmentfault.com/img/bVbKi4M" data-ll-status="loaded"></span></p>
<h2 id="item-4">四、开始安装</h2>
<p>　　1、下载完成后，双击“&nbsp;node-v8.9.4-x64.msi&nbsp;”，开始安装：<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi40" data-ll-status="loaded"><br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi47" data-ll-status="loaded"><br>2、点击“ Next ”按钮<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5e" data-ll-status="loaded"><br>3、选择安装目录，点击“ Next ”按钮<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5k" data-ll-status="loaded"><br>4、选择安装项，此处我选择默认，点击“ Next ”按钮<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5n" data-ll-status="loaded"><br>5、点击“ Install ”按钮，开始安装<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5r" data-ll-status="loaded"><br>6、等待安装完成，点击“ Finish ”按钮完成安装<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5D" data-ll-status="loaded"></span></span></span></span></span></span></span></p>
<h2 id="item-5">五、安装完成查看</h2>
<p>　　1、查看是否安装成功</p>
<p>　　A、node -v 查看 node 版本</p>
<p>　　B、npm -v 查看 npm 版本<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5M" data-ll-status="loaded"><br>2、安装完成后，文件目录如下图<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi5R" data-ll-status="loaded"></span></span></p>
<h2 id="item-6">六、环境配置</h2>
<p>　　此处的环境配置主要配置的是 npm 安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。<br>　　例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我的安装目录下创建两个文件夹【node_global】及【node_cache】如下图：<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi52" data-ll-status="loaded"><br>1、设置全局目录和缓存目录，创建完两个空文件夹之后，打开cmd命令窗口，输入</span></p>
<p>　　<code>npm config set prefix "D:\SDE\Node8.9.4\node_global"</code></p>
<p><code>npm config set cache "D:\SDE\Node8.9.4\node_cache"</code><br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi56" data-ll-status="loaded"></span></p>
<p><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi57" data-ll-status="loaded"><br>重新配置：A、删除【 C:\Users\yi081\.npmrc 】文件重新生成。如果 .npmrc 不在这个目录下，就 C 盘全局搜一下；B、直接修改编译 .npmrc 文件。</span></p>
<p>　　2、设置环境变量，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”</p>
<p>　　A、进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\SDE\Node8.9.4\node_modules】</p>
<p>　　B、将【用户变量】下的【Path】修改为【D:\SDE\Node8.9.4\node_global】<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi6s" data-ll-status="loaded"></span></p>
<p><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi60" data-ll-status="loaded"></span></p>
<p><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi7a" data-ll-status="loaded"><br>修改完成，点击“ 确定 ”按钮。</span></p>
<h2 id="item-7">六、测试</h2>
<p>　　配置完后，安装个module测试下，我们就安装最常用的express模块，打开cmd窗口，输入如下命令进行模块的全局安装：</p>
<p>　　<code>npm install express -g # -g是全局安装的意思</code><br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi7j" data-ll-status="loaded"><br>注：如果安装时不加 -g 参数，则安装的模块就会安装在当前路径下，上例若不加 -g 参数，则 express 模块会安装在 C:\Users\yi081目录下的 【node_modules】目录下，目录若不存在会自动生成。<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi7t" data-ll-status="loaded"><br>最后查阅网上资源后，原来，最新express版本中将命令工具分家出来了(项目地址:https://github.com/expressjs/generator)，所以还需要安装一个命令工具，命令如下:</span></span></p>
<p>　　npm install -g express-generator<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi7z" data-ll-status="loaded"><br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi7N" data-ll-status="loaded"><br>使用express创建一个工程，输入命令：express helloworld<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi7S" data-ll-status="loaded"><br>转到 helloworld 目录下，命令：cd helloworld<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi72" data-ll-status="loaded"><br>装载 node 包管理器，执行命令：npm install<br><span class="img-wrap"><img alt="image.png" class="lazy entered loaded exited lazyload" title="image.png" data-src="https://segmentfault.com/img/bVbKi8c" data-ll-status="loaded"></span></span></span></span></span></p>
<p>在浏览器中输入地址：http://localhost:3000/，如下图，访问我们的第一个node web 网页。</p>
<div class="d-flex flex-wrap align-items-center ">
<div class="m-n1 d-flex align-items-center">node.js</div>

</div>
<div class="my-4">
<div id="OA_holder_3" class="ad-container">
<div class="d-none d-lg-flex justify-content-center"><br>
<div id="beacon_b98e7e2484"><img alt="" width="0" height="0" data-src="https://sponsor.segmentfault.com/lg.php?bannerid=2&amp;campaignid=1&amp;zoneid=3&amp;loc=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000023390756&amp;cb=b98e7e2484"></div>
<div>文章来源于：https://segmentfault.com/a/1190000023390756</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div id="comment-area" class="comment-wrapcard">
<div class="d-flex align-items-center justify-content-between bg-transparent card-header">&nbsp;</div>
<div class="card-body">
<div class="mb-4 media">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="col-xl-auto w-xl-300 d-none d-xl-block p-0 right-side col-12">
<div class="sticky-outer-wrapper active">&nbsp;</div>
<div class="sticky-outer-wrapper active">
<div class="sticky-inner-wrapper ">
<div id="first-ad" class="right-block">
<div class="card border-0 overflow-hidden d-none d-xl-flex justify-content-center align-items-center float-ads">
<div id="OA_holder_1" class="ad-container">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">&nbsp;</div><br><br>
来源：https://www.cnblogs.com/webSnow/p/15787265.html
頁: [1]
查看完整版本: Node.js安装及环境配置