当前位置: 首页 > article >正文

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

核心组件: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.kler.cn/a/470220.html

相关文章:

  • 【three.js】搭建环境
  • MySQL的三大日志
  • 学英语学压测:02jmeter组件-测试计划和线程组ramp-up参数的作用
  • Linux 基础七 内存
  • Rust中的Option枚举快速入门
  • 代码段中使用数据、栈
  • 大语言模型提示技巧(四)-文本概括
  • 微服务保护——Sentinel
  • 『SQLite』几种向表中插入数据的方法
  • 定时任务特辑 Quartz、xxl-job、elastic-job、Cron四个定时任务框架对比,和Spring Boot集成实战
  • 鲸品堂2024:技术破局与业务焕新的锐变年鉴
  • go语言调用s3接口通过rgw节点创建ceph用户
  • 聚焦“主动医学”新路径 助力科技与医疗深度融合
  • 【数据结构与算法:八、排序】
  • HackMyVM-Alive靶机的测试报告
  • 通过shell脚本定时采集数据到HDFS
  • 深度学习,训练集准确率高,但验证集准确率一直不上升,很低的问题
  • 【人工智能中的数据科学与数据处理】——详解人工智能中的数据科学与数据处理之数据可视化技巧
  • 算法:两个升序单链表的合并
  • 起重机检测数据集VOC+YOLO格式2316张1类别
  • Adaboost:基于弱学习器组合实现强大性能提升的集成学习方法解析
  • 密码学基本理论
  • YOLOV8涨点之多尺度注意力融合(MAF)模块
  • 【异常解决】Unable to start embedded Tomcat Nacos 启动报错
  • 番外篇-CSS3新增特性
  • Nginx:反向代理