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…

laravel、tp等框架底层代码config方法实现示例

剖析php如何优雅得实现框架config方法核心代码 在php的laravel、tp框架中,普遍采用配置文件直接return数组的方式存放配置信息、日常的代码编写我们并不会这样做&#xff0c;其实核心代码很简单,只需要把include file赋值给变量即可 php if(!function_exists("config&quo…

Eclipse中开启服务,网页无法打开 运行程序显示404

一、eclipse中开启服务后&#xff0c;网页无法打开的问题 当你在eclipse中开启服务后&#xff0c;如果网页无法打开&#xff0c;可能是以下几个原因导致的&#xff1a; 1. 端口冲突&#xff1a;请确保你所使用的端口没有被其他程序占用。可以尝试更换一个未被占用的端口。 2…

【QEMU系统分析之实例篇(十四)】

系列文章目录 第十四章 QEMU系统仿真的机器创建分析实例 文章目录 系列文章目录第十四章 QEMU系统仿真的机器创建分析实例 前言一、QEMU是什么&#xff1f;二、QEMU系统仿真的机器创建分析实例1.系统仿真的命令行参数2.完成早期后端驱动的设置工作qemu_create_early_backends(…

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;或者出于其他网络需求。华为手机作为市场上的热门品牌…

开源相机管理库Aravis学习——pixel format编码规则

开源相机管理库Aravis学习——pixel format编码规则 前言前置知识PixelFormatBpp 编码规则源码分析分类标准 补充ARV_PIXEL_FORMAT_BIT_PER_PIXEL 参考文章 前言 在学习Aravis官方例程的时候&#xff0c;有这么一个函数&#xff1a;arv_camera_get_pixel_format&#xff0c;它…

Docker安装MySQL8数据表名大小写问题

项目使用了Flowable工作流&#xff0c;导入sql时候需要MySQL忽略大小写&#xff0c;使用MySQL5.7时可以通过 在my.cnf文件中添加lower_case_table_names1实现。 [mysqld] lower_case_table_names1使用MySQL8上述方法失效&#xff0c;可以通过创建Docker容器时添加参数--lower_…

微信小程序开发中的网络请求和数据获取:从入门到实践

微信小程序开发中的网络请求和数据获取&#xff1a;从入门到实践 在微信小程序开发中&#xff0c;网络请求和数据获取是构建动态、交互式应用的关键环节。本文将深入探讨微信小程序的网络请求机制&#xff0c;并提供丰富的代码示例&#xff0c;帮助读者从零开始掌握这一重要技…

《从Paxos到Zookeeper》读书笔记

本文是对于从Paxos到Zookeeper的笔记和提纲整理 主要用于复习和知识点梳理 第一、二、三章&#xff1a;分布式基础 链接&#xff1a;《从Paxos到Zookeeper》——第一、二、三章&#xff1a;分布式基础 第一章 分布式架构 [1.1] 分布式的特点&#xff08;集中式/分布式&#xf…

C语言经典例题-12

1.杨辉三角 题目描述: KK知道什么叫杨辉三角之后对杨辉三角产生了浓厚的兴趣&#xff0c;他想知道杨辉三角的前n行&#xff0c;请编程帮他 解答。杨辉三角&#xff0c;本质上是二项式(ab)的n次方展开后各项的系数排成的三角形。其性质包括&#xff1a;每行的端点数为1&#…

用队列实现栈——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;如…

2.3Java全栈开发前端+后端(全栈工程师进阶之路)-前端框架VUE3-基础-Vue进阶

Vue方法、计算属性及监听器 在vue中处理复杂的逻辑的时候&#xff0c;我们经常使用计算属性、方法及监听器。 methods&#xff1a;方法&#xff1a;它们是挂载在Vue对象上的函数&#xff0c;通常用于做事件处理函数&#xff0c;或自己封装的自定义函数。 computed&#xff1…

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

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

Java中面向对象三大特征(封装、继承、多态)

目录 一、封装 1.1 封装的意义 1.2 如何进行封装 二、继承 2.1 继承的意义 2.2 如何继承 2.3 继承的优点 2.4 继承的缺点 三、多态 3.1 多态的定义 3.2 多态的使用要求 一、封装 所谓封装就是将对象的属性隐藏起来&#xff0c;不让外界直接访问&#xff0c;而是通过…