1. 安装vscode

从官网下载所需版本,逐步安装,不再过多介绍。

官网:https://code.visualstudio.com/Download

2. 安装并配置Node.js

第一步:下载

根据需求下载所需版本或者稳定版本,没必要下载最新版,最新版可能会存在不稳定的问题。由于项目需要,我安装的是14.18.1版本(下图仅为示例)。

Node.js下载官方地址:https://nodejs.org/en/download/

vscode配置pyspark vscode配置nodejs运行环境_vscode

第二步:安装测试

安装:
1)下载后双击安装,一直点击下一步;
 2)点击change按钮,更换到自己的指定安装位置XX,点击下一步(不修改默认位置也是可以的 );
 3)继续点击下一步,最后安装结束即可。

安装完成后系统目录如图所示(其中,npm随安装程序自动安装,作用就是对Node.js依赖的包进行管理)

vscode配置pyspark vscode配置nodejs运行环境_前端_02

测试:

win+R打开调出运行,输入cmd,分别输入node -v和npm -v,测试node是否安装成功,也可以查看node版本及其相应的npm版本。

vscode配置pyspark vscode配置nodejs运行环境_vscode_03

第三步:配置环境

因为在执行例如npm install -g vue-cli等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间,

所以这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_global和node_cache,如图所示:

vscode配置pyspark vscode配置nodejs运行环境_vscode_04

在CMD中执行下面两行:

npm config set prefix "D:\XX\node_global"

npm config set cache "D:\XX\node_cache"

执行完成后,配置环境变量:在电脑搜索“查看系统高级设置”,

  • “环境变量” -> “系统变量”:新建一个变量名为 “NODE_PATH”, 值为“D:\XX\node_global\node_modules”,如下图:

vscode配置pyspark vscode配置nodejs运行环境_vscode配置pyspark_05

  • “环境变量” -> “用户变量”:编辑用户变量里的Path,将相应npm的路径(“C:\Users\用户名\AppData\Roaming\npm”)改为:“D:\xx\node_global”,如下:

vscode配置pyspark vscode配置nodejs运行环境_vscode配置pyspark_06

测试:配置完成后,在以管理员身份运行cmd,执行下行代码,安装淘宝镜像:

npm install -g cnpm -registry=https://registry.npm.taobao.org

输入cnpm -v,测试镜像是否安装成功。

最后执行npm install -g vue-cli全局安装vue/cli脚手架,由于我后期还需要安装cesium,高版本的脚手架在项目打包过程中容易出现问题,所以我这里npm install -g @vue/cli@4.5.17,安装完成后执行vue -V查看脚手架版本,如图即代表成功。

vscode配置pyspark vscode配置nodejs运行环境_前端_07