Node.js安装教程

康康美感剪发 發表於 2024-4-8 16:25:00

<div id="article_head" style="display: none"></div>
<div id="article_body" style="background-color: rgba(206, 240, 216, 1)">
<h3>1.Node.js</h3>
Node.js是什么？
我们知道，js通常情况下是基于浏览器运行的，那如果脱离了浏览器，该如何运行js呢？
这就需要Node.js了。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408113522522-62072400.png">
<h3>2.下载与安装</h3>
<h4 style="padding-left: 40px">下载</h4>
下载地址：https://nodejs.org/en/download
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408114307352-921969284.png">
以windows为例，有安装版和免安装版。
1号位置是官方推荐的最新版本：https://nodejs.org/dist/v20.12.1/node-v20.12.1-x64.msi
LTS代表的是Long Support Stable(长期支持稳定版)。
2号位置是可以查到Node.js所有的历史版本文件并下载，如：https://nodejs.org/dist/v20.12.1/node-v20.12.1-win-x64.7z。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408143228983-939765382.png">
<h4 style="padding-left: 40px">安装</h4>
运行msi文件，按操作步骤执行即可，会自动将node.js添加到环境变量当中。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408143359576-1356455409.png">
而压缩版，需要我们自己手动配置环境变量。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408145010900-125157810.png">
操作步骤如下：（自动安装可跳过此处）
win+r-->sysdm.cpl-->高级-->环境变量。
在系统变量当中找到path。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408144108279-1291654868.png">
新建-->增加Node.js所在的根目录。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408144158713-1158466990.png">
<h4 style="padding-left: 40px">测试</h4>
打开黑窗口，测试node.js是否安装成功。
分别执行以下命令
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>where node
node -v
npm -v</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408144717706-1551815955.png">
运行不报错，则说明没有问题。 
<h3>3.其它设置</h3>
<h4 style="padding-left: 40px">参数配置查询</h4>
查询所有参数配置
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>npm config ls -ls</code></pre>
显示所有已经被修改过的参数（不包含默认值）
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>npm config ls</code></pre>
<h4><img src="https://img2024.cnblogs.com/blog/1120344/202409/1120344-20240919112128228-1965184475.png"></h4>
说明：上图是已经改好的配置项，不是默认值。
<h4 style="padding-left: 40px">更改缓存的默认存放路径</h4>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>npm config set cache "NODEJS_HOME\node_cache"
npm config set cache "D:\\node-v20.12.1-win-x64\\node_cache"</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408150637424-1027309374.png">
说明：
需将NODEJS_HOME换成你的node.js所在的根目录。
node_cache虽然不存在，运行此命令后也不会立即被创建。
在需要的时候会被自动创建。
<h4 style="padding-left: 40px">更改全局模块的默认存放路径</h4>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>npm config set prefix "NODEJS_HOME\node_global"
npm config set cache "D:\\node-v20.12.1-win-x64\\node_global"</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408151125731-1961487138.png">
说明：
需将NODEJS_HOME换成你的node.js所在的根目录。
node_global/node_modules目录虽然不存在，但在初次安装模块时会被自动创建。
<h4 style="padding-left: 40px">全局安装cnpm</h4>
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>npm install cnpm -g</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408173123883-1892004714.png">
安装成功后，NODEJS_HOME/node_global目录下会多出cnpm的三个文件。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408154611289-98902912.png">
node_modules模块下面也会多出一个cnpm模块。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408154721068-1691020937.png">
将cnpm命令所在目录添加到环境变量当中。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408154902618-1106966237.png">
测试
新打开一个cmd窗口，运行以下命令。
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>where cnpm
cnpm -v</code></pre>
如果执行成功，则证明没有问题。
<h4 style="padding-left: 40px">更改默认镜像</h4>
查看当前启用的仓库地址
<pre class="language-vbnet highlighter-hljs" data-dark-theme="true"><code>npm config get registry</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202409/1120344-20240919111931602-1131402289.png">
默认使用的是： 
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408155904804-699383282.png">
这个是国外的npm仓库地址，我们只要把它改成国内的npm镜像地址就可以了。
<pre class="language-vbnet highlighter-hljs" data-dark-theme="true"><code># 设置为淘宝镜像源
npm config set registry https://registry.npmmirror.com/</code></pre>
<h4 style="padding-left: 40px">删繁就简（推荐使用）</h4>
其实，上面提到的更改缓存路径、更改全局模块存放路径、全局安装cnpm、更改镜像地址，完全没有必要，一个步骤就能搞定了。
具体操作如下：
我们先看globalconfig的地址是否为：NODEJS_HOME/node_global/etc/npmrc
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408160914216-192740023.png">
如果不是，需要通过以下命令进行更改
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>npm config set globalconfig "NODEJS_HOME\\node_global\\etc\\npmrc"
npm config set globalconfig "D:\\node-v20.12.1-win-x64\\node_global\\etc\\npmrc"</code></pre>
说明：需将NODEJS_HOME换成你的node.js所在的根目录。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408161017598-1013791543.png"> 
说明：路径需要使用两个反斜杠。
然后在NODEJS_HOME目录下补充子孙目录：node_global\etc。
再新建一个etc文件，内容如下：
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>prefix="D:\\node-v20.12.1-win-x64\\node_global"
cache="D:\\node-v20.12.1-win-x64\\node_cache"
registry="https://registry.npmmirror.com"</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408161913271-140179233.png"> 
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408161959170-630338524.png">
查看是否生效
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408162217207-659283714.png">
我们可以看到，全局配置的参数已经生效了。
再次执行任何操作，都会从npm镜像站拉取模块啦。
<h3>4.拓展</h3>
在黑窗口下，运行快捷键Alt+Enter，可以最大、最小化当前窗口。
<h4 style="padding-left: 40px">如何进入Node.js工作台？</h4>
打开黑窗口，输入node，按回车键即可。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430153810964-1621528033.png">
<h4 style="padding-left: 40px">常用的全局对象</h4>
我们知道，在浏览器当中，JavaScript常用的全局对象有：window、document、navigator 等。
而在Node.js中，也有自己支持全局对象：process、console、fs（文件系统）等。
console
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430155342579-1523460729.png">
process
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430155602295-1186348579.png">
fs 
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430155711594-2026401534.png">
<h4 style="padding-left: 40px">代码运行示例</h4>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430160229689-12856196.png">
说明：
在Node.js工作台，无法像在浏览器的控制台一样，按Shifit+Enter可以换行输入多行js代码。
需要我们逐行输入和执行JavaScript代码，也就是：输入一行js代码，立刻按Enter键执行，然后继续输入要执行的下一行代码，再次运行。
<h4 style="padding-left: 40px">如何在工作台运行多行js代码？</h4>
将多行代码合并成一行。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430162332186-1910755883.png">
<h4 style="padding-left: 40px">如何运行javascript文件？</h4>
另一种运行js代码的方式为：
运行环境：脱离node.js工作台。
打开黑窗口，将代码放到js文件当中，并运行此js文件。
<pre class="language-javascript highlighter-hljs" data-dark-theme="true"><code>node js文件所在的全路径</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430165815283-852256074.png">
 
<h4 style="padding-left: 40px">退出Node.js工作台</h4>
方式一：运行.exit
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430160421825-551459851.png">
方式二：快捷键Ctrl+D
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430160455847-1932447987.png">
方式三：快捷键Ctrl+C两次
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430160545237-2073126885.png">
<h4 style="padding-left: 40px">全局安装指定模块</h4>
<pre class="language-java highlighter-hljs" data-dark-theme="true"><code>npm install 模块名称 -g</code></pre>
或者
<pre class="language-java highlighter-hljs" data-dark-theme="true"><code>npm install 模块名称 -global</code></pre>
以安装express模块为例
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408151509491-927530968.png"> 
安装完成后，我们来到NODEJS_HOME/node_global/node_modules目录下面
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240408151831758-851658268.png">
会发现express模块已经安装完毕。
<h4 style="padding-left: 40px">卸载模块（删除模块）</h4>
方式一：命令删除
<pre class="language-java highlighter-hljs" data-dark-theme="true"><code>npm uninstall 模块名称 -g</code></pre>
如果卸载全局模块，需要加：-g。
<img src="https://img2024.cnblogs.com/blog/1120344/202404/1120344-20240430163251987-1958309838.png">
方式二：手动删除 
找到了模块所在路径，删除。
2024-10-15 15:53:06
<h4 style="padding-left: 40px">运行前端项目</h4>
前提：
找到package.json所在目录
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241015155634616-31235074.png">
第一步：切换目录
在开发工具中运行（比如：vscode）或者直接在cmd中运行。
在黑窗口里面，切换到package.json所在目录。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241015155855197-1480638298.png">
在vscode中，选中package.json所在的目录，右键，选择“在集成终端中打开”。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017145402875-1531237002.png">
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017145601873-1907196783.png">
第二步：安装项目依赖
<pre class="language-c highlighter-hljs" data-dark-theme="true"><code>npm install</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241015160004576-1515303462.png">
按回车键执行依赖安装，当出现如上图字样就说明项目所需的依赖安装完毕。
第三步：修改后端地址
打开vue.config.js文件。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241015161125039-594138131.png">
第四步：运行项目
以VUE项目为例。
方式一：使用命令启动
同样是需要确保在package.json文件所在目录下。
打开package.json，查看scripts结构体里面设定的服务器名称。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241015160758308-227901157.png">
执行以下命令
<pre class="language-c highlighter-hljs" data-dark-theme="true"><code>npm run serve</code></pre>
当你运行 npm run serve 时，npm 会查找 package.json 文件中的 scripts 部分，并寻找名为 serve 的脚本。一旦找到，npm 就会执行该脚本中定义的命令。 
如上图所示，既可以使用serve启动，也可以使用dev启动。
方式二：使用vscode启动
在vscode中，一共有3种启动方式。
第一种
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241016110849861-16754652.png">
打开package.json，找到scripts部分，点击“调试”按钮。
然后选择一个要启动的服务即可。
等待启动完成。
第二种
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017145111493-603485166.png">
第3种
切换到package.json所在目录，运行如下命令。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017150136248-567385585.png">
等待项目启动完毕即可。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241016111734193-722476214.png">
可能存在的问题
如果前端启动成功后，页面打不开，可以将以下文件进行删除。
第1步：将node_modules目录删除；
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017144556611-631215837.png">
第2步：将package-lock.json删除；
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017144722373-1492041744.png">
第3步：将.vscode/settings.json删除。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017144845749-30044430.png">
然后，使用node.js重新启动该项目。
<h4 style="padding-left: 40px">终止项目运行</h4>
在cmd命令或终端窗口中，按快捷键Ctrl+c进行终止。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241016111514295-267023717.png">
也可以直接关闭命令窗口。
如果是在vscode中，还可以选择终止项目运行或者直接关闭vscode。
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241017145930326-504808468.png">
2024-10-21 16:08:46
<h4 style="padding-left: 40px">打包运行</h4>
除了在开发工具中运行，我们主要还是将其部署到nginx上。
第一步：打包。
<pre class="language-c highlighter-hljs" data-dark-theme="true"><code>npm run build</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241021161029959-1522656719.png">
打包完毕
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241021161132859-1221782156.png">
打包完成后，会将打包的目录打印出来。 
<img src="https://img2024.cnblogs.com/blog/1120344/202410/1120344-20241021161227440-461590181.png">
第二步：配置nginx。
在nginx.conf文件中配置前后端的访问地址。
2024-10-17 10:21:52
<h4 style="padding-left: 40px">全局安装yarn</h4>
<pre class="language-c highlighter-hljs" data-dark-theme="true"><code>npm install -g yarn</code></pre>
npm（Node Package Manager）和Yarn都是流行的JavaScript包管理器，它们用于安装和管理项目的依赖关系。
2025-03-17 18:44:36
执行yarn命令报错：
<img src="https://img2024.cnblogs.com/blog/1120344/202503/1120344-20250317184609976-1900529526.png">
这是由于 PowerShell 的执行策略限制了脚本的运行。以下是解决方法：
搜索PowerShell并打开（以管理员身份打开）
<img src="https://img2024.cnblogs.com/blog/1120344/202503/1120344-20250317184915940-490547095.png">
运行以下命令查看当前系统的执行策略：
<pre class="language-c highlighter-hljs" data-dark-theme="true"><code>Get-ExecutionPolicy</code></pre>
策略说明：
可能的输出包括： Restricted：默认策略，禁止运行任何脚本。 AllSigned：仅允许运行已签名的脚本。 RemoteSigned：允许运行本地创建的脚本，远程脚本需要签名。 Unrestricted：允许运行所有脚本。
永久修改执行策略（需管理员权限）：
<pre class="language-c highlighter-hljs" data-dark-theme="true"><code>Set-ExecutionPolicy RemoteSigned -Scope LocalMachine</code></pre>
<img src="https://img2024.cnblogs.com/blog/1120344/202503/1120344-20250317185157961-533472472.png"> 
2025-03-17 19:01:30
<h4 style="padding-left: 40px">node.js如何降版本？</h4>
见文末推荐。
 
<div id="recommend">
<h3>写在最后</h3>
　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！
<h3> 相关推荐：</h3>
<ul>
<li>个人主页</li>
<li>Node.js 打开指定浏览器并跳转到指定网页</li>
<li>使用nvm管理node.js版本</li>
</ul>
</div>
</div>
<div id="article_foot" style="display: none"></div>

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：Marydon，转载请注明原文链接：https://www.cnblogs.com/Marydon20170307/p/18121614 
来源：https://www.cnblogs.com/Marydon20170307/p/18121614

頁: [1]

琼殿技术论坛's Archiver

Node.js安装教程