从0搭建前端nodejs环境

143 阅读3分钟

安装nodejs

进入官网下载 www.nodejs.com.cn/

微信截图_20231023114918.png

1、LTS 长期支持版 // 推荐下载,相对更加稳定

2、Current 尝鲜版

如若根据不同的操作系统 windowMacLinux。以及区分 window区分32位64位、Mac和Linux区分 64位ARM芯片的下载文件,可点击上方的 DOWNLOADS找到对应文件下载。 msi 和 pkg可以直接安装,操作方便

微信截图_20231023141314.png

window msi安装

1、下载完成后,双击安装包开始安装。直接点击Next按钮。

1.png

2、这里直接勾选 接受许可 就可以,点击 Next 按钮

2.png

3、根据个人情况,修改安装路径(我这里安装到D盘了),修改完成后继续点击 Next 按钮

3.png

4、根据需求,进行安装。我这里选择默认安装,直接点击 Next 按钮

4.png

5、不选中,直接点击 Next 按钮。

5.png

翻译过来就是:自动安装必要的工具。请注意,这也将安装Chocolatey。安装完成后,脚本会弹出一个新窗口。

6、点击 Install 按钮进行安装

6.png

7、等待进度条完毕,即显示下方图片为安装完毕,并点击 Finish 按钮

7.png

8、测试是否安装成功,按 win + R 键,并输入cmd进入终端。显示版本号,则安装成功

依次输入
node -v // 显示 node.js版本
npm -v  // 显示 npm 版本

8.png

环境配置

1、找到安装的目录,在安装的目录下面新建两个文件夹 node_globalnode_cache e

三.png

2、创建完成后,用管理员身份证打开cmd命令窗口,并输入以下命令

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

11.png

3、配置环境变量

【win】- 点击【设置】 - 点击【系统 - 系统信息】 - 点击【高级系统设置 - 环境变量】

12.png

在 【环境变量 - 系统变量】 中点击 【新建】 并输入对应的变量名和变量值

变量名:NODE_PATH

ps : D:\nodejs\ 需换成你所安装的路径,该路径为我安装路径,仅供参考

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

13.png

此时你再去对应文件路径的 【node_global】 里就会多一个名为 【node_modules】的文件夹

如果输入变量值后,对应位置并没有出现名为 【node_modules】的文件夹,则可手动创建一个 【node_modules】 的文件夹,再复制创建的【node_modules】 文件夹路径地址到变量值中

14.png

打开 【环境变量】 - 点击 【用户变量】 中的 【Path】 - 进行编辑

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

16.png

在 【系统变量】 中 - 选择 【Path】 - 点击【编辑】 添加【%NODE_PATH%】- 点击【确定】

17.png

18.png

配置完成后,电脑重启才可以生效

配置完成后,电脑重启才可以生效

配置完成后,电脑重启才可以生效

国内镜像网站配置

配置国内镜像,可以通过国内网络下载第三方库,速度会相对快一点

以下命令均在 cmd 命令行中输入

npm

1、查看源

npm get registry

2、临时修改

npm --registry https://registry.npmmirror.com install axios

3、长久使用

npm config set registry https://registry.npm.taobao.org

4、还原配置

npm config set registry https://registry.npmjs.org

yarn

1、查看源

yarn config get registry

2、临时修改

yarn add axios --registry=https://registry.npmjs.org/

3、长久使用

yarn config set registry https://registry.npmmirror.com/

4、还原配置

yarn config set registry https://registry.yarnpkg.com