您的当前位置:首页>全部文章>文章详情

【前端】Nodejs基于Windows安装教程

CrazyPanda发表于:2024-07-15 11:06:50浏览:227次TAG:

一、安装环境

在进行 Node.js 环境的安装之前,您需要先安装并配置好以下环境:

操作系统:Windows

命令行工具:Node.js 是通过命令行工具进行使用和管理的,因此您需要选择一个适合您的命令行工具。在 Windows 上,您可以选择使用命令提示符(cmd)或 PowerShell。

文本编辑器:Node.js 应用程序通常是使用文本编辑器编写的,因此您需要选择一个适合您的文本编辑器。常用的文本编辑器包括 Visual Studio Code、Sublime Text、Atom 等。

网络连接:在安装 Node.js 和 Node.js 模块时,需要访问网络才能完成下载和安装。因此,您需要确保您的计算机已连接到互联网,并且网络连接稳定。

二、安装步骤

以下是在 Windows 操作系统上安装 Node.js 的步骤:

  1. 打开浏览器,并前往 Node.js 官网 https://nodejs.org/ ↗

  2. 在首页中,您可以看到当前 Node.js 的稳定版本和最新版本。单击“长期支持版本”下载,即可下载当前版本的 Node.js 安装程序。在这里插入图片描述

  3. 下载完成之后,打开下载文件,双击安装包,点击下一步、然后看到更改路径的地方。

  4. 点击change按钮,更换到自己的指定安装位置(我装在了D盘),点击下一步,最后安装成功即可。

三、验证安装

为了验证 Node.js 是否已成功安装,您可以在CMD命令行工具中输入以下命令:

node -v1

此命令将输出 Node.js 的版本号,如果输出的版本号与您下载的版本号相同,则说明 Node.js 已成功安装。

在这里插入图片描述

四、修改全局安装路径、缓存路径,环境变量配置

node_global 目录存储全局安装的 Node.js 模块,而 node_cache 目录存储 Node.js 模块的缓存文件。

node_global 目录中,您可以找到全局安装的 Node.js 模块的文件和元数据,例如包的源代码、可执行文件、依赖项和描述文件等。这些模块通常是在系统中的任何位置都可以访问的,因为它们已经被全局安装了。

与此相反,node_cache 目录包含已经下载过的 Node.js 模块的缓存文件。每当您使用 npm install 命令安装 Node.js 模块时,npm 都会尝试从 node_cache 目录中查找相同模块的缓存文件。如果找到了缓存文件,npm 将使用它们来加快安装过程,而不必再次下载相同的文件。这样可以节省时间和带宽,并减少网络流量。

请注意,node_global 目录和 node_cache 目录是不同的目录,如果您更改了其中任何一个目录的位置,那么全局安装的 Node.js 模块和缓存文件将被保存到新的路径中。

如果没有设置全局目录node_global,那么全局安装的文件将会保存到 C:\用户\user\AppData\Roaming\npm (user是自己设置的计算机名字)

所以,安装好nodejs后,要设置一下node_global和node_cache(node缓存文件夹)

  1. 在nodejs安装目录创建node_global和node_cache文件夹
    在这里插入图片描述

  2. 打开cmd命令,依次输入:

npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"12

npm config set prefix “D:\Nodejs\node_global”:将 Node.js 全局安装包的安装路径设置为 “D:\Nodejs\node_global”。这意味着在使用 npm install -g 命令全局安装 Node.js 模块时,将会将模块安装到指定的目录中。

npm config set cache “D:\Nodejs\node_cache”:将 Node.js 模块缓存路径设置为 “D:\Nodejs\node_cache”。这意味着在使用 npm install 命令安装 Node.js 模块时,将会将模块缓存到指定的目录中。
在这里插入图片描述
3. 修改系统环境变量
在 Windows 操作系统上,可以通过以下步骤打开环境变量编辑器:

  1. 打开“开始”菜单,搜索并选择“控制面板”选项。

  2. 在控制面板中,选择“系统和安全”选项。

  3. 选择“系统”选项,然后在菜单中选择“高级系统设置”选项。

  4. 在弹出窗口中,选择“环境变量”按钮,这将打开环境变量编辑器。

或者,您也可以通过以下步骤在命令提示符(cmd)中打开环境变量编辑器:

  1. 打开命令提示符(cmd)窗口,输入以下命令并按下回车键

   rundll32.exe sysdm.cpl,EditEnvironmentVariables1

