如何在Linux系统中安装Node.js和npm?快速搭建前端开发环境的教程

使用NVM安装Node.js和npm是Linux下最推荐的方式,它支持多版本管理、避免权限问题。1. 通过curl或wget安装NVM;2. 执行source命令激活NVM;3. 使用nvm install node安装最新版Node.js;4. 运行node -v和npm -v验证安装成功。

如何在linux系统中安装node.js和npm?快速搭建前端开发环境的教程

在Linux统上安装Node.js和npm,最推荐且灵活的方式是使用Node Version Manager (NVM)。它允许你轻松安装和切换多个Node.js版本,避免了系统级安装可能带来的冲突和权限问题,尤其适合前端开发者管理不同项目所需的Node环境。

解决方案

为了在Linux系统上快速且灵活地搭建Node.js和npm环境,我个人强烈建议使用Node Version Manager (NVM)。这不仅能让你轻松安装最新版本的Node.js,还能让你在不同项目之间无缝切换Node.js版本,这在前端开发中简直是救星。

1. 安装NVM

首先,我们需要下载并安装NVM。打开你的终端,执行以下命令:

立即学习“前端免费学习笔记(深入)”;

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

或者,如果你更喜欢

wget

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

这个脚本会将NVM克隆到你的用户目录下(通常是

~/.nvm

),并尝试修改你的shell配置文件(如

~/.bashrc

,

~/.zshrc

,

~/.profile

等),以便NVM在每次启动终端时都能加载。

2. 激活NVM

安装脚本执行完毕后,你需要重新加载你的shell配置,或者干脆关闭并重新打开终端。如果你不想重启终端,可以手动执行:

source ~/.bashrc  # 或者你的shell配置文件,比如 ~/.zshrc

验证NVM是否安装成功,可以输入:

nvm --version

如果显示版本号,那就说明Nvm已经准备就绪了。

3. 安装Node.js和npm

现在,你可以用NVM安装Node.js了。安装最新稳定版Node.js的命令是:

nvm install node

这条命令会自动安装最新LTS(长期支持)版本的Node.js,并附带相应的npm。

如果你需要安装特定版本的Node.js,比如18.x系列:

nvm install 18

或者精确到某个小版本:

nvm install 18.17.0

安装完成后,你需要告诉NVM使用哪个版本的Node.js。如果你只安装了一个版本,它通常会自动设置为默认。但为了确保,可以执行:

nvm use node  # 使用最新安装的版本

或者:

nvm use 18  # 使用18.x系列版本

为了让这个版本在每次打开新终端时都自动生效,你可以将其设置为默认:

nvm alias default node  # 将当前使用的Node.js版本设置为默认

4. 验证安装

最后,检查Node.js和npm是否都已正确安装并可用:

node -vnpm -v

它们应该分别显示对应的版本号。

为什么NVM是前端开发者的首选?

我个人在多年的开发实践中,几乎从未后悔过选择NVM来管理我的Node.js环境。它带来的便利性远超直接通过系统包管理器安装。最核心的原因在于版本管理的灵活性。前端项目往往依赖于特定版本的Node.js,比如有些老项目可能还在用Node 14,而新项目则要求Node 18或更高。如果直接系统安装,你只能有一个全局版本,这会让你在不同项目之间切换时陷入“版本冲突”的泥潭,轻则报警告,重则项目根本跑不起来。

NVM完美解决了这个问题。它允许你在同一台机器上安装并维护多个Node.js版本,并且可以轻松地通过

nvm use 

命令在不同版本间切换。这意味着你可以为每个项目配置其所需的Node.js版本,从而保证开发环境的稳定性和一致性。此外,使用NVM安装的Node.js和npm,其全局包(如

create-react-app

,

vue-cli

等)也会安装在NVM管理的用户目录下,避免了使用

sudo

带来的权限问题,让你的开发体验更加顺畅和安全。

安装后如何验证Node.js和npm并启动你的第一个前端项目?

成功安装Node.js和npm后,验证工作是必不可少的一步。这就像你组装好一台电脑后,总要开机看看能不能点亮屏幕一样。

1. 验证Node.js和npm版本

在终端中输入:

文心快码 文心快码

文心快码(Comate)是百度推出的一款AI辅助编程工具

文心快码 35 查看详情 文心快码

node -vnpm -v

如果它们都显示了版本号,比如

v18.17.0

9.6.7

,那就说明Node.js运行时和npm包管理器都已成功安装并处于可用状态。这基本意味着你的基础环境已经就绪。

2. 启动你的第一个前端项目

有了Node.js和npm,你就可以开始初始化一个前端项目了。以一个简单的React项目为例:

首先,选择一个你想要创建项目的目录,比如进入你的

Documents

文件夹:

cd ~/Documents

然后,使用

create-react-app

工具(如果没安装,它会提示你安装或用

npx

直接运行)来创建一个新的React项目:

npx create-react-app my-first-react-app

npx

是一个Node.js包执行工具,它允许你直接运行npm仓库中的包,而不需要全局安装它们,这在很多场景下非常方便。

创建过程可能需要一些时间,因为它会下载React项目的模板和所有依赖。完成后,进入项目目录:

cd my-first-react-app

最后,启动开发服务器:

npm start

这通常会在你的默认浏览器中打开

http://localhost:3000

,显示一个带有React logo的页面。恭喜你,你的前端开发环境已经成功搭建并运行起来了!

Linux环境下Node.js和npm的常见问题与优化策略

在Linux上使用Node.js和npm进行开发,虽然NVM已经解决了大部分版本管理的问题,但偶尔还是会遇到一些小插曲。理解这些常见问题及其解决策略,能让你在遇到困难时少走弯路。

1. PATH环境变量问题

有时,即使NVM显示Node.js已安装,你在终端输入

node

npm

时,系统仍然提示“command not found”。这通常是

PATH

环境变量没有正确配置导致的。NVM的安装脚本会尝试修改你的shell配置文件(如

~/.bashrc

,

~/.zshrc

),但有时可能没有生效,或者你使用的是一个非标准shell。

解决策略:

手动检查配置文件: 打开你的

~/.bashrc

~/.zshrc

文件,确保其中包含类似

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

这样的行。手动加载NVM: 如果每次开机都遇到问题,可以尝试在每次打开新终端时手动执行

source ~/.bashrc

(或对应文件),直到你找到根本原因并修复配置文件。确保NVM路径在PATH前面: 有时系统自带的Node.js版本(通过

apt

yum

安装)会优先被找到。NVM的配置应该确保其路径在系统路径之前加载。

2. npm包安装速度慢或失败

在国内,由于网络环境的复杂性,直接从npm官方源下载包可能会非常慢,甚至出现超时失败的情况。

解决策略:

使用淘宝NPM镜像: 这是最常见的解决方案。你可以通过以下命令将npm的注册表设置为淘宝镜像:

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

如果你需要恢复到官方源,可以执行:

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

使用

cnpm

cnpm

是一个完整的npm客户端,它默认使用淘宝镜像。你可以全局安装它:

npm install -g cnpm --registry=https://registry.npmmirror.com

之后就可以用

cnpm install

代替

npm install

清理npm缓存: 有时损坏的缓存也会导致安装问题。

npm cache clean --force

3. Node.js进程占用CPU或内存过高

在进行大型前端项目构建(如Webpack打包)时,Node.js进程可能会占用大量CPU和内存。

解决策略:

增加系统资源: 如果是虚拟机或容器环境,考虑分配更多的CPU核心和内存。优化构建配置: 检查你的Webpack或其他构建工具的配置,是否有不必要的插件或优化空间。例如,使用

happypack

thread-loader

进行多线程编译。监控与调试: 使用

top

htop

等工具监控进程资源占用,结合Node.js的

--inspect

参数进行性能分析。升级Node.js版本: 新的Node.js版本通常会有性能上的改进。

4. 全局包权限问题

虽然NVM安装的Node.js通常不会有

sudo

权限问题,但如果你不小心通过系统包管理器安装了Node.js,或者尝试全局安装包时没有NVM的上下文,可能会遇到权限错误。

解决策略:

坚持使用NVM: 确保你所有的Node.js相关操作都在NVM管理的环境下进行。不要用

sudo npm install -g

这是一个常见的反模式,它会污染你的全局环境并可能导致后续的权限问题。如果你确实需要将某个包安装到系统路径,请考虑使用NVM安装Node.js,然后用

npm install -g

这些小技巧和解决思路,希望能帮助你在Linux上更顺畅地进行Node.js和前端开发。毕竟,一个稳定高效的开发环境,才是我们高效产出的基石。

以上就是如何在Linux系统中安装Node.js和npm?快速搭建前端开发环境的教程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/393635.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月6日 16:45:33
下一篇 2025年11月6日 16:49:15

相关推荐

  • soul怎么发长视频瞬间_Soul长视频瞬间发布方法

    可通过分段发布、格式转换或剪辑压缩三种方法在Soul上传长视频。一、将长视频用相册编辑功能拆分为多个30秒内片段,依次发布并标注“Part 1”“Part 2”保持连贯;二、使用“格式工厂”等工具将视频转为MP4(H.264)、分辨率≤1080p、帧率≤30fps、大小≤50MB,适配平台要求;三、…

    2025年12月6日 软件教程
    500
  • AO3镜像站备用镜像网址_AO3镜像站快速访问官网

    AO3镜像站备用网址包括ao3mirror.com和xiaozhan.icu,当主站archiveofourown.org无法访问时可切换使用,二者均同步更新内容并支持多语言检索与离线下载功能。 AO3镜像站备用镜像网址在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来AO3镜像站快速访问官…

    2025年12月6日 软件教程
    100
  • 天猫app淘金币抵扣怎么使用

    在天猫app购物时,淘金币是一项能够帮助你节省开支的实用功能。掌握淘金币的抵扣使用方法,能让你以更实惠的价格买到心仪商品。 当你选好商品并准备下单时,记得查看商品页面是否支持淘金币抵扣。如果该商品支持此项功能,在提交订单的页面会明确显示相关提示。你会看到淘金币的具体抵扣比例——通常情况下,淘金币可按…

    2025年12月6日 软件教程
    500
  • Pboot插件缓存机制的详细解析_Pboot插件缓存清理的命令操作

    插件功能异常或页面显示陈旧内容可能是缓存未更新所致。PbootCMS通过/runtime/cache/与/runtime/temp/目录缓存插件配置、模板解析结果和数据库查询数据,提升性能但影响调试。解决方法包括:1. 手动删除上述目录下所有文件;2. 后台进入“系统工具”-“缓存管理”,勾选插件、…

    2025年12月6日 软件教程
    100
  • Word2013如何插入SmartArt图形_Word2013SmartArt插入的视觉表达

    答案:可通过四种方法在Word 2013中插入SmartArt图形。一、使用“插入”选项卡中的“SmartArt”按钮,选择所需类型并插入;二、从快速样式库中选择常用模板如组织结构图直接应用;三、复制已有SmartArt图形到目标文档后调整内容与格式;四、将带项目符号的文本选中后右键转换为Smart…

    2025年12月6日 软件教程
    000
  • 《kk键盘》一键发图开启方法

    如何在kk键盘中开启一键发图功能? 1、打开手机键盘,找到并点击“kk”图标。 2、进入工具菜单后,选择“一键发图”功能入口。 3、点击“去开启”按钮,跳转至无障碍服务设置页面。 4、在系统通用设置中,进入“已下载的应用”列表。 j2me3D游戏开发简单教程 中文WORD版 本文档主要讲述的是j2m…

    2025年12月6日 软件教程
    100
  • 怎样用免费工具美化PPT_免费美化PPT的实用方法分享

    利用KIMI智能助手可免费将PPT美化为科技感风格,但需核对文字准确性;2. 天工AI擅长优化内容结构,提升逻辑性,适合高质量内容需求;3. SlidesAI支持语音输入与自动排版,操作便捷,利于紧急场景;4. Prezo提供多种模板,自动生成图文并茂幻灯片,适合学生与初创团队。 如果您有一份内容完…

    2025年12月6日 软件教程
    000
  • jm漫画官方正版入口 jm漫画官方网站登录链接

    JM漫画作为一个致力于为广大漫画爱好者服务的全方位的数字漫画阅读平台,凭借其海量的资源储备、卓越的阅读体验和人性化的功能设计,在众多同类平台中脱颖而出。它不仅收录了来自世界各地的热门连载与经典完结作品,更通过智能推荐算法,精准地将符合用户口味的精彩内容呈现眼前,让每一位用户都能在这里找到属于自己的精…

    2025年12月6日 软件教程
    000
  • 怎么下载安装快手极速版_快手极速版下载安装详细教程

    1、优先通过华为应用市场搜索“快手极速版”,确认开发者为北京快手科技有限公司后安装;2、若应用商店无结果,可访问快手极速版官网下载APK文件,需手动开启浏览器的未知来源安装权限;3、也可选择豌豆荚、应用宝等可信第三方平台下载官方版本,核对安全标识后完成安装。 如果您尝试在手机上安装快手极速版,但无法…

    2025年12月6日 软件教程
    000
  • 哔哩哔哩的视频卡在加载中怎么办_哔哩哔哩视频加载卡顿解决方法

    视频加载停滞可先切换网络或重启路由器,再清除B站缓存并重装应用,接着调低播放清晰度并关闭自动选分辨率,随后更改播放策略为AVC编码,最后关闭硬件加速功能以恢复播放。 如果您尝试播放哔哩哔哩的视频,但进度条停滞在加载状态,无法继续播放,这通常是由于网络、应用缓存或播放设置等因素导致。以下是解决此问题的…

    2025年12月6日 软件教程
    000
  • 买家网购苹果手机仅退款不退货遭商家维权,法官调解后支付货款

    10 月 24 日消息,据央视网报道,近年来,“仅退款”服务逐渐成为众多网购平台的常规配置,但部分消费者却将其当作“免费试用”的手段,滥用规则谋取私利。 江苏扬州市民李某在某电商平台购买了一部苹果手机,第二天便以“不想要”为由在线申请“仅退款”,当时手机尚在物流运输途中。第三天货物送达后,李某签收了…

    2025年12月6日 行业动态
    000
  • Linux中如何安装Nginx服务_Linux安装Nginx服务的完整指南

    首先更新系统软件包,然后通过对应包管理器安装Nginx,启动并启用服务,开放防火墙端口,最后验证欢迎页显示以确认安装成功。 在Linux系统中安装Nginx服务是搭建Web服务器的第一步。Nginx以高性能、低资源消耗和良好的并发处理能力著称,广泛用于静态内容服务、反向代理和负载均衡。以下是在主流L…

    2025年12月6日 运维
    000
  • 当贝X5S怎样看3D

    当贝X5S观看3D影片无立体效果时,需开启3D模式并匹配格式:1. 播放3D影片时按遥控器侧边键,进入快捷设置选择3D模式;2. 根据片源类型选左右或上下3D格式;3. 可通过首页下拉进入电影专区选择3D内容播放;4. 确认片源为Side by Side或Top and Bottom格式,并使用兼容…

    2025年12月6日 软件教程
    100
  • Linux journalctl与systemctl status结合分析

    先看 systemctl status 确认服务状态,再用 journalctl 查看详细日志。例如 nginx 启动失败时,systemctl status 显示 Active: failed,journalctl -u nginx 发现端口 80 被占用,结合两者可快速定位问题根源。 在 Lin…

    2025年12月6日 运维
    100
  • TikTok视频无法下载怎么办 TikTok视频下载异常修复方法

    先检查链接格式、网络设置及工具版本。复制以https://www.tiktok.com/@或vm.tiktok.com开头的链接,删除?后参数,尝试短链接;确保网络畅通,可切换地区节点或关闭防火墙;更新工具至最新版,优先选用yt-dlp等持续维护的工具。 遇到TikTok视频下载不了的情况,别急着换…

    2025年12月6日 软件教程
    100
  • Linux如何防止缓冲区溢出_Linux防止缓冲区溢出的安全措施

    缓冲区溢出可通过栈保护、ASLR、NX bit、安全编译选项和良好编码实践来防范。1. 使用-fstack-protector-strong插入canary检测栈破坏;2. 启用ASLR(kernel.randomize_va_space=2)随机化内存布局;3. 利用NX bit标记不可执行内存页…

    2025年12月6日 运维
    000
  • 2025年双十一买手机选直板机还是选折叠屏?建议看完这篇再做决定

    随着2025年双十一购物节的临近,许多消费者在选购智能手机时都会面临一个共同的问题:是选择传统的直板手机,还是尝试更具科技感的折叠屏设备?其实,这个问题的答案早已在智能手机行业的演进中悄然浮现——如今的手机市场已不再局限于“拼参数、堆配置”的初级竞争,而是迈入了以形态革新驱动用户体验升级的新时代。而…

    2025年12月6日 行业动态
    000
  • Linux如何优化系统性能_Linux系统性能优化的实用方法

    优化Linux性能需先监控资源使用,通过top、vmstat等命令分析负载,再调整内核参数如TCP优化与内存交换,结合关闭无用服务、选用合适文件系统与I/O调度器,持续按需调优以提升系统效率。 Linux系统性能优化的核心在于合理配置资源、监控系统状态并及时调整瓶颈环节。通过一系列实用手段,可以显著…

    2025年12月6日 运维
    000
  • Pboot插件数据库连接的配置教程_Pboot插件数据库备份的自动化脚本

    首先配置PbootCMS数据库连接参数,确保插件正常访问;接着创建auto_backup.php脚本实现备份功能;然后通过Windows任务计划程序或Linux Cron定时执行该脚本,完成自动化备份流程。 如果您正在开发或维护一个基于PbootCMS的网站,并希望实现插件对数据库的连接配置以及自动…

    2025年12月6日 软件教程
    000
  • Linux命令行中wc命令的实用技巧

    wc命令可统计文件的行数、单词数、字符数和字节数,常用-l统计行数,如wc -l /etc/passwd查看用户数量;结合grep可分析日志,如grep “error” logfile.txt | wc -l统计错误行数;-w统计单词数,-m统计字符数(含空格换行),-c统计…

    2025年12月6日 运维
    000

发表回复

登录后才能评论
关注微信