新入手Mac配置前端环境教程

目录

1、安装 Xcode

2、安装 Homebrew

3、安装 Git

4、安装 nvm

利用 nvm 安装 node

Mac系统安装nvm后，nvm命令找不到

---

跳槽新进入一家公司 ，给新配置的 Mac 电脑

那么我们接下来该如何步入正常的前端开发流程呢 ？

在此稍微记录一下 ， 节省时间 ，以防后期再用到 。

1、安装 Xcode ；

2、安装 Homebrew ；

3、安装 Git ；

4、安装 nvm ；

    利用 nvm 安装 node 指定版本 ；

参考文献 ：

1、

【git】在mac上用brew安装并配置git教程

2、Mac 系统使用 Homebrew 安装 nvm

https://www.jianshu.com/p/bdbc51fa8ce6

3、 

MacOS中brew安装完毕后找不到nvm，zsh: command not found:nvm

---

1、安装 Xcode

在 App Store 里下载 ， 此工具会节省你大量时间

（ 耐心等待 ， 十多个 G 呢 ， 估计得下载几个小时 ， 实在不行、可尝试 不下载 ）

---

2、安装 Homebrew

学 Git 需要安装 ，留一个自认为最简单的流程 。

参考 ：

1、
Homebrew国内如何自动安装（国内地址）（Mac & Linux）
2、Git 官方下载
Git - Downloading Package

3、

Git实用教程2：安装Git

参考1、知乎专栏 ，出现问题也可去原网站找原因 。

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

打开 Mac 终端 ，复制 粘贴 回车

之后跟着流程走就行 => 下载感觉也挺慢的 ， 不要急哦 ～

安装成功后自行检查一下 ： brew -v

这里需要按照提示运行一下 ：

git config --global --add safe.directory /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core

git config --global --add safe.directory /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask

至此 ， brew 就算完全安装成功啦 ～

---

3、安装 Git

brew install git

安装成功如下

ps：如果安装过 Xcode 可以试试

sudo apt-get install git

---

4、安装 nvm

1、nvm 介绍

当我们使用 node 开发网站时 ，可能会同时需要运行多个项目 ，

每个项目所使用的 node 版本又不相同 ，

或者当我们需要学习新的 node 时 ，多个版本之间的切换和维护会变得非常麻烦和棘手 。

nvm 的出现就是为了解决这个问题 。

详细介绍请看  nvm官网

2、安装 nvm

此处选择 Mac 系统自带的 Homebrew 安装 nvm 。
Homebrew 是一款 Mac OS 平台下的软件包管理工具 ，

拥有 安装、卸载、更新、查看、搜索 等很多实用的功能 。

简单的一条指令 ，就可以实现包管理 ，而不用你关心各种依赖和文件路径的情况 ，十分方便快捷 。简单来说 ，Homebrew 提供 Apple 没有预装但你需要的东西 。

详情请见   Homebrew官网

2.1、安装 Homebrew（ 如已经安装 Homebrew ，直接进行跳到 2.2 ）

检查电脑是否有安装 Homebrew ，打开终端输入 ：

brew -v

如果出现版本号 ，则表示已安装 Homebrew ，如果提示 ：

-bash: brew: command not found

则表示未安装 Homebrew ，需要先安装 Homebrew 。将以下命令复制到终端执行 ：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

等待完成之后，再次输入： brew -v ， 得到版本号 ，表示 Homebrew 安装完成

2.2、使用 Homebrew 安装 nvm

如果已经安装 Homebrew ，那么直接在终端输入命令 ：

brew install nvm

回车之后即可进行安装，安装成功提示：

==> Summary
🍺 /usr/local/Cellar/nvm/0.33.11: 7 files, 138.6KB, built in 13 seconds

安装成功之后 ，还不能直接使用 nvm 命令 ，需要进行以下配置 ，

将以下命令复制到终端执行 ： 

echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

修改之后，需要重新定向来源，复制以下命令并执行：

. ~/.bash_profile

此时在终端输入：

nvm list

即可查看当前电脑中安装的 node 版本 ，如果未曾安装 node ，则显示为空 。
接下来就可以使用 nvm 来安装和管理 node 版本了 。

---

nvm 常用命令介绍

1. nvm list 是查找本电脑上所有的node版本
    - nvm list 查看已经安装的版本
    - nvm list installed 查看已经安装的版本
    - nvm list available 查看网络可以安装的版本
2. nvm install <version> 安装指定版本node
3. nvm use <version> 切换使用指定的版本node
4. nvm ls 列出所有版本
5. nvm current显示当前版本
6. nvm alias <name> <version> ## 给不同的版本号添加别名
7. nvm unalias <name> ## 删除已定义的别名
8. nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包
9. nvm on 打开nodejs控制
10. nvm off 关闭nodejs控制
11. nvm proxy 查看设置与代理
12. nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/
nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.
13. nvm uninstall <version> 卸载制定的版本
14. nvm use [version] [arch] 切换制定的node版本和位数
15. nvm root [path] 设置和查看root路径
16. nvm -v / nvm --version 查看当前的版本

---

利用 nvm 安装 node

# 最新稳定版本 （ 最新尝鲜版 ）
nvm install stable

Node.js

# 长期维护版本 （ 推荐下载 ）
nvm install 16.18.0

---

Bug 复现 ：

Mac系统安装nvm后，nvm命令找不到

第二天打开终端再次检查昨天安装的东西是否还 “ 健在 ” ， 结果有的就没了 。。

 那没办法 ， 就 只能再想办法解决了 ：

1、启动终端 Terminal

2、进入当前用户的 home 目录

cd ~

3、创建 .bash_profile 文件

touch ～/.bash_profile

4、编辑 .bash_profile 文件

open -e .bash_profile

5、在 ~/.bash_profile 添加两行 :

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh 

6、保存文件 command + S ，关闭 .bash_profile

7、更新刚配置的 环境变量

source .bash_profile	

8、验证是否成功

echo $NVM_DIR

OK , 解决 ～

但是发现关闭终端后 ， 再次打开还是老毛病 ， nvm / node 啥的就找不到了 ，

nvm: command not found

很不幸，我跟着网上的 N 篇教程，下载完毕之后试过大家给出的 N 种方法，

包括什么重启终端、在 nvm 文件夹里也复制一份 .bash_profile 文件、

手动修改配置文件啥啥啥的，结果还是提示 nvm: command not found 。

后来找到原因就是说 ：

运行 source ~/.bash_profile 之后会生效，但是只生效一次。

后来总算找到解决方法，大致是因为我的系统是最新更新的 macOS Catalina 系统，默认的 shell 是 zsh，所以找不到配置文件啥的。

解决方法如下：

open ~/.zshrc

 

 export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

Nice ～ ， 真正解决了 ！！