MACOS安装配置前端开发环境

embedded/2024/9/24 21:17:25/

官网下载安装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.ppmy.cn/embedded/105795.html

相关文章

赛码网牛客在acm模式下利用node.js处理多行输入方法

赛码网在JS Node的语言下,acm模式的默认标准输入输出代码是这样的: const readline require(readline);const rl readline.createInterface({input: process.stdin,output: process.stdout }); rl.on(line, function (line) {const tokens line.spli…

动态IP会被共享吗?

在探讨“动态IP是否会被共享”这一问题时,我们首先需要明确几个核心概念,包括动态IP、静态IP以及IP共享的基本概念。 动态IP与静态IP 动态IP(Dynamic IP)与静态IP(Static IP)是两种常见的IP地址分配方式。…

Excel中让第一行始终显示

要在Excel中让第一行始终显示,你可以使用冻结窗格功能。具体步骤如下: 打开需要设置第一行一直显示的工作表。将光标定位在工作表内任意一个单元格内。选择“视图”菜单,单击工具栏中的“冻结窗格”命令。在弹出的下拉菜单中选择“冻结首行”…

2024自动化测试面试真题(附答案)!

一、编程语法题 1 、 python 有哪些数据类型 python 数据类型有很多,基本数据类型有整型(数字)、字符串、元组、列表、字典和布尔类型等 2 、怎么将两个字典合并 调用字典的 update 方法,合并 2 个字典。 3 、 json.l python 如…

QNN:基于QNN+example重构之后的yolov8det部署

QNN是高通发布的神经网络推理引擎,是SNPE的升级版,其主要功能是: 完成从Pytorch/TensorFlow/Keras/Onnx等神经网络框架到高通计算平台的模型转换; 完成模型的低比特量化(int8),使其能够运行在高…

【日常记录-Linux】.tar.xz、.tar.bz2、tar.gz解压

Author:赵志乾 Date:2024-08-30 Declaration:All Right Reserved!!! 1. 简介 Linux平台下,常见.tar.xz、.tar.bz2、.tar.gz等类型的压缩包。 2. 解压缩说明 2.1 .tar.xz解压缩 .tar.xz压缩包表…

Vue 组件自定义插槽:实现灵活的内容分发

在 Vue.js 中,插槽(Slot)是一种特殊的语法,允许你在组件内部预留一些位置,以便在使用组件时插入自定义内容。自定义插槽为组件的复用和扩展提供了极大的灵活性。本文将介绍 Vue 组件自定义插槽的概念、用法及实际应用案…

c++开源库安装

Linux常用库安装 本项目包含: (1)开源库:libboostlibcurlhiredisjsoncpplog4cplus (2)数据库:mysqlredis (3)应用:nginxgithub地址:https://git…