Node.js安装详细过程(步骤附图!)

1. 下载Node.js安装包

官网下载地址:http://nodejs.cn/download/,根据自己电脑选择32位还是64位选择即可。

Node.js安装包下载地址
在这里插入图片描述

2. 安装程序

2.1、下载完成后,双击安装包,开始安装Node.js,点击Next

在这里插入图片描述

2.2、勾选协议

在这里插入图片描述

2.3、根据个人需求修改安装路径

我这里路径改为了D:\Program Files\nodejs\,修改完毕后继续点击Next

在这里插入图片描述

2.4、可根据自身需求进行,此处我选择默认安装,继续点击Next

在这里插入图片描述

2.5、不选中,直接点击Next

在这里插入图片描述

2.6、点击Install进行安装

在这里插入图片描述

2.7、安装完毕,点击Finish

在这里插入图片描述

2.8、测试安装是否成功

按下【win+R】键,输入cmd,打开cmd窗口 ,输入:

node -v     // 显示node.js版本
npm -v      // 显示npm版本

在这里插入图片描述

显示版本号说明安装成功啦!!!

3.环境配置

3.1、新建【node_global】和【node_cache】

找到安装的目录 D:\Program Files\nodejs,在安装目录下新建两个文件夹【node_global】和【node_cache】

在这里插入图片描述

3.2、创建完毕后,使用管理员身份打开cmd命令窗口,输入以下命令:

我电脑是可以通过【Win + X】打开一个列表面板,里面有一个【Windows PowerShell (管理员)(A)】这样的选项,点击打开就是以管理员身份打开的。
图例: 在这里插入图片描述
区别:
管理员:C:\Windows\system32
非管理员:C:\Users\admin

npm config set prefix “你的路径\node_global” (复制刚刚创建的“node_global”文件夹路径)

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache “你的路径\node_cache” (复制刚刚创建的“node_cache”文件夹路径)

npm config set cache "D:\Program Files\nodejs\node_cache"

在这里插入图片描述

3.3、配置环境变量

① 按下【win+R】键,输入sysdm.cpl

在这里插入图片描述

② 选择高级项,点击环境变量

在这里插入图片描述

③ 在【系统变量】中点击【新建】

在这里插入图片描述

变量名:NODE_PATH

变量值:D:\Program Files\nodejs\node_global\node_modules

在这里插入图片描述

默认情况下【node_global】文件夹里会多出了一个【node_modules】文件夹,如果没有就在【node_global】文件夹下手动创建一个【node_modules】文件夹,再复制新创建的【node_modules】文件夹的路径地址到变量值中

我这里就是自己新建的文件夹。
在这里插入图片描述

④ 编辑【用户变量】中的【Path】

  1. 选中Path选项后点击编辑按钮

在这里插入图片描述

  1. 将默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径,点击确定

修改前:

在这里插入图片描述

修改后:

在这里插入图片描述

⑤ 在【系统变量】中选择【Path】点击【编辑】新增【%NODE_PATH%】,随后一直点击【确定】

  1. 选中Path后点击编辑按钮

在这里插入图片描述

  1. 点击新增按钮,添加%NODE_PATH%

在这里插入图片描述
新增完成后点击确定。

4.测试

配置完成后进行测试,测试之前首先检查下,刚才的配置是否正确。

  1. 以管理员身份打开 cmd 窗口后输入以下命令:
npm config get prefix
npm config get cache
  1. 正确显示文件所在位置

在这里插入图片描述

  1. 全局安装 express 模块进行测试
npm install express -g   // -g代表全局安装 
  1. 出现以下界面即为配置成功

在这里插入图片描述

  1. 该模块会出现在D:\Program Files\nodejs\node_global\node_modules文件夹下。

在这里插入图片描述

5.安装淘宝镜像

① 更换国内镜像源

  • 淘宝镜像命令:
npm config set registry http://registry.npm.taobao.org
  • 检查是否成功
npm config get registry

在这里插入图片描述

  • 恢复npm默认镜像,输入以下命令:
npm config set registry https://registry.npmjs.org

② 安装cnpm(按需安装)

说明: npm是node官方的包管理器。cnpm是个中国版的npm,是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。

  • 安装cnpm命令
npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

  • 查看是否安装成功输入命令:
cnpm -v

在这里插入图片描述

  • 通过安装express测试是否成功:

在这里插入图片描述
安装成功!

③ 安装yarn(按需安装)

  • 安装yarn命令
npm install -g yarn

在这里插入图片描述

  • 查看是否安装成功输入命令:
yarn -v

出现以下提示:说明没有配置环境变量
在这里插入图片描述

  • 配置环境变量

因为我们是通过npm安装的yarn,所以我们需要找到npm的本地目录,可以通过命令npm config list查看npm的配置列表,prefix="xxx"就是对应的目录!!!
在这里插入图片描述
打开node_modules目录下就可以看见yarn文件夹了,配置路径到bin文件夹下即可。

在这里插入图片描述
一步一步点击确定后再次输入yarn -v查看版本号,出现版本号代表安装成功
在这里插入图片描述

  • Yarn 配置淘宝镜像命令
yarn config set registry https://registry.npm.taobao.org

在这里插入图片描述

  • 查看是否淘宝镜像是否安装成功
yarn config get registry

在这里插入图片描述

  • 21
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值