Windows平台Node.JS、VsCode的安装以及JS代码插件的配置

本文将分以下几个方面介绍Windows平台下Node.JS的安装、VsCode的安装以及安装插件并执行JS代码的详细过程，主要包括：安装node.js、配置 NPM 源地址、VsCode 安装、安装 Code Runner 插件、在 VsCode 中编写 JS 代码、Npm 包的安装路径、修改 npm 包安装路径、配置路径后必须配置环境变量等。

安装node.js

下载地址： https://nodejs.org

选择下载 LTS 版本，即可，浏览器会下载安装文件。

安装总结：安装时，同意用户协议后，一直点下一步即可。

详细安装步骤如下：

1.开始安装点击下一步 Next

2. 勾选 I accept the terms in the License Agreement 接受许可协议条款然后点击下一步（Next）

3. 配置安装目录，默认即可

4. 选择要安装的特性，默认即可，点击下一步（Next）

5. 是否需要 C/C++，初学者一般不用到，点击下一步（Next）

6. 配置完成，点击 Install 开始安装

7. 进度条过后，安装完成点击 Finish 即可。

验证安装，检查安装版本

打开终端，查看node和npm版本，验证是否安装成功:

node -v
npm -v

注意：

Npm 和 Node 已经继承，安装 Node 后，会自动安装 Npm。

如果安装之前打开了 Cmd ，需要在安装后重新打开 Cmd

配置 NPM 源地址

默认情况下，npm安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置 Npm 的源地址，可以使用下面的命令更改 Npm 的源地址为淘宝源。

PS C:\> npm config set registry http://registry.npm.taobao.org/

更改好了之后，查看源地址是否正确的被更改

PS C:\> npm config get registry
http://registry.npm.taobao.org/

至此，基本配置完成。

VsCode 安装

下载地址：https://code.visualstudio.com/Download#

选择自己需要的版本下载。

下载完成后开始安装。

总结，统一协议后，可以都使用默认配置，一直点击下一步即可安装。

1. 同意协议点击下一步

2. 选择安装位置（默认即可），下一步

3. 选择开始菜单文件夹（默认即可），下一步

4. 默认即可，下一步

5. 点击安装，VsCode 开始安装

6. 安装中。

7. 安装完成

安装 Code Runner 插件

安装 Code Runner 扩展，VsCode 会自动启用

在 VsCode 中编写 JS 代码

使VsCode 打开一个空文件夹，创建 js 后缀名的文件

在 JS 文件中右击Run Code 运行，即可运行JS 文件，输出内容会打印在下底部的输出框内。

Npm 包的安装路径

本地安装：会安装到命令执行时当前文件夹位置。

npm install vue

全局安装：将包安装到全局

npm install -g <package>

【例子】全局安装Vue

npm install -g 自定义

下面为 npm 包安装路径修改，修改路径后，Npm 下载的包会保存到指定路径中。（也可以不做，根据自己需求）

修改 npm 包安装路径

注意，配置路径后，必须配置环境变量全局包目录（node_global）和缓冲文件目录（node_cache）

# 自定义 npm 全局路径
PS D:\> npm config set prefix "D:\node\node\node_global"

# 自定义缓冲文件夹
PS D:\> npm config set cache "D:\node\node\node_cache"

安装一个包，测试路径设置是否成功，例如安装 Vue

PS D:\> npm install -g vue

检查 node_global 文件夹中是否有 Vue 包，检查 node_cache 是否有缓存文件

配置路径后，必须配置环境变量

修改路径后，必须修改环境变量，不然导致如下错误，提示找不到安装完毕的 vue 包

PS C:\Users\mirror\Desktop> node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> require('vue')
Uncaught Error: Cannot find module 'vue'
Require stack:
- <repl>
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
    at Function.Module._load (node:internal/modules/cjs/loader:804:27)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '<repl>' ]
}
>

打开 windows 环境变量设置

1. Windos 右下角搜素框输入此电脑，右击此电脑选择打开属性面板，

打开高级系统设置

选择高级，然后打开环境变量设置。

最后打开环境变量设置面板，然后就可以开始配置环境变量了。

用户变量配置

先选择用户环境变量中的 Path ，再点击编辑

找到下面路径（注意mirror时用户名，每台电脑的用户名都可能会不一样。）

把图中红框中的路径（默认值），点击 Edit （编辑），修改为前面使用命令配置的全局路径 “D:\node\node\node_global”

最后点击OK

系统变量配置

1. 点击 ”新建“ 新建系统变量

2. 在系统变量中，添加如下环境变量，全局路径中的 node_modules 文件夹（重要），点击保存

3. 系统变量中，选择 Path 然后点击编辑

4. 把刚刚配置的变量，添加到系统 Path 中，最后确定保存

检查环境变量配置是否成功

【范例】如下显示表示，配置成功

PS C:\Users\mirror\Desktop> node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> require('vue')
{
  EffectScope: [class EffectScope],
  ReactiveEffect: [class ReactiveEffect],
  customRef: [Function: customRef],
  effect: [Function: effect],
  effectScope: [Function: effectScope],
  getCurrentScope: [Function: getCurrentScope],
  isProxy: [Function: isProxy],
  isReactive: [Function: isReactive],
  isReadonly: [Function: isReadonly],
 ...