Mac中配置Node.js前端vscode环境(第二期)

news2025/1/6 10:32:36

核心组件:vscode、谷歌浏览器、Node.js(重点)、git

一、Node.js安装(nvm安装)

点击macos中的终端,保持bash,而不是zsh
在这里插入图片描述
若为zsh,则可在终端中使用下面命令变成bash

chsh -s /bin/bash

然后输入mac电脑密码,回车,重启终端即可,便是如下图所示的图片:
在这里插入图片描述
接着输入:

sudo vi /etc/hosts  

其中,sudo 是使用超管权限,vi 是打开文本编辑器的指令,vi 后面空一格,后面跟文件的路径
在这里插入图片描述
输入开机密码,回车,便可看见:
在这里插入图片描述
光标放到最后的localhost后面,输入i,进入编辑,将下列的内容复制进去:

# GitHub520 Host Start
140.82.113.25                 alive.github.com
140.82.112.6                  api.github.com
185.199.108.153               assets-cdn.github.com
185.199.111.133               avatars.githubusercontent.com
185.199.111.133               avatars0.githubusercontent.com
185.199.111.133               avatars1.githubusercontent.com
185.199.110.133               avatars2.githubusercontent.com
185.199.110.133               avatars3.githubusercontent.com
185.199.111.133               avatars4.githubusercontent.com
185.199.111.133               avatars5.githubusercontent.com
185.199.111.133               camo.githubusercontent.com
140.82.113.21                 central.github.com
185.199.111.133               cloud.githubusercontent.com
140.82.112.9                  codeload.github.com
140.82.114.21                 collector.github.com
185.199.111.133               desktop.githubusercontent.com
185.199.111.133               favicons.githubusercontent.com
140.82.112.3                  gist.github.com
54.231.226.153                github-cloud.s3.amazonaws.com
52.217.234.41                 github-com.s3.amazonaws.com
3.5.8.106                     github-production-release-asset-2e65be.s3.amazonaws.com
52.216.245.236                github-production-repository-file-5c1aeb.s3.amazonaws.com
16.182.103.113                github-production-user-asset-6210df.s3.amazonaws.com
192.0.66.2                    github.blog
140.82.114.4                  github.com
140.82.113.18                 github.community
185.199.110.154               github.githubassets.com
151.101.193.194               github.global.ssl.fastly.net
185.199.108.153               github.io
185.199.110.133               github.map.fastly.net
185.199.108.153               githubstatus.com
140.82.112.25                 live.github.com
185.199.111.133               media.githubusercontent.com
185.199.111.133               objects.githubusercontent.com
13.107.42.16                  pipelines.actions.githubusercontent.com
185.199.110.133               raw.githubusercontent.com
185.199.110.133               user-images.githubusercontent.com
140.82.113.21                 education.github.com
185.199.111.133               private-user-images.githubusercontent.com


# Update time: 2025-01-03T20:09:20+08:00
# Update url: https://raw.hellogithub.com/hosts
# Star me: https://github.com/521xueweihan/GitHub520
# GitHub520 Host End

在这里插入图片描述
按下esc键,退出编辑。
最后输入

:wq

保存。

验证下,输入:

cat /etc/hosts

在这里插入图片描述
已成功验证,现在开始安装脚本:(有概率会失败,所以要反复安装如下命令,方可success)

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

在这里插入图片描述
在这里插入图片描述
将其中的这个【红色框住的】复制下:
在这里插入图片描述
然后接着输入:

vi ~/.bashrc

回车。

将复制的内容粘贴进去:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

输入:wq 保存退出即可

最后我们输入:

source ~/.bashrc

回车。【对环境变量进行加载】
在这里插入图片描述
最后输入如下命令,查看远端提供的nodejs的版本

nvm ls-remote

在这里插入图片描述
其中,绿色的是长期维护的版本
在这里插入图片描述
命令下载:【下载绿色版本】

nvm install v22.12.0

在这里插入图片描述
通过

node -v

查询版本

到此结束

二、vscode中从常用的前端开发插件

live sever 插件:页面实时代码效果
在这里插入图片描述
在这里插入图片描述
代码写好后,点击右下角“go live”
在这里插入图片描述

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

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

相关文章

基于SpringBoot和Thymeleaf的仿小米电商系统源码下载与安装指南-幽络源

项目概述 这是一个基于 Spring Boot 2.X 和 Thymeleaf 技术栈的仿小米电商系统。该项目包括了前台商城系统和后台管理系统,经幽络源测试具备完整的电商功能,适合用作学习、参考或作为开发电商系统的基础。 前台商城系统: 包括首页登录、商品…

Deepseek v3 的笔记

基本概述 Deepseek v3是Deepseek发布的旗舰模型,属于607B的混合专家(MoE)模型,其中活跃参数为37B。在当前的模型领域,它堪称最佳的开源模型,性能超越了Llama 3.1 405b、Qwen和Mistral等知名模型。根据基准…

机器学习中的常用特征选择方法及其应用案例

工业界中,特征选择是机器学习模型开发的重要步骤,可以提高模型性能、减少过拟合和加速计算。针对类别型特征和数值型特征,特征选择方法有所不同。以下详细讲解方法和案例。 一、类别型特征的特征选择 1. 基于卡方检验 卡方检验是一种衡量两…

Pyecharts SVG 标记使用笔记

Pyecharts SVG 标记使用笔记 在数据可视化中,图表的标记点常常用于突出显示重要数据点。Pyecharts 提供了丰富的标记点配置选项,其中使用 SVG 路径来自定义标记点的样式是一个非常强大的功能。本文将详细介绍如何在 Pyecharts 中使用 SVG 路径来定制标记…

Spring SpEL表达式由浅入深

标题 前言概述功能使用字面值对象属性和方法变量引用#this 和 #root变量获取类的类型调用对象(类)的方法调用类构造器类型转换运算符赋值运算符条件(关系)表达式三元表达式Elvis 操作符逻辑运算instanceof 和 正则表达式的匹配操作符 安全导航操作员数组集合(Array 、List、Map…

大型模型推理加速入门

一 推理加速基础 1. 了解基本概念与术语 首先需要了解关于大模型的一些基本的历史发展,概念和术语,不需要全部看懂,只需要掌握大概情况,可以通过下面这篇文章进行: 大模型入门基本概念,术语 2. 了解Tra…

仓库叉车高科技安全辅助设备——AI防碰撞系统N2024G-2

在当今这个高效运作、安全第一的物流时代,仓库作为供应链的中心地带,其安全与效率直接关系到企业的命脉。 随着科技的飞速发展,传统叉车作业模式正逐步向智能化、安全化转型,而在这场技术革新中,AI防碰撞系统N2024G-2…

python-redis访问指南

Redis(Remote Dictionary Server)是一种开源的内存数据结构存储,可用作数据库、缓存和消息代理。它功能强大且灵活,可根据需求调整架构和配置,以高性能、简单易用、支持多种数据结构而闻名,广泛应用于各种场…

Flash Attention V3使用

Flash Attention V3 概述 Flash Attention 是一种针对 Transformer 模型中注意力机制的优化实现,旨在提高计算效率和内存利用率。随着大模型的普及,Flash Attention V3 在 H100 GPU 上实现了显著的性能提升,相比于前一版本,V3 通…

UE5失真材质

渐变材质函数:RadialGradientExponential(指数径向渐变) 函数使用 UV 通道 0 来产生径向渐变,同时允许用户调整半径和中心点偏移。 用于控制渐变所在的位置及其涵盖 0-1 空间的程度。 基于 0-1 的渐变中心位置偏移。 源自中心的径…

Ansys Aqwa 中 Diffraction Analysis 的疲劳结果

了解如何执行疲劳分析,包括由 Ansys Aqwa 计算的海浪行为。 了解疲劳分析 大多数机器故障是由于负载随时间变化,而不是静态负载。这种失效通常发生在应力水平明显低于材料的屈服强度时。因此,当存在动态载荷时,仅依赖静态失效理…

MT8788安卓核心板_MTK8788核心板参数_联发科模块定制开发

MT8788安卓核心板是一款尺寸为52.5mm x 38.5mm x 2.95mm的高集成度电路板,专为各种智能设备应用而设计。该板卡整合了处理器、图形处理单元(GPU)、LPDDR3内存、eMMC存储及电源管理模块,具备出色的性能与低功耗特性。 这款核心板搭载了联发科的MT8788处理…

【UE5 C++课程系列笔记】19——通过GConfig读写.ini文件

步骤 1. 新建一个Actor类,这里命名为“INIActor” 2. 新建一个配置文件“Test.ini” 添加一个自定义配置项 3. 接下来我们在“INIActor”类中获取并修改“CustomInt”的值。这里定义一个方法“GetINIVariable” 方法实现如下,其中第16行代码用于构建配…

Qt天气预报系统设计界面布局第四部分右边

Qt天气预报系统 1、第四部分右边的第一部分1.1添加控件 2、第四部分右边的第二部分2.1添加控件 3、第四部分右边的第三部分3.1添加控件3.2修改控件名字 1、第四部分右边的第一部分 1.1添加控件 拖入一个widget,改名为widget04r作为第四部分的右边 往widget04r再拖…

机器学习基础-机器学习的常用学习方法

半监督学习的概念 少量有标签样本和大量有标签样本进行学习;这种方法旨在利用未标注数据中的结构信息来提高模型性能,尤其是在标注数据获取成本高昂或困难的情况下。 规则学习的概念 基本概念 机器学习里的规则 若......则...... 解释:如果…

搭建nginx文件服务器

1、创建一个nginx配置文件/etc/nginx/nginx.conf user nginx; worker_processes 1;error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream;server {li…

MySql---进阶篇(六)---SQL优化

6.1:insert的优化: (1)普通的插入数据 如果我们需要一次性往数据库表中插入多条记录,可以从以下三个方面进行优化。 insert into tb_test values(1,tom); insert into tb_test values(2,cat); insert into tb_test values(3,jerry); 1). 优…

逐光的黑色羽翼:一位黑色超模的成长之路-中小企实战运营和营销工作室博客

逐光的黑色羽翼:一位黑色超模的成长之路-中小企实战运营和营销工作室博客 在遥远的非洲肯尼亚,有一个小女孩名叫艾拉。她生活在一个小小的部落村庄里,每天伴随着朝阳起床,跟着家人放牧,在广袤无垠的草原上奔跑嬉戏&am…

Java项目实战II基于微信小程序的家庭大厨(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 在快节奏的生活中,家庭聚餐成为了连接亲情…

Github拉取项目报错解决

前言 昨天在拉取github上面的项目报错了,有好几个月没用github了,命令如下: git clone gitgithub.com:zhszstudy/git-test.git报错信息: ssh: connect to host github.com port 22: Connection timed out fatal: Could not rea…