MACOS安装配置前端开发环境

news2024/9/25 3:26:40

官网下载安装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.coloradmin.cn/o/2093370.html

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

相关文章

【Python 千题 —— 基础篇】评论倾向分析

Python 千题持续更新中 …… 脑图地址 👉:⭐https://twilight-fanyi.gitee.io/mind-map/Python千题.html⭐ 题目描述 在某个电商平台的评论系统中,用户可以提交商品评论。为了分析评论的情感倾向,我们需要编写一个程序来处理用户评论,并对评论内容进行简单的分析和处理。…

在java中如何使用etcd的v2 和v3 api获取配置,并且对配置的变化进行监控和监听

etcd 和zookeeper 很像,都可以用来做配置管理。并且etcd可以在目前流行的Kubernetes中使用。 但是etcd 提供了v2版本合v3的版本的两种api。我们现在分别来介绍一下这两个版本api的使用。 一、Etcd V2版本API 1、java工程中使用maven引入 etcd v2的java api操作ja…

Pytorch实现自然风光图像场景分类识别(含训练代码和数据集)

Pytorch实现自然风光图像场景分类识别(含训练代码和数据集) 目录 Pytorch实现自然风光图像场景分类识别(含训练代码和数据集) 1. 前言 2. 自然风光图像场景分类数据集 (1)自然风光图像场景分类数据集 (2)自定义数据集 3. 自…

震惊!更换GPU会改变LLM的行为

文章目录 新发现前言1. Why this article ?2. Setup the experimentation3. The experiment results:A100/A10/30904. Why is it different?5. Why do the calculation differ depending on the GPU ?结论 新发现 最近在做RAG相关的工作,偶然间发现&a…

swift自定义数据集微调Qwen-7B大模型,转换模型后使用ollama跑起来

前文:swift微调Qwen-7B大模型-CSDN博客 我详细介绍了swift如何进行微调,但数据集均来自魔搭社区,如何想训练自定义数据集,实际上也很简单。 一、自定义数据集微调 export MKL_THREADING_LAYERGNU \ CUDA_VISIBLE_DEVICES0,1,2…

STM32:TIM定时中断配置的最全库函数讲解笔记

声明:本博客为哔哩哔哩up主江协科技 “STM32入门教程”的听课笔记,仅供学习、参考使用,不得用作其他用途,违者必究。如有版权问题,请联系作者修改。 目录 一、综述 二、TIM库 初始化 2.1、TIM_DeInit 恢复缺省值 …

经典文献阅读之--ParkingE2E(基于摄像头的端到端停车网络:从图像到规划)

0. 简介 自动泊车是智能驾驶领域的一项关键任务。传统泊车算法通常采用基于规则的方案来实现。然而,由于算法设计的复杂性,这些方法在复杂的泊车场景中效果欠佳。相比之下,基于神经网络的方法往往比基于规则的方法更加直观且功能多样。通过收…

中国的铁路订票系统在世界上属于什么水平?

每到节假日,中国的铁路订票系统总会成为人们热议的焦点。无论是“抢票大战”还是“秒杀特价票”,这一系统似乎总是牵动着亿万乘客的心。那么,中国的铁路订票系统到底有多强大?在全球范围内,它处于什么水平?…

Java_ElasticSearch(ES)——分布式搜索引擎

介绍: Elasticsearch是一个开源的分布式搜索和分析引擎,最初由Elastic公司开发。它构建在Apache Lucene搜索引擎库之上,提供了一个强大的全文搜索和分析引擎, 它结合kibana、Logstash、Beats,是一整套技术栈&#xff0…

C语言——简单的do while循环找100~999之间的水仙花数(所有的三位水仙花数)

这道题的关键是如何把这个三位数的个位、十位、百位表示出来 这里用到了 / &#xff08;整除&#xff09;和 % &#xff08;取余&#xff09;这两个运算符 #include<stdio.h> int main() { int num 100; do { int a; int b; int …

手把手教你:用sentence-transformers库进行文本嵌入

在 Python 中使用 sentence-transformers 库进行实操&#xff0c;你可以按照以下步骤进行&#xff1a; 1. 安装 sentence-transformers 库 首先&#xff0c;确保你已经安装了 sentence-transformers。如果没有&#xff0c;可以通过 pip 安装&#xff1a; pip install sentenc…

图像去噪评论:从经典到最先进的方法

系列文章目录 文章目录 系列文章目录前言摘要1 引言1.1.噪声抑制 2. 空间域过滤2.1.局部滤波器2.2.非局部滤波器 3.变换域滤波3.1.阈值3.1.1. 通用阈值3.1.2. VISUShrink3.1.3.SURE收缩3.1.4.BayesShrink3.1.5.概率收缩3.1.6.SURELET3.1.7.Neigh Shrink Sure&#xff08;NSS&am…

十一头像红旗怎么弄的?3个方法轻松教会你!

国庆佳节渐行渐至&#xff0c;朋友圈里早已掀起了一股更换国庆主题头像的热潮&#xff01;那些五彩斑斓、光彩夺目的渐变国旗头像&#xff0c;既美观又富有节日气氛。如果你也想加入这个行列&#xff0c;那么如何动手制作呢&#xff1f;别担心&#xff0c;接下来我将为你介绍三…

求解组合优化问题的具有递归特征的无监督图神经网络

文章目录 ABSTRACT1 Introduction2 Related Work3 QRF-GNN方法4 数值实验4.1 MAX-CUTABSTRACT 介绍了一种名为QRF-GNN的新型算法,有效解决具有二次无约束二进制优化(QUBO)表述的组合问题。依赖无监督学习,从最小化的QUBO放松导出的损失函数。该架构的关键组成部分是中间GNN…

服务端之Node的QQ邮件发送功能、授权码申请流程、邮箱、createTransport、sendMail

MENU 前言邮箱授权码的申请流程Node连续发送邮件失败的原因 前言 1、代码段的主要功能是通过nodemailer模块从一个QQ邮箱发送电子邮件。 2、代码段实现从QQ邮箱1283077926qq.com发送一封邮件到2506562048qq.com&#xff0c;邮件主题为“微信公众号推广”&#xff0c;正文为“亲…

Docker私有镜像仓库Harbor安装并推拉镜像

1.环境信息 前置要求&#xff1a; linux&#xff1a;Oracle Linux Server release 7.9 docker&#xff1a;26.1.4 安装&#xff1a; docker-compose: Docker Compose version v2.29.2 harbor&#xff1a;v2.11.1 2.下载安装说明 docker-compose下载&#xff1a; https://githu…

Vue(八) localStorage、组件的自定义事件、Todo案例修改

文章目录 一、浏览器本地存储1. 相关API2. Todo案例中的应用 二、组件的自定义事件1. 回顾props传值方式2. 绑定自定义事件&#xff08;1&#xff09;方式一&#xff1a;v-on或&#xff08;2&#xff09;方式二&#xff1a; ref 3. 解绑自定义事件4. 注意点总结 三、Todo案例采…

【机器学习】在 scikit-learn 中,有哪些特征编码方法?分布详细举例列出

一、在scikit-learn中&#xff0c;有多种特征编码方法可以用来处理分类数据&#xff0c;以下是一些常见的编码方法及其示例&#xff1a; One-Hot Encoding (独热编码): 使用 OneHotEncoder 类将分类特征转换为二进制向量。例如&#xff0c;对于颜色特征 [red, blue, green]&…

day01项目概述、环境搭建

1 软件开发整体介绍 软件开发流程 角色分工 软件环境 2 苍穹外卖项目介绍 项目介绍 产品原型 技术选型 3 开发环境搭建 前端环境搭建 注意&#xff1a; - Nginx目录必须放在没有中文的目录中才能正常运行 - 当前Nginx的配置文件中已经配置了反向代理&#xff0c;通过此配置…

面试SQL题的水到底有多深?一文带你揭晓

不谋万世者&#xff0c;不足谋一时&#xff1b;不谋全局者&#xff0c;不足谋一域 目录 0 面试现状 1 面试SQL题目的难度及特点 1.1 题目场景化 1.2 题目算法化 1.3 方法多元化 2 破局之道 3 总结 数字化建设通关指南 主要内容&#xff1a; &#xff08;1&#xff09;SQL进阶实…