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.mzph.cn/diannao/53236.shtml

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

相关文章

【学习AI-相关路程-工具使用-自我学习-jetson模型训练-图片识别-使用模型检测图片-基础样例 (5)】

【学习AI-相关路程-工具使用-自我学习-jetson&模型训练-图片识别-使用模型检测图片-基础样例 (5)】 1 -前言2 -环境说明3 -先行了解(1)整理流程了解(2)了解模型-MobileNet1、MobileNetV2 的主要特性&am…

python源码 PBOCMaster MAC的计算函数及计算过程 2des

注意最后一步要用整个key加密 计算过程: MAC: PBOC-MAC DES算法 密钥 长度16(0x10)字节 57 75 20 4D 69 61 6F 6A 75 6E 40 47 26 44 43 11 初始向量 长度8(0x08)字节 00 00 00 00 00 00 00 00 数据 长度74(0x4A)字节 43 48 45 4E 48 41 4F 2D 50 43 7…

MSP430F149实现1.8寸TFT_LCD真彩屏显示

目录 一、功能实现 二、设备准备 三、接线表设计 四、代码实现 五、实现效果 六、代码链接 一、功能实现 实现1.8寸TFT_LCD真彩屏显示。显示数字、图片、字符串等。 二、设备准备 1.TFT_LCD真彩屏(1.8寸) 该真彩屏使用SPI通信。 2.MSP430F149开…

微服务CI/CD实践(五)Jenkins Docker 自动化构建部署Node服务

微服务CI/CD实践系列: 微服务CI/CD实践(一)环境准备及虚拟机创建 微服务CI/CD实践(二)服务器先决准备 微服务CI/CD实践(三)gitlab部署及nexus3部署 微服务CI/CD实践(四&#xff09…

穿越机的应用行业!!!

1. 军事领域 侦察与目标搜索:穿越机能够快速穿越危险区域,执行侦察任务,实时获取战场信息,对敌方目标进行精确搜索和定位。其灵活性和机动性使其成为战场上的重要侦察工具。 目标摧毁:经过改装的穿越机可挂载火箭弹或…

华三防火墙第-安全策略02

一 安全策略的图解 安全策略是一种根据报文的属性信息对报文进行精细化转发控制的智能安全防护措施。它 融合了多维度精确报文识别、深度报文检测、安全动作执行、智能策略分析、应用风险调 优等多种安全防护功能,为网络的安全性提供全方位保障。 安全策略运行原理 安全策略对…

CSS实现文字环绕圆形展示

展示区域 代码区域 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…

ubuntu20.04搭建kubernetes1.28.13集群配置calico网络插件

写在前面 这里是我在搭建过程中从某站找到的教学视频,搭载的都是最新的,大家可以参考一下 搭建kubernetes集群学习视频: 视频链接。最后面会有我遇见报错信息的所有连接和解决方案,自行查看 不说废话,直接开搭 搭建集群大纲 一、三台虚拟机的初始化 二、三台虚拟机连接…

VTK平面切割

文章目录 一、vtkClipPolyData二、CapClip三、SolidClip四、vtkClipClosedSurface 本文的主要内容&#xff1a;简单介绍VTK中通过平面切割模型的相关功能。 哪些人适合阅读本文&#xff1a;有一定VTK基础的人。 一、vtkClipPolyData VTK官网描述&#xff1a; vtkClipPolyData使…

一个平台重要的规则改了!

大家好&#xff0c;我是凡人小哥。 是一个不黑、不吹、不跟风、有知识、有骨气的五好小号主。 现在是凌晨1点13分&#xff0c;就在昨天微信公众平台又又又调整了&#xff0c;可能朋友们还在想是不是又要严格了&#xff1f;这次恰恰相反&#xff0c;腾讯把注册微信公众号的门槛…

【Linux网络编程八】实现最简单Http服务器(基于Tcp套接字)

基于TCP套接字实现一个最简单的Http服务器 Ⅰ.Http请求和响应格式1.请求格式2.响应格式3.http中请求格式中细节字段4.http中响应格式中细节字段 Ⅱ.域名ip与URLⅢ.web根目录Ⅳ.Http服务器是如何工作的&#xff1f;一.获取请求二.分析请求2.1反序列化2.2解析url 三.构建响应3.1构…

RK3588开发板利用udp发送和接收数据

目录 1 send.cpp 2 receive.cpp 3 编译运行 4 测试 1 send.cpp #include <iostream> #include <string> #include <cstring> #include <unistd.h> #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> //…

海外合规|新加坡网络安全认证计划简介(三)-Cyber Trust

一、 认证简介&#xff1a; Cyber Trust标志是针对数字化业务运营更为广泛的组织的网络安全认证。该标志针对的是规模较大或数字化程度较高的组织&#xff0c;因为这些组织可能具有更高的风险水平&#xff0c;需要他们投资专业知识和资源来管理和保护其 IT 基础设施和系统。Cy…

开源 AI 智能名片 O2O 商城小程序:引入淘汰机制,激发社交电商新活力

摘要&#xff1a;本文深入探讨在社交电商领域中&#xff0c;开源 AI 智能名片 O2O 商城小程序如何通过设置淘汰机制&#xff0c;实现“良币驱逐劣币”&#xff0c;激励士气&#xff0c;为社交电商企业注入新的活力。通过分析缺乏淘汰机制的弊端以及设置淘汰机制的优势&#xff…

CAAC无人机飞行执照理论培训课程详解

CAAC&#xff08;中国民用航空局&#xff09;无人机飞行执照的理论培训课程是确保无人机飞手全面掌握飞行和应用技能的重要环节。以下是对该理论培训课程的详细解析&#xff1a; 一、课程目标 理论培训课程的主要目标是使学员&#xff1a; 了解并掌握无人机相关的法律法规、…

Java基于微信小程序的家庭财务管理系统,附源码

博主介绍&#xff1a;✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不…

EmguCV学习笔记 VB.Net 8.4 pyrMeanShiftFiltering

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

Java项目:137 springboot基于springboot的智能家居系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本基于Springboot的智能家居系统提供管理员、用户两种角色的服务。 总的功能个人中心、基础数据管理、家具管理、任务管理和用户管理。本系统…

显微镜基础知识--脑机起步

一、显微镜类别 学生级、实验级、研究级生物显微镜单目型、双目型、三目型生物显微镜 二、显微镜基础原理 &#xff08;1&#xff09;光学显微镜 光学显微镜主要由目镜、物镜、载物台和反光镜(集光镜)组成。目镜和物镜都是凸透镜&#xff0c;焦距不同。物镜的凸透镜焦距小于…

Web攻防之应急响应(二)

目录 前提 &#x1f354;学习Java内存马前置知识 内存马 内存马的介绍 内存马的类型众多 内存马的存在形式 Java web的基础知识&#xff1a; Java内存马的排查思路&#xff1a; &#x1f354;开始查杀之前的需要准备 1.登录主机启动服务器 2.生成jsp马并连接成功 …