这将打开环境变量编辑器。如图所示:
在这里插入图片描述

  1. 用户变量下的Path路径中编辑追加一行D:\Nodejs\node_global
    如果存在C:\Users\【 AppData\Roaming\npm 】的话,将路径修改成 D:\Nodejs\node_global的路径,点击确定

点击确定

在这里插入图片描述

  1. 系统变量下新建变量名为:NODE_PATH 变量值为:D:\Nodejs\node_global\node_modules
    在这里插入图片描述

  2. 修改完之后,在系统变量中,点击Path,在最后一行加入:

%NODE_PATH%1

在这里插入图片描述

确定保存。

五、测试

1.我们使用npm install express -g全局安装 Express 模块
在这里插入图片描述
如果报错,我们首先看下D:\Nodejs文件是不是权限不足导致的,
我们给定文件权限,右键文件属性->安全->把所有用户的完全控制,修改权限全部勾选,然后应用,确定即可。
在这里插入图片描述
然后我们再来安装一下:
在这里插入图片描述
Successful!

六、更改淘宝镜像

npm 初始源是指 npm 包管理器在安装和发布 Node.js 模块时默认使用的官方源。由于 npm 官方源在全球范围内都很受欢迎,因此在某些地区可能会出现访问速度较慢或连接不稳定的问题。为了解决这些问题,许多 Node.js 开发者选择使用淘宝源来代替 npm 官方源。

淘宝源是由淘宝团队在国内搭建的一个 npm 镜像源,目的是为了提高国内 Node.js 开发者使用 npm 时的访问速度和稳定性。与 npm 官方源相比,淘宝源的下载速度更快,而且在国内访问更加稳定。

1.要更改 npm 的默认源为淘宝源,您可以使用以下命令:

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

这将会将 npm 的默认源更改为淘宝源。如果您想要恢复默认的 npm 官方源,可以使用以下命令:

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

请注意,更改 npm 源可能会对您的系统产生不可预知的影响,因此在更改源之前,请确保仔细阅读相关文档并了解可能的后果。
在这里插入图片描述
2.运行 npm config get registry 命令将返回当前 npm 源的 URL:

 npm config get registry1

在这里插入图片描述
3.使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版,可以在国内更快地安装 Node.js 包,您可以使用以下命令:

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

使用这两个命令的目的是为了在国内使用 npm 更快地安装 Node.js 包。首先,将 npm 源设置为淘宝源,以便在使用 npm 安装包时自动使用淘宝源。然后,使用淘宝源全局安装 cnpm,以便在命令行中使用 cnpm 命令来代替 npm 命令,从而更快地安装 Node.js 包。

需要注意的是,使用 cnpm 替代 npm 时,一些 npm 命令可能会有所不同或不支持。此外,使用 cnpm 时也可能会遇到包依赖问题,因为 cnpm 可能会与某些 npm 依赖包不兼容。因此,在使用 cnpm 时,请确保您已经了解其特性和限制,并根据需求进行选择。

如下图:安装成功
在这里插入图片描述
在这里插入图片描述
以上就配置成功了,如果有出错的,可以再检查下,注意环境变量不要错了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
希望以上文章对大家有帮助,一起进步

猜你喜欢

【HTML】必应地图BingMaps的使用
又换新地图了,之前换了箩筐地图,效果不能满足实际需要,这次换成了必应地图BingMaps,同样实现设置考勤区域的功能,效果还是挺不错的。相关阅读【HTML】html使用高德地图设置考勤范围 【HTML】箩筐地图的使用,设置考勤范围一、 获取应用KEY还是老样子,先注册账号,然后获取key。注册参考官方说明https://www.bingmap.cn/guide/db765008-dafe-11e8-a995-d46d6d978bfa?module=doc,这里不再过多说明。
发表于:2024-02-19 浏览:372 TAG:
【HTML】箩筐地图的使用,设置考勤范围
接上篇【PHP】html使用高德地图设置考勤范围,项目换掉了高德地图,替换成了箩筐地图,继续实现考勤打卡范围设置。需求:系统需要考勤功能,并在WEB端设置考勤范围,用于员工手机端在此范围内打卡签到,WEB端需要设置考勤地点以及考勤范围。 上篇高德地图已经实现了此功能,现在要换成箩筐地图实现此功能 基本思路:绘制地图->根据地址获取坐标->根据坐标绘制圆形范围->根据半径自适应显示圆形范围1 箩筐地图箩筐地图开放平台https://testlbs.luokuang.com/ 同样
发表于:2024-02-07 浏览:854 TAG:
【前端】支付宝和微信小程序普通二维码跳转二合一
业务需要:系统支持微信小程序和支付宝小程序,现在要扫码跳转到对应小程序,要使用一个二维码,并能携带业务参数,用户使用微信扫码,就能打开微信小程序并获取参数,使用支付宝扫码,就能打开支付宝小程序,并获取参数一、 微信小程序普通二维码跳转实现1、在微信公众平台-开发管理-开发设置中找到【扫描普通链接二维码打开小程序】去配置二维码链接地址2、配置要求二维码规则:配置为二维码对应的链接,其中最后要加/,这样才可以动态传参。扫描后面参数不同的二维码都能跳转。这样类似与测试链接中 https:
发表于:2024-03-07 浏览:269 TAG:
【前端】JavaScript判断数组对象是否含有某个值的方法(6种)
【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法(6种)知识回调场景复现实现方式(6种)利用循环遍历数组元素利用some,filter方法利用array.indexOf方法利用array.includes方法利用array.find方法利用set中has方法本期小结知识回调文章内容文章链接vue3 antd table表格的增删改查(一)input输入框根据关键字搜索【后台管理系统纯前端filter过滤】https://blog.csdn.net/XSL_HR/arti
发表于:2024-02-23 浏览:340 TAG:
【前端】常用CMS网站框架介绍
内容管理系统(Content Management System)简称为CMS,CMS系统是网站建设走向成功的重要组成部分。目前网络上的内容管理系统比较繁杂,想要找一个优秀而又非常适合的管理系统也是一件很不容易的事情。国内和国外的CMS程序都比较多,如国外的WordPress在站长圈名气很大。这里,尹华峰SEO技术博客主要介绍十款国内常见的优秀内容管理系统,很多还是开源程序,方便各位站长二次开发满足不同的需求。一、织梦CMS织梦CMS就是dedecms,很多站长称呼它为得得cms,是目前国内安装
发表于:2024-04-24 浏览:331 TAG:
【前端】PHP、Vue和React:如何选择最适合的前端框架?
PHP、Vue和React:如何选择最适合的前端框架?随着互联网技术的不断发展,前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架,每一种都具有其独特的特点和优势。在选择使用哪种前端框架时,开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使用场景,帮助读者更好地选择最适合自己的前端框架。PHPPHP作为一种服务器端脚本语言,被广泛应用于Web开发中。尽管PHP主要用于后端开发,
发表于:2024-03-16 浏览:370 TAG:
【前端】2023年最流行的10款前端UI框架排名
        上次我们发布了《2022年最流行的11款PHP框架》,争议很大!今天我们来继续探讨一下:2023年最流行的10款前端UI框架排名。一:前端UI框架是什么?前端UI框架是一种基于HTML、CSS、JavaScript等前端技术的开发工具集,提供了一系列的UI组件、样式、布局等基础功能,使得前端开发人员可以更加高效地开发出具有良好用户体验的Web应用。二:为什么要使用前端UI框架?前端UI框架可以大大减少前端开发人员的工作量,提高开发效
发表于:2023-12-06 浏览:393 TAG:
【前端】全栈软件开发工程师需要具备哪些技能
全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能,以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈:一、前端技能:1.HTML/CSS/JavaScript:构建网页的基本技能,负责页面结构、样式和交互。2.前端框架:掌握至少一种前端框架,如 React.js、Vue.js、Angular,用于构建可维护的、高性能的前端应用。3.前端工具:使用构建工具(Webpack、Parcel)、包管理工具(npm、Yarn)、代码规范工具(ESLint、Prett
发表于:2023-12-07 浏览:332 TAG:
【前端】Ant Design of Vue安装
关于 ant-design-vue #众所周知,Ant Design 作为一门设计语言面世,经历过多年的迭代和积累,它对 UI 的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是 React 开发者手中的神兵利器。希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,组件的 html 结构和 cs
发表于:2024-04-15 浏览:301 TAG:
【前端】如何使用Redis和TypeScript开发高性能计算功能
如何使用Redis和TypeScript开发高性能计算功能概述:Redis是一个开源的内存数据结构存储系统,具有高性能和可扩展性的特点。TypeScript是JavaScript的超集,提供了类型系统和更好的开发工具支持。结合Redis和TypeScript,我们可以开发出高效的计算功能来处理大数据集,并充分利用Redis的内存存储和计算能力。本文将介绍如何利用Redis和TypeScript开发高性能计算功能,包括数据存储、数据处理和结果缓存等方面。我们将使用Redis的常用数据结构和命令,并
发表于:2024-04-06 浏览:350 TAG: