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

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

CrazyPanda发表于:2024-07-15 11:06:50浏览:236次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】箩筐地图的使用,设置考勤范围
接上篇【PHP】html使用高德地图设置考勤范围,项目换掉了高德地图,替换成了箩筐地图,继续实现考勤打卡范围设置。需求:系统需要考勤功能,并在WEB端设置考勤范围,用于员工手机端在此范围内打卡签到,WEB端需要设置考勤地点以及考勤范围。 上篇高德地图已经实现了此功能,现在要换成箩筐地图实现此功能 基本思路:绘制地图->根据地址获取坐标->根据坐标绘制圆形范围->根据半径自适应显示圆形范围1 箩筐地图箩筐地图开放平台https://testlbs.luokuang.com/ 同样
发表于:2024-02-07 浏览:868 TAG:
【前端】html Antv L7 + mapbox 实现3D地图 3D中国地图 不限于中国地图
echarts的3D地图实在太丑了,还一堆bug使用阿里的Antv可视化库L7,实现3D地图,底图是mapbox 参考示例:https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap如果不需要底图样式,可把Scene的style设置为blank 直接上代码了,vue的就不说了,项目是html的mapbox依赖<script src='https://api.mapbox.com/mapbox-gl-js/v2.
发表于:2024-01-18 浏览:448 TAG:
【HTML】必应地图BingMaps的使用
又换新地图了,之前换了箩筐地图,效果不能满足实际需要,这次换成了必应地图BingMaps,同样实现设置考勤区域的功能,效果还是挺不错的。相关阅读【HTML】html使用高德地图设置考勤范围 【HTML】箩筐地图的使用,设置考勤范围一、 获取应用KEY还是老样子,先注册账号,然后获取key。注册参考官方说明https://www.bingmap.cn/guide/db765008-dafe-11e8-a995-d46d6d978bfa?module=doc,这里不再过多说明。
发表于:2024-02-19 浏览:382 TAG:
【前端】快速了解 ES6 新增字符串方法,开箱即用(含案例)
文章目录📋前言🎯includes() 方法🎯startsWith() 方法🎯endsWith() 方法🎯repeat() 方法🎯padStart() 方法🎯padEnd() 方法🎯trim() 方法🎯trimStart() 或 trimLeft() 方法🎯trimEnd() 或 trimRight() 方法🎯replaceAll() 方法🎯slice() 方法🎯substring() 方法🎯split() 方法🎯charAt() 方法🎯charCodeAt() 方
发表于:2023-12-10 浏览:326 TAG:
【前端】使用canvas做一个可绘制矩形的画布(带有移动,缩放,删除)
使用canvas做一个可绘制矩形的画布(带有移动,缩放,删除)
发表于:2024-04-07 浏览:359 TAG:
【前端】PHP开发者的Vue与React入门指南
PHP是一种常用的服务器端脚本语言,用于开发动态网页和网站。许多PHP开发者经常需要学习前端框架来提升他们的技能,并且Vue.js和React.js是两个当前非常热门的前端框架。本文将为PHP开发者提供一份Vue.js和React.js的入门指南,带有具体的代码示例,帮助他们快速了解这两个框架的基本概念和用法。1. Vue.js入门指南Vue.js是一款轻量级的JavaScript框架,用于构建交互式的用户界面。下面是一个简单的Vue.js示例,展示了如何创建一个基本的Vue组件并进行数据绑定:
发表于:2024-03-16 浏览:343 TAG:
【前端】全栈软件开发工程师需要具备哪些技能
全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能,以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈:一、前端技能:1.HTML/CSS/JavaScript:构建网页的基本技能,负责页面结构、样式和交互。2.前端框架:掌握至少一种前端框架,如 React.js、Vue.js、Angular,用于构建可维护的、高性能的前端应用。3.前端工具:使用构建工具(Webpack、Parcel)、包管理工具(npm、Yarn)、代码规范工具(ESLint、Prett
发表于:2023-12-07 浏览:344 TAG:
【前端】微信小程序推送订阅消息
业务需要,商城类小程序,要在用户下单支付成功后,推送消息通知用户。首先想到的是小程序模板消息,微信公众号模板消息已经用过很多了,小程序模板消息确是第一次做。小程序模板消息     参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html 小程序模板消息在2020年已经改版了,现在推送模板消息都会推送到服务通知里面,
发表于:2024-03-21 浏览:353 TAG:
【前端】微信小程序跳转公众号的三种方式
 最近因为项目需要,要在小程序页面添加按钮,点击跳转公众号对应页面,目前没有直接点击按钮从小程序跳转到公众号页面的方法,但也有变相的实现方法,最后采用小程序webview内嵌公众号页面的方法来实现相关功能,在此记录一下:相关参考:小程序跳转公众号的三种方法 | 微信开放社区 (qq.com)开放能力 / official-account (qq.com)方法: 1:  公众号组件<official-account></official-account>
发表于:2024-03-20 浏览:313 TAG:
【前端】vite和webpack的区别是什么
区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在hrm方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。本教程操作环境:windows7系统、vue3版,DELL G3电脑。写在开头最近的vite比较火,而且发布了2.0版本,v
发表于:2024-04-18 浏览:362 TAG: