Angular进阶-NVM管理Node.js实现不同版本Angular环境切换

一、NVM介绍

1. NVM简介

Node Version Manager(NVM)是一个用于管理多个Node.js版本的工具。它允许用户在同一台机器上安装和使用多个Node.js版本,非常适合需要同时进行多个项目的开发者。NVM是开源的,支持MacOS、Windows和Linux操作系统。

2. NVM原理

NVM通过修改PATH环境变量,控制不同命令行会话中使用的Node.js版本。它不需要管理员权限,可以在用户的主目录中安装Node.js版本,并将它们隔离开来。通过执行简单的命令,用户可以选择正在使用的Node.js版本,这使得在不同版本之间切换变得非常简单。

3. NVM的优势

  • 版本管理灵活:允许在同一系统中安装多个Node.js版本,并能轻松切换。
  • 环境隔离:每个Node.js版本都在用户空间内独立安装,不会互相影响。
  • 无需管理员权限:用户可以在其主目录下安装和维护Node.js版本,无需管理员权限。
  • 支持自动切换:通过.nvmrc文件自动切换项目所需的Node.js版本。

二、常用Node.js版本对照

1. Node.js和Vue版本对照表

Vue.js 版本推荐 Node.js 版本兼容 TypeScript 版本
Vue 3.xNode.js 12 或更高TypeScript 3.9 或更高
Vue 2.6Node.js 10 或更高TypeScript 3.5 或更高
Vue 2.5Node.js 10TypeScript 2.6 或更高
Vue 2.4 及以下Node.js 8TypeScript 不推荐

注意:

  • Vue 3.x 被完全重写以支持 TypeScript,建议使用 TypeScript 3.9 或更高版本。
  • Vue 2.5 引入了对 TypeScript 的改进支持,推荐至少使用 TypeScript 2.6。
  • 较早的 Vue.js 版本(2.4 及以下)并没有针对 TypeScript 提供优化支持,在这些版本中使用 TypeScript 需要额外的配置,不推荐。

2. Node.js和Angular版本对照表

Angular作为一个更为严格的框架,其版本通常要求较新的Node.js版本。以下是Angular版本与Node.js版本的推荐对照表:

Angular 版本推荐 Node.js 版本兼容 TypeScript 版本
Angular 17.1.0^18.13.0 或 ^20.9.0>=5.2.0 < 5.4.0
Angular 17.0.x^18.13.0 或 ^20.9.0>=5.2.0 < 5.3.0
Angular 16.1.x^16.14.0 或 ^18.10.0>=4.9.3 < 5.2.0
Angular 16.2.x^16.14.0 或 ^18.10.0>=4.9.3 < 5.2.0
Angular 16.0.x^16.14.0 或 ^18.10.0>=4.9.3 < 5.1.0
Angular 15.1.x^14.20.0 或 ^16.13.0 或 ^18.10.0>=4.8.2 < 5.0.0
Angular 15.2.x^14.20.0 或 ^16.13.0 或 ^18.10.0>=4.8.2 < 5.0.0
Angular 15.0.x^14.20.0 或 ^16.13.0 或 ^18.10.0~4.8.2
Angular 14^14.15.0 或 ^16.10.0>=4.6.4 < 4.9.0
Angular 13^12.20.2 或 ^14.15.0 或 ^16.10.0>=4.4.4 < 4.7.0
Angular 12^12.14.1 或 ^14.15.0>=4.2.4 < 4.4.0
Angular 11^10.13.0 或 ^12.11.1>=4.0.8 < 4.2.0
Angular 10^10.13.0 或 ^12.11.1>=3.9.4 < 4.1.0
Angular 9^10.13.0 或 ^12.11.1>=3.6.5 < 3.9.0
Angular 8^10.9.0~3.4.5 或 ~3.5.3
Angular 7^8.9.4 或 ^10.9.0~3.1.6 或 ~3.2.4
Angular 6^8.9.4~2.7.2 或 ~2.9.2
Angular 5^6.9.5 或 ^8.9.4~2.5.3
Angular 4^6.9.5~2.4.2
Angular 2^6.9.5~2.0.10 或 ~2.2.2 或 ~2.3.4

3. Node.js和React版本对照表

React 版本推荐 Node.js 版本兼容 TypeScript 版本
React 18Node.js 14 或更高TypeScript 4.5 或更高
React 17Node.js 12 或更高TypeScript 4.1 或更高
React 16Node.js 10 或更高TypeScript 3.7 或更高
React 15Node.js 8TypeScript 2.8 或更高
React 0.14 及以下Node.js 6TypeScript 1.8 或更高

三、安装NVM步骤

1. 下载安装NVM

GitHub (https://github.com/coreybutler/nvm-windows/releases) 下载NVM。
在这里插入图片描述
下载完成后双击.exe安装程序安装。
在这里插入图片描述
选择NVM的安装路径和Node.js的安装路径,Node.js的安装路径是一个临时文件夹,在NVM的路径下有已安装的所有版本的Node.js,当我们选中应用哪个版本的Node.js时,Node.js的安装路径下变成哪一个版本的Node.js的复制。
在这里插入图片描述
继续安装。
在这里插入图片描述
安装完成。
在这里插入图片描述
通过运行nvm version来验证NVM是否正确安装。


2. 配置Node.js路径到环境变量

把我们刚刚安装NVM时选择的Node.js安装的路径写到path里。
在这里插入图片描述
在这里插入图片描述
这样我们才能在控制台直接使用npm命令。


3. NVM安装Node.js

我们先安装较新版本的Node.js 20.9.0。

   nvm install 20.9.0

在这里插入图片描述
切换当前版本为我们刚刚安装的Node.js 20.9.0。

	nvm use 20.9.0

再次检查一下是否为该版本。

	node -v

接着我们安装Angular 17。

	npm i -g @angular/cLi@17

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


4. NVM安装多版本Node.js

我们再安装18.10.0版本的Node.js。

   nvm install 18.10.0

在这里插入图片描述
这时候通过nvm list可以看到我们所有已经安装的Node.js的版本,通过 nvm use 18.10.0 可以灵活切换当前使用的版本。

	nvm list
	nvm use 18.10.0

在这里插入图片描述


5. NVM切换Node.js实现Angular多版本安装

下面我们切换Node.js版本为18.10.0,安装Angular 15。
在这里插入图片描述
安装成功。
可见,使用NVM进行Node.js的多版本控制与隔离,可以帮助我们在同一个操作系统里安装多个版本的Angular/Vue等前端库,以实现不同项目依赖的需求。


6. .nvmrc文件实现项目的自动版本控制

可以在项目根目录下创建一个名为 .nvmrc 的文件,文件内容是项目所需的 Node.js 版本号。
例如,如果你的项目需要 Node.js 版本 14.17.0,那么 .nvmrc 文件的内容应该是:

	14.17.0

当你进入项目目录时,可以运行以下命令来自动切换到 .nvmrc 文件指定的 Node.js 版本:

	nvm use

如果你的系统中尚未安装该版本的 Node.js,NVM 将提示你安装它。


四、NVM管理多版本Node.js教程总结

通过NVM(Node Version Manager),开发者可以非常灵活地管理不同的Node.js版本,以满足不同项目的需求。使用NVM,你可以避免版本冲突和环境污染问题,更高效地进行Node.js应用的开发和测试。通过理解和利用NVM的优点,你可以在现代Web开发中保持高效和竞争力。

NVM的核心功能允许你在同一台机器上安装和切换多个Node.js版本。这意味着你可以轻松测试你的应用在不同Node.js版本下的表现,确保应用的兼容性和稳定性。例如,如果一个老项目需要Node.js的早期版本而新项目需要最新版本,NVM使得在这两个版本之间切换变得无缝和简单。

此外,NVM还支持自动版本控制。通过在项目的根目录下放置一个 .nvmrc 文件,该文件指定了项目所需的Node.js版本,NVM可以自动切换到该版本。这使得团队成员在初次运行项目时能够自动使用正确的Node.js版本,降低了配置错误的风险。

NVM的安装和使用也非常直接。通过简单的命令行指令,你可以安装多个版本的Node.js,并通过命令快速切换当前使用的版本。NVM还提供了一些有用的命令来列出已安装的版本、安装新版本或删除旧版本,使得Node.js版本的管理更加直观和方便。

总之,NVM是每个Node.js开发者工具箱中的必备工具。它不仅提高了开发的灵活性和效率,还通过确保每个项目都使用合适的Node.js版本来增强了代码的可维护性和团队的协作效率。通过投入时间学习和掌握NVM,你可以确保自己在快速发展的技术环境中保持竞争力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【解决】docker一键部署报错

项目场景见&#xff1a;【记录】Springboot项目集成docker实现一键部署-CSDN博客 问题&#xff1a; 1.docker images 有tag为none的镜像存在。 2.有同事反馈&#xff0c;第一次启动docker-compose up -d 项目无法正常启动。后续正常。 原因&#xff1a; 1.服务中指定了镜像m…

Jackson-jr 对比 Jackson

关于Jackson-jr 对比 Jackson 的内容&#xff0c;有人在做了一张下面的图。 简单点来说就 Jackson-jr 是Jackson 的轻量级应用&#xff0c;因为我们在很多时候都用不到 Jackson 的很多复杂功能。 对很多应用来说&#xff0c;我们可能只需要使用简单的 JSON 读写即可。 如我们…

【Linux网络】网络文件共享

目录 一、存储类型 二、FTP文件传输协议 2.1 FTP工作原理 2.2 FTP用户类型 2.3 FTP软件使用 2.3.1 服务端软件vsftpd 2.3.2 客户端软件ftp 2.4 FTP的应用 2.4.1 修改端口号 2.4.2 匿名用户的权限 2.4.3 传输速率 三、NFS 3.1 工作原理 3.2 NFS软件介绍 3.3 NFS配…

企业级数据治理学习总结

1. 水在前面 “数据治理”绝对是吹过的牛里面最高大上的题目了&#xff0c;本来想直接以《企业级数据治理》为题来水的&#xff0c;码字前又跑去图书馆借了几本书&#xff0c;翻了几页才发现自己连半桶水都提不起&#xff0c;撑死只能在小屁孩跟前吹吹牛。 好吧&#xff0c;实在…

怎么把jpg图片变成gif?参考这个方法一键制作

Jpg图片如何变成gif图片&#xff1f;Jpg、gif都是最常用的图片格式&#xff0c;想要将这两种格式的图片互相转化的时候要怎么操作呢&#xff1f;想要将jpg图片变成gif方法很简单&#xff0c;只需要使用gif图片制作&#xff08;https://www.gif5.net/&#xff09;工具-GIF5工具网…

华为手机ip地址怎么切换

随着移动互联网的普及&#xff0c;IP地址成为了我们手机上网的重要标识。然而&#xff0c;在某些情况下&#xff0c;我们可能需要切换手机的IP地址&#xff0c;以更好地保护个人隐私、访问特定地区的内容或服务&#xff0c;或者出于其他网络需求。华为手机作为市场上的热门品牌…

用队列实现栈——leetcode刷题

题目的要求是用两个队列实现栈&#xff0c;首先我们要考虑队列的特点&#xff1a;先入先出&#xff0c;栈的特点&#xff1a;后入先出&#xff0c;所以我们的目标就是如何让先入栈的成员后出栈&#xff0c;后入栈的成员先出栈。 因为有两个队列&#xff0c;于是我们可以这样想&…

vue3(实现上下无限来往滚动)

一、问题描述 一般在大屏项目中&#xff0c;很常见的效果&#xff0c;就是容器中的内容缓慢地向下移动&#xff0c;直到底部停止&#xff0c;然后快速滚动回顶部&#xff0c;然后接着缓慢滚动到底部。并且在特定的情况下&#xff0c;还需要进行一些小交互&#xff0c;那就还得让…

Leetcode——面试题02.04.分割链表

面试题 02.04. 分割链表 - 力扣&#xff08;LeetCode&#xff09; 对于该链表OJ&#xff0c;我们两种大的方向&#xff1a; 1.在原链表上修改&#xff1b;2.创建新链表&#xff0c;遍历原链表。 在原链上进行修改&#xff1a;如果该节点的val小于x则继续往后走&#xff0c;如…

Ubuntu服务器创建新用户及解决新用户登录Access denied问题

目录 Ubuntu服务器创建新用户及解决新用户登录Access denied问题创建账号步骤创建用户只创建用户添加用户到sudo组 允许账号远程连接重启ssh服务 删除账号要删除用户而不删除用户文件如果要删除并且删除用户的家目录和邮件 查询指令查看所有用户查询特定用户账户信息查看用户组…

【Micropython Pitaya Lite教程】key按键与EXTI中断

文章目录 前言一、按键的使用1.1 按键的简介1.2 读取按键的高低电平 二、EXIT外部中断2.1 EXIT外部中断简介2.2 外部中断基础知识2.3 设置外部中断2.4 示例代码 总结 前言 Micropython Pitaya Lite开发板提供了丰富的功能和灵活的扩展性&#xff0c;其中包括了按键&#xff08…

Python 全栈系列241 GFGo Lite迭代

说明 随着整个算网开发逐渐深入&#xff0c;各个组件、微服务的数量、深度在不断增加。由于算网是个人项目&#xff0c;我一直按照MVP(Minimum Viable Product )的原则在推进。由于最初的时候对架构、算法和业务的理解并没有那么深刻&#xff0c;所以MVP的内容还是在不断变化&…

IoTDB 入门教程 基础篇①——时序数据库为什么选IoTDB ?

文章目录 一、前文二、性能排行第一三、完全开源四、数据文件TsFile五、乱序数据高写入六、其他七、参考 一、前文 IoTDB入门教程——导读 关注博主的同学都知道&#xff0c;博主在物联网领域深耕多年。 时序数据库&#xff0c;博主已经用过很多&#xff0c;从最早的InfluxDB&a…

Linux基础之yum和vim

目录 一、软件包管理器yum 1.1 软件包的概念 1.2 软件包的查看 1.3 软件包的安装和删除 二、Linux编辑器之vim 2.1 vim的基本概念 2.2 正常模式&#xff08;命令模式&#xff09; 2.3 底行模式 2.4 输入模式 2.5 替换模式 2.6 视图模式 2.7 总结 一、软件包管理器yu…

MATLAB可视化图形绘制详解

图形常见的修饰命令 ①曲线修饰 曲线修饰包括曲线的顔色、线型和标示符号的设置。曲线修饰的命令格式如下。 plot(x,y,option):option定义了曲线的颜色、线型和标示符号。 MATLAB曲线修饰的各种选项见表 举例&#xff1a; x-2*pi:pi/50:2*pi; y1x.^2;y2cos(2*X);y3y1.*y2…

【Python项目】基于DJANGO的【基于语音识别的智能垃圾分类系统】

技术简介&#xff1a;使用Python技术、DJANGO框架、MYSQL数据库等实现。 系统简介&#xff1a;用户们可以在系统上面录入自己的个人信息&#xff0c;录入后还可以对信息进行修改&#xff0c;网站可以对用户上传的音频文件进行识别&#xff0c;然后进行垃圾分类。 背景&#xf…

【竞技宝jjb.lol】LOL:TES顺利晋级却暴露问题

北京时间2024年5月5日,英雄联盟2024MSI季中赛正在如火如荼的进行之中,目前入围赛阶段的比赛已经进入尾声,入围赛实力最强的两支战队T1、TES都已经顺利晋级淘汰赛阶段,在昨天的比赛结束之后,A组的FLY、PSG,B组的FNC、GAM将争夺剩下的两个出线名额。 回顾这次入围赛中,T1和TES的比…

课题学习(二十三)---三轴MEMS加速度计芯片ADXL372

声明&#xff1a;本人水平有限&#xff0c;博客可能存在部分错误的地方&#xff0c;请广大读者谅解并向本人反馈错误。 一、基础配置 测量范围-200g-200g&#xff0c;分辨率为12位&#xff0c; V s 、 V D D I / O V_s、V_{DDI/O} Vs​、VDDI/O​范围为1.6V-3.5V 1.1 引脚配…

u盘格式化后电脑读不出来怎么办?u盘格式化的东西还能恢复吗

随着科技的快速发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;有时我们可能会遇到U盘格式化后电脑无法读取的情况&#xff0c;或是误格式化导致重要数据丢失。面对这些问题&#xff0c;我们该如何应对&#xff1f;本文将为您详细解答…

基于 Dockerfile 部署nginx服务(实现HTTPS功能)

目录 前言 1、任务要求 2、建立工作目录并上传nginx安装包 3、创建自签名证书 4、创建 nginx Dockerfile 文件 5、准备并编写 nginx.conf 配置文件 6、准备nginx页面文件 7、工作目录文件结构 8、生成镜像 8、启动容器并开启宿主机端口映射 9、浏览器测试 前言 Ngi…