新macOS用户配置前端开发环境

最新推荐文章于 2025-06-05 12:04:40 发布

沐杍

最新推荐文章于 2025-06-05 12:04:40 发布

阅读量3.4k

点赞数 47

CC 4.0 BY-SA版权

文章标签： macos

本文链接：https://blog.youkuaiyun.com/Passerby_ldr/article/details/139381570

作为第一次使用Mac的用户，还是做前端开发的，必不可少的是要安装相关的软件以及配置相关的前端开发环境，下面是我根据网上找的资料和自己配置后总结出来的步骤：

一、软件的安装

首先安装vscode：Visual Studio Code - Code Editing. Redefined

进入官网后点击右上角的download，然后选中自己要下载的zip文件：

这里需要注意的是，目前官网上的 Mac zip 下载会有三个选项：

Intel chip：适用于 Intel 芯片
Apple silicon：适用于 M 系列芯片
Universal：同时适用于 Intel 和 M 系列芯片

建议下载对应的就好，没必要下载 Universal，能节省一点空间，因为我的电脑是M系列的，所以在这里下载的是 Apple silicon的文件。

然后下载平时常用的Chrome浏览器：Google Chrome 网络浏览器

二、环境配置

首先是安装nodejs，推荐使用nvm（nodejs版本管理器）：先去https://github.com找到nvm，然后点击去，向下滑

复制以下其中一条命令

使用curl或wget命令来下载并运行安装脚本

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

或

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

打开的终端（注意，打开后先看一下你的终端上面默认的Shell类型是Bash还是zsh），以curl为例，在终端执行curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash 命令。如果第一次访问的话，由于国内的网站无法正常访问，需要先进行一些相关配置：在网址GitHub - 521xueweihan/GitHub520: :kissing_heart: 让你“爱”上 GitHub，解决访问时图裂、加载慢的问题。（无需安装）

中下滑，找到下面的内容并进行复制：

然后在终端执行指令：

sudo vi /etc/hosts

然后输入你的开机密码，注意：输入密码的时候是不显示在终端上面的，你输入密码后直接回车就可以了。

将光标移到最后，即localhost后。按下i键，进入编辑模式；然后command+v 粘贴之前复制的内容；接着按下esc键，退出编辑模式；最后，按出 :wq，回车保存并退出。

关掉终端，重新打开，输入查看指令：

cat /etc/hosts

查看是否配置成功，配置成功后，可以直接执行清屏指令：clear，

然后在重新试一下之前安装的脚本：

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

这个步骤如果没执行成功可以多执行几次，有些需要多执行几次才成功。

我这里执行后显示的是这么一串东西，

是因为我之前没有安装xcode，这里可以安装一下，执行一下这里面提示的xcode-select -- install 即可。

安装完后，继续执行一下指令：

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

执行完成后，会出现这样的提示：

复制上面圈出来的提示，或者以下指令：

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

然后在终端执行指令：

bash环境：

vi ~/.bashrc

zsh 环境：

vi ~/.zshrc

回车后，按下i键，进入编辑模式；然后command+v 粘贴之前复制的内容；接着按下esc键，退出编辑模式；最后，按出 :wq，回车保存并退出。

配置好后，进行环境变量的加载，执行加载指令：

bash环境：

source ~/.bashrc

zsh环境：

source ~/.zshrc

此时终端执行： nvm，终端显示有对应信息则nvm安装完成。

然后，执行指令：

nvm ls-remote

可以查看到远端的一些nodejs版本，版本中绿色字体的是长期维护的版本。

比如说需要用到的是版本v18.20.3，就执行：

nvm install v18.20.3


nvm install v16.20.2

然后执行指令查看node版本

node -v

如果你还可能需要v16.20.2版本，，同上依次执行：

v16.20.2

node -v

对于多个node版本之间的切换，可进行以下操作：前面的终端关闭后，执行指令：

nvm ls

此时默认版本如果不是你想要的版本号，可以执行：

nvm

执行指令： nvm alias default XXX （XXX：表示你需要切换的版本号，注意，这个切换的版本是你已经安装的版本，像我这里，只安装了18和16的版本）

到这一步，前端开发的配置就大致完成啦～