万事开头难，环境的搭建可能会遇到很多的问题。但是你不要担心，仔细看控制台提供给你的报错信息，善用搜索引擎，程序员的第一步就是搭建一个开发环境，你可以的。

终端

terminal，中文翻译为终端，大部分时间我们都使用终端来搭建环境。

所以我们先认识一下终端。

  1. command + 空格
  2. 在聚焦搜索中输入 terminal
  3. 回车，打开终端

image.png

拓展资料：

命令

命令名 功能描述 使用示例
pwd 显示当前目录路径 pwd
ls 显示当前目录中的内容 ls
cd 改变当前目录 cd dirname

还有几个地方：
~ 代表着用户的根目录

  1. pwd
  2. # 我们假设输入 pwd 之后，显示出 username/lab 这个路径
  3. cd ~
  4. # ~ 代表着用户的根目录，这里的意思就是跳转到用户的根目录下
  5. pwd
  6. # 因此这一次显示的路径就是，username

. 代表这当前路径，.. 代表着上一层路径

  1. ls .
  2. # 显示当前路径下的内容
  4. ls ..
  5. # 显示当前路径的上一层中的内容

关于终端中的命令还有很多，终端的知识也不止这一点点，不过对于我们搭建环境来说，这些已经够用了。

切换 zsh

在老的 MacBook 中 bash 是默认的 shell。不过新款的 MacBook 都已经将默认的 shell 切换为 zsh 了，而本文所使用的 shell 是 zsh。因此，我们需要将 bash 切换为 zsh。

  1. # 通过命令查看当前使用的 shell
  2. echo $SHELL
  4. # 如果终端上打印的结果是 /bin/zsh 那就意味着你不需要切换，因为你已经是 zsh 了
  6. chsh -s /bin/zsh

image.png

Xcode command tool

接下来，我们安装 Xcode 命令行工具。

后面有很多操作，都会用到 Xcode 命令行工具，因此我们优先安装。

在终端中，运行下面的命令

  1. xcode-select --install

然后会自动的跳出下面的弹窗，点击安装。
image.png
等待安装
image.png

完成安装！

怎么样，是不是很简单，你已经迈出了第一步了。

如果你没有成功，不要灰心，这不是你的问题，这是网络的问题，你可以选择不通过命令行下载

image.png
👉 官网链接

兴趣链接：Mac OS X中安装命令行工具Command Line Tools（无Xcode)

Homebrew

image.png

这是macOS上的包管理器，本文仅仅介绍搭建环境，因此不会对homebrew作介绍。

经过我多次的实践，发现安装 homebrew 最佳的方法就是站在巨人的肩膀上（不要自己瞎折腾）。

由于国内网络的问题，你需要花费大量的时间去做安装 homebrew 的前置操作。

而国内有大佬，提供的一个简单解决方案。

在你的终端中运行下面的命令：

  1. /bin/bash -c "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install.sh)"

然后根据提示，输入你的密码
image.png

然后根据提示，回车，等待 homebrew 的安装。
image.png

这样就安装成功啦~

如果有问题，不要灰心，十有八九是网络问题，根据对应的提示，Google解决！

关于安装 homebrew 命令的官网：链接 作者知乎：链接

Wget

Wget 是一个下载文件的工具。我们可以使用 homebrew 来安装 Wget。

  1. brew install wget

image.png

Git

git是不需要自己安装的，macOS已经帮我们内置好了 git 。我们可以试一试

  1. git --version

image.png

不过 git 的版本相对来说会老一下，因此你可以通过 homebrew 来更新 git

  1. brew install git

怎么样，是不是很爽，直接用 homebrew 更新。

重启终端之后，你就可以查看到最新的版本
image.png

Node.js 与 npm

npm 官方推荐我们通过 nvm 来安装 Node.js（Node.js 内置了 npm）。

如果我们去使用 Node.js 官网上提供的安装包，那么很有可能在使用 npm 安装包的时候出现权限错误。

因此，我们先下载 nvm。

安装 nvm

由于网络问题，通过 nvm 官网提供的安装脚本很有可能安装失败，因此我推荐你手动的安装 nvm。

  1. 在命令行中输入如下命令：

    1. export NVM_DIR="$HOME/.nvm" && (
    2. git clone https://github.com/nvm-sh/nvm.git "$NVM_DIR"
    3. cd "$NVM_DIR"
    4. git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
    5. ) && \. "$NVM_DIR/nvm.sh"

  2. 在 ~/.zshrc 中 添加如下代码： ```shell

    在 zsh 配置文件中配置 nvm， 如果没有下面代码，nvm 将无法在启动 zsh 时工作

export NVM_DIR=”$HOME/.nvm” [ -s “$NVM_DIR/nvm.sh” ] && . “$NVM_DIR/nvm.sh” # This loads nvm

  1. 如果在用户目录（也就是默认目录）上并没有  `~/.zshrc` ，那么你需要创建这个文件：
  2. ```shell
  3. touch .zshrc

然后再把代码粘贴进去，保存，重启终端，输入如下命令检查 nvm 版本：

  1. nvm -v

image.png
如果终端中出现了一串类似于版本号的数字，那么恭喜你安装成功了~

使用nvm安装 node.js

在控制台中运行下面的命令：

  1. nvm install 12
  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2451693/1620048935076-0abf9033-2f5f-4cb7-bdf2-36a72c5a49fe.png#height=258&id=ua841c37f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=516&originWidth=1132&originalType=binary&ratio=1&size=156340&status=done&style=stroke&width=566)

注意：

  • nvm install node 下载的是最新版本的 node，不建议用最新的
  • nvm install 12 这里的 12 指的是版本号，建议使用偶数版本，奇数版本是非稳定版本

当你安装完 node 之后，npm也就跟着安装好了。

你可以使用 npm --version 命令来看看 npm 的版本。

安装 nrm

由于 npm 官方的服务器远在国外，从官方的源上下载包十分的十分的缓慢，因此我们需要使用一些镜像的源。我推荐使用淘宝的镜像源。

  1. npm config set registry https://registry.npm.taobao.org

如果你需要上传自己写的包到 npm 的需求，或者是公司有自己私有的源，而你需要切换源。那么你可以使用 nrm 来管理你的源。

nrm 内置了几种常用的源，也允许用户自己添加源，并且提供了方便使用的命令行工具进行切换。

在命令行中输入如下命令安装 nrm ：

  1. npm install -g nrm

image.png

我们使用以下命令切换源

  1. # 切换淘宝源
  2. nrm use taobao
  4. # 切换 npm 
  5. nrm use npm

配置终端（非必须）

oh my zsh

如果在安装完 oh my zsh 之后，你的 nvm 用不了。不要慌，这是因为 zsh 在安装的时候覆盖了原来 zsh 的配置文件，这个时候你再去将配置写进 zsh 配置文件（.zshrc）就行了。

Oh My Zsh是基于zsh命令行的一个扩展工具集，提供了丰富的扩展功能。
image.png

官网链接

官网给出了两种安装方式：

通过 curl 安装

  1. sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

通过 wget 安装

  1. sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

手动安装

一般是遇到了网络问题才手动安装。

  1. 在终端中输入下面命令，将仓库下载到本地的默认文件夹（~/.oh-my-zsh）

    1. git clone https://github.com/ohmyzsh/ohmyzsh.git ~/.oh-my-zsh

  2. （可选）备份 ~/.zshrc 文件

    1. cp ~/.zshrc ~/.zshrc.orig

  3. 创造一个新的 zsh 配置文件

（推荐直接用下面的命令）你可以通过复制我们内置给你的配置文件作为你的 zsh 配置

  1. cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc
  1. 修改你默认的 shell
    1. # 如果你没修改过配置，zsh默认的位置就是 /bin/zsh
    2. # chsh -s $(which zsh)
    3. chsh -s /bin/zsh

    权限问题

当你安装完成之后，终端可能会提示你权限问题，这个提示在你每一次打开终端的时候都会出现。

  1. [oh-my-zsh] Insecure completion-dependent directories detected:
  2. drwxrwxrwx 7 hans admin 238 2 9 10:13 /usr/local/share/zsh
  3. drwxrwxrwx 6 hans admin 204 10 1 2017 /usr/local/share/zsh/site-functions
  5. [oh-my-zsh] For safety, we will not load completions from these directories until
  6. [oh-my-zsh] you fix their permissions and ownership and restart zsh.
  7. [oh-my-zsh] See the above list for directories with group or other writability.
  9. [oh-my-zsh] To fix your permissions you can do so by disabling
  10. [oh-my-zsh] the write permission of "group" and "others" and making sure that the
  11. [oh-my-zsh] owner of these directories is either root or your current user.
  12. [oh-my-zsh] The following command may help:
  13. [oh-my-zsh] compaudit | xargs chmod g-w,o-w
  15. [oh-my-zsh] If the above didn't help or you want to skip the verification of
  16. [oh-my-zsh] insecure directories you can set the variable ZSH_DISABLE_COMPFIX to
  17. [oh-my-zsh] "true" before oh-my-zsh is sourced in your zshrc file.

解决方法：

  1. chmod 755 /usr/local/share/zsh
  2. chmod 755 /usr/local/share/zsh/site-functions

来源：https://github.com/ohmyzsh/ohmyzsh/issues/6835

配置代理

…待补充