MACOS安装配置前端开发环境

官网下载安装Mac版本的谷歌浏览器以及VS code代码编辑器,还有在App Store中直接安装Xcode(里面自带git);
node.js版本管理器nvm的下载安装如下:
参考B站:https://www.bilibili.com/video/BV1M54y1N7fx/?spm_id_from=333.999.0.0&vd_source=ffb65e7592d3826cc440355d28093f39

参考:https://nvm.uihtm.com/#nvm-mac
具体的步骤如下:首先打开终端,进入当前用户的 home 目录中。

 cd ~

然后使用 ls -a 显示这个目录下的所有文件(夹)(包含隐藏文件及文件夹),查看有没有 .bash_profile 这个文件。

ls -a

如果没有,则新建一个。

touch ~/.bash_profile

如果有或者新建完成后,我们通过官方的说明在终端中运行下面命令中的一种进行安装:

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

第一次安装会报下面的错误(国内网站无法访问):
在这里插入图片描述
所以可以配置host文件来允许访问(github.com/521xueweihan/Github520),host文件如下可直接复制:

# GitHub520 Host Start
140.82.113.25                 alive.github.com
140.82.112.6                  api.github.com
185.199.109.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.111.133               avatars2.githubusercontent.com
185.199.111.133               avatars3.githubusercontent.com
185.199.108.133               avatars4.githubusercontent.com
185.199.108.133               avatars5.githubusercontent.com
185.199.111.133               camo.githubusercontent.com
140.82.114.22                 central.github.com
185.199.111.133               cloud.githubusercontent.com
140.82.112.10                 codeload.github.com
140.82.113.22                 collector.github.com
185.199.111.133               desktop.githubusercontent.com
185.199.111.133               favicons.githubusercontent.com
140.82.112.3                  gist.github.com
52.216.169.243                github-cloud.s3.amazonaws.com
52.217.171.217                github-com.s3.amazonaws.com
3.5.9.197                     github-production-release-asset-2e65be.s3.amazonaws.com
3.5.7.164                     github-production-repository-file-5c1aeb.s3.amazonaws.com
52.216.211.161                github-production-user-asset-6210df.s3.amazonaws.com
192.0.66.2                    github.blog
140.82.114.3                  github.com
140.82.114.18                 github.community
185.199.109.154               github.githubassets.com
151.101.193.194               github.global.ssl.fastly.net
185.199.110.153               github.io
185.199.111.133               github.map.fastly.net
185.199.110.153               githubstatus.com
140.82.112.26                 live.github.com
185.199.108.133               media.githubusercontent.com
185.199.111.133               objects.githubusercontent.com
13.107.42.16                  pipelines.actions.githubusercontent.com
185.199.111.133               raw.githubusercontent.com
185.199.111.133               user-images.githubusercontent.com
140.82.113.21                 education.github.com
185.199.111.133               private-user-images.githubusercontent.com# Update time: 2024-08-30T20:08:23+08:00
# Update url: https://raw.hellogithub.com/hosts
# Star me: https://github.com/521xueweihan/GitHub520
# GitHub520 Host End

打开终端输入指令:

sudo vi /etc/hosts

然后输入开机密码(不显示,输完直接回车),然后将光标移到最后面
在这里插入图片描述
按下 i 键,进入编辑模式
command + v 粘贴刚刚复制的host文件内容
按下 esc 键,退出编辑模式
按出 :号,输入wq,保存并退出
然后用指令 查看host文件配置是否正确 :

cat /etc/hosts

在这里插入图片描述

再试一下安装nvm脚本命令:

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

没成功多试几次直到成功像下面这样:
在这里插入图片描述
紧接着还需要配置环境:
复制上图的提示内容:

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

编辑环境配置指令(我的终端默认是zsh,如果像视频中是bash的话,就运行 vi ~/.bashrc):

vi ~/.zshrc

按下 i 键,进入编辑模式
command + v 粘贴刚刚复制的内容
按下 esc 键,退出编辑模式
按出 :号,输入wq,保存并退出
配置好之后,进行环境变量的加载指令(同理是bash,就用source ~/.bashrc):

source ~/.zshrc

安装完成 输入nvm可以看到成功安装,可以用 nvm ls-remote 指令查看远端提供的node js版本,

如果输入指令报显示 N/A ,在终端执行

export NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist

然后再运行nvm ls-remote即可显示可用node版本
执行nvm install +版本号即可安装如:

nvm install 18.17.1

打开vscode 在文件夹下打开终端运行第一个react项目(cra):

npx create-react-app my-app
cd my-app
npm start

由于create-react-app项目已经不再维护,所以babel-preset-react-app依赖的 "@babel/plugin-proposal-private-property-in-object"包可能不再更新,导致出现未声明依赖的错误。执行如下命令解决:

npm install --save-dev @babel/plugin-proposal-private-property-in-object

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

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

相关文章

使用 Vue3 Element Plus 实现el-table中的特定单元格编辑,下拉选择等

效果预览 完整代码(后面有解析) <template><div style="display: flex;align-items: center;justify-co

海绵城市雨水监测系统

海绵城市雨水监测系统主要有&#xff1a;数据采集、无线数据传输、后台云服务、终端平台显示等部分组成。系统通过前端数据采集水质&#xff08;ss\cod\浊度、PH等&#xff09;、雨水雨量、流量、水位、土壤湿度、气象等数据。通过无线数据传输通讯&#xff08;4G、5G、以太网、…

【Unity】简单机甲运动系统——坦克式操控方式

最近两天想做一个人形机甲的游戏&#xff0c;由于本人又是一个拟真军事爱好者&#xff0c;不太喜欢机动特别高的&#xff0c;所以打算参考坦克类游戏来制作一个脚&#xff01;踏&#xff01;实&#xff01;地&#xff01;的机甲游戏 这个运动系统基本实现了逻辑和动画的分离&a…

低代码用户中心的构建与应用

引言 在现代软件开发中&#xff0c;低代码平台因其高效、灵活、用户友好的特性而逐渐受到青睐。特别是在用户中心的构建方面&#xff0c;低代码平台能够显著提升开发效率&#xff0c;降低开发成本。本文将探讨如何利用低代码平台构建一个高效的用户中心&#xff0c;并分享一些…

002:显示DICOM图像(替换掉 vtkImageViewer2 )

VTK 医学图像处理---DICOM图像显示 对第一个DICOM显示例子的展开&#xff08;替换掉vtkImageViewer2类&#xff09; 两个例子实现的效果对比&#xff0c;其中右侧是对第一个例子展开后的显示效果&#xff0c;展示了一个完整的VTK渲染管线的过程。 目录 VTK 医学图像处理---DIC…

神策SDK不支持Windows客户端全埋点,怎么实现用户统计分析?

本文将介绍&#xff0c;ClkLog针对神策不支持全埋点的客户端实现用户访问基础统计分析 1。 客户遇到的问题 ClkLog的用户访问基础统计分析功能是基于神策SDK的全埋点来实现的。 我们遇到有些客户是使用C、C#等语言来开发的客户端&#xff0c;然而神策此类SDK&#xff08;如C, C…

[B站大学]Zotero7教程

参考资料: https://www.bilibili.com/video/BV1PSvUetEQX 2. 账号注册与同步 本节内容参考zotero中文社区文档&#xff1a;https://zotero-chinese.com/user-guide/sync 2.1 数据同步 首先注册一个Zotero官方账户。登录账号密码。 2.2 文件同步 按照文档&#xff0c;推荐…

快消品渠道开发方案,让你拥有源源不断的批发客户!

对于快消品行业来说&#xff0c;优质批发渠道客户&#xff0c;决定了你产品的销量。这篇文章&#xff0c;和大家分享下&#xff0c;如何开发渠道端客户&#xff01; 1、分析目标市场 首先&#xff0c;分析快消品行业的趋势&#xff0c;以及你们的产品&#xff0c;目前市场占有…

Java-线程的生命周期7大状态

在 Java 中&#xff0c;线程的生命周期可以分为多个状态&#xff0c;这些状态描述了线程从创建到终止的整个过程。Java 线程的生命周期主要包括以下七大状态&#xff1a; 1.新建状态&#xff08;New&#xff09; 当一个线程对象被创建但尚未调用 start() 方法时&#xff0c;线…

Apache SeaTunnel Zeta 引擎源码解析(一)Server端的初始化

引入 本系列文章是基于 Apache SeaTunnel 2.3.6版本&#xff0c;围绕Zeta引擎给大家介绍其任务是如何从提交到运行的全流程&#xff0c;希望通过这篇文档&#xff0c;对刚刚上手SeaTunnel的朋友提供一些帮助。 我们整体的文章将会分成三篇&#xff0c;从以下方向给大家介绍&am…

鸿蒙(API 12 Beta6版)图形【使用Drawing实现图形绘制与显示 (C/C++)】方舟2D图形服务

场景介绍 Native Drawing模块提供了一系列的接口用于基本图形和字体的绘制。 Drawing绘制的内容无法直接在屏幕上显示&#xff0c;需要借用XComponent以及Native Window的能力支持&#xff0c;将绘制的内容通过Native Window送显。 接口说明 Drawing常用接口如下表所示。 …

二分查找:手拿把掐!------Java代码实现

“没有天赋,那就不断重复.” 文章目录 前言文章有误敬请斧正 不胜感恩&#xff01;模板一:(最基本的)**左闭右闭:** [left,right] 模板二:**左闭右开区间模板:**区间:左闭右开[left,right): 模板三:开区间模板:(left,right) 循环不变量:二分查找易错点:做题经验:疑问及解答&…

内衣内裤衣机什么牌子好?五款口碑爆棚王炸机型推荐

如今科技是越来越发展了&#xff0c;迷你洗衣机的功能也是越来越强大了&#xff0c;这样小户型的家庭甚是喜爱&#xff0c;不仅解决了清洗衣物的问题&#xff0c;还能让小型洗衣机在家中起到一定的装饰效果。在清洁衣物的污渍的同时&#xff0c;还能有效除去衣物上的各种细菌。…

upload-labs闯关攻略

pass-1 提前准备好的一个PHP木马&#xff0c;然后将后缀名改为jpg上传 然后在上传的过程中利用抓包&#xff0c;将抓取到的包里面的后缀jpg改为php如图所示&#xff0c;然后放行 接着我们去访问上传的图片信息&#xff0c;如下图所示就为成功 pass-2 提前准备好的一个PHP木马…

http连接处理(最新版)

分析http类及请求接收 基础 epoll epoll_create函数 #include <sys/epoll.h> int epoll_create(int size) 创建一个指示epoll内核事件表的文件描述符&#xff0c;该描述符将用作其他epoll系统调用的第一个参数&#xff0c;size不起作用。 epoll_ctl函数 #include …

紫光同创——PLL IP 的使用(Logos2)

本文档主要针对 Logos2 系列的 PLL 配置&#xff0c;至于 Logos 系列的 PLL&#xff0c;可以参考《PLLIP 的使用(Logos)》的文档。 一、PLL IP 介绍 1、PLL 基本配置模式 Basic Configurations PLL IP 是紫光同创基于 PLL 及时钟网络资源设计的 IP&#xff0c;通过不同的参数配…

牛客周赛 Round 58(ABCDF)

目录 A.会赢吗&#xff1f; B.能做到的吧 C.会赢的&#xff01; D.好好好数 F.随机化游戏时间 A.会赢吗&#xff1f; 思路&#xff1a; 签到题&#xff0c;比大小 void solve() {double a,b;cin>>a>>b;if(a>b) cout<<"NO";else cout<&…

ByteTrack多目标跟踪(一)—理论基础

ByteTrack多目标跟踪 算法概述 github: https://github.com/ifzhang/ByteTrack ByteTrack是一种基于Tracking-by-Detection范式的多目标跟踪算法。 先前的多目标追踪算法一般在完成当前帧的目标检测后只会保留置信度比较大的检测框用于进行目标跟踪&#xff0c;比如图中置信度…

思维导图在线制作怎么制作?5个软件教你快速进行思维导图制作

思维导图在线制作怎么制作&#xff1f;5个软件教你快速进行思维导图制作 思维导图是一种用于组织信息、梳理思路和激发创意的可视化工具。在线制作思维导图可以帮助你随时随地进行创作和分享&#xff0c;以下是五款在线思维导图工具&#xff0c;可以帮助你快速进行思维导图的制…

828华为云征文|基于华为云Flexus云服务器X搭建FTP服务器

❀目录 ❀概述❀特点❀环境准备❀安装❀配置文件修改❀创建目录、修改权限❀控制台安全组开启21端口❀工具验证❀总结 ❀概述 FTP文件传输协议是一种在网络中进行文件传输的广泛使用的标准协议。作为网络通信中的基础工具&#xff0c;FTP允许用户通过客户端软件与服务器进行交…