Mac 前端环境配置

Wooc
763 阅读5分钟

前言

Q3季度去上海出差的时候，我的 Mac（M1）因为升级了系统就直接卡死了，公司 IT 老哥跟我说只能重装系统并且无法拿到本地文件，我当时挺难受的😣，因为我的很多文档都是记录在本地的 Typora 中的，还有一些笔记之类的东西。

所以我的笔记要靠回忆一点点复原，环境要重新安装，虽然所有的东西都是轻车熟路，但还是要一步一步的去查某个工具的安装方法，还是有些繁琐的😔，所以在我重新安装的时候我就记录了一下大致的安装过程和相对应的网址，方便下次出问题的时候方便使用

还有一个建议，最好不要把重要的东西放在本地，一定要存放在云端，或者可以想我一样，存储在 Github 上。众所周知，Github 是一个网盘😊

Mac 前端环境配置

Homebrew

官网：brew.sh/

首先要下载的就是 Homebrew Mac 的包管理器🐮，必备但不自带，我称之为神器。就像 Linux 中的 yum、wget 一样好用极了。

官方文档命令下载较慢且大部分时候都是下载失败, 可使用国内源

我是使用的国内源，homebrew 的安装地址为：/opt/homebrew

使用 homebrew 安装的软件地址为：/opt/homebrew/Cellar

官方源

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

国内源

/bin/zsh -c "$(curl -fsSL gitee.com/cunkai/Home…)"


Git

官网：git-scm.com/ 这个我就不多说了，必备的代码管理工具，因为它是某些包安装的前置条件，所以最好尽早安装。

brew install git

基本配置

git config --global user.name "你的名字或昵称"   初始化名称
git config --global user.email "你的邮箱"       初始化邮箱
git config --global -l                         查看刚刚设置 的名称、邮箱
// 多公钥配置，可忽略此处，直接看下一部分
ssh-keygen -t rsa -C "你提交代码的邮箱"           密钥生成
cat ~/.ssh/id_rsa.pub                          查看生成的公钥，复制到 Github 等代码库

多公钥配置

gitee 已经讲的很详细了，所以直接看吧🀄️！

gitee.com/help/articl…


Nvm

Github：github.com/nvm-sh/nvm

Nodejs 版本管理工具。切换 node 版本比较方便（推荐安装），如果不需要可使用下面的方式安装 Nodejs。

# 1. 在 Github 获取安装 curl 链接并执行。
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 16774  100 16774    0     0    674      0  0:00:24  0:00:24 --:--:--  2776
=> Downloading nvm from git to '/Users/wooc/.nvm'
=> 正克隆到 '/Users/wooc/.nvm'...
remote: Enumerating objects: 424, done.
remote: Counting objects: 100% (424/424), done.
remote: Compressing objects: 100% (351/351), done.
remote: Total 424 (delta 59), reused 188 (delta 45), pack-reused 0 (from 0)
接收对象中: 100% (424/424), 414.13 KiB | 19.00 KiB/s, 完成.
处理 delta 中: 100% (59/59), 完成.
* （头指针在 FETCH_HEAD 分离）
  master

=> Compressing and cleaning up git repository

=> Appending nvm source string to /Users/wooc/.zprofile
=> Appending bash_completion source string to /Users/wooc/.zprofile
=> Close and reopen your terminal to start using nvm or run the following to use it now:

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

# 2. 复制上方 export 后的命令并执行
$ 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

# 3. 检查 nvm 版本，正常输出则安装成功
$ nvm -v
0.40.4

常用命令

$ nvm install 24 # 安装指定版本
Now using node v24.14.0 (npm v11.9.0)
$ node -v
v24.14.0
$ nvm use 22 # 使用指定版本
Now using node v22.22.1 (npm v10.9.4)
$ node -v
v22.22.1

Node

官网：nodejs.org/zh-cn/

前端必备 javascript 的运行环境。😯一般的 node 管理器在版本切换的时候不起作用，是因为在使用 brew 安装时 node 的安装路径不是默认的，与类似 nvm 的管理器默认路径不同，所以 nvm 找不到、替换不了当前 node 版本。

node 版本目前建议在 14 左右就好，因为高版本的 node 在 npm 安装 node-sass 这个包的时候会出现安装不上的问题，node-sass 对 node 版本的要求很严格， 如果你的项目使用不到的话就无所谓了。

brew search node                       // 搜索 node 版本
brew install node                      // 安装最新版本
brew install node@14                   // 安装指定版本
brew uninstall node@14                 // 卸载指定版本
brew link --overwrite --force node@14  // 切换到指定版本

iTerm2

比 Mac 自带的终端更好用的终端👌。

这个很多人都这么说，可能是我对终端的需求范围比较小，觉得跟自带的终端差不多，身边的人也大多是用它来安装一个花里胡哨的主题。

brew install iTerm2

curl

官网：curl.se/ 常用的命令行工具，用来请求 Web 服务器。如果熟练的话，完全可以取代 Postman 这一类的图形界面工具。

这个确实是一个神器，灰常好用。使用方法可以看看 阮一峰 大神的介绍，很详细了！

最近还有一个关于 curl 作者被 500 强公司要求为他们提供支持的新闻，链接我放下面了。

所以说，有些人赚钱比的是谁的脸皮厚！链接

brew install curl

使用文章： www.ruanyifeng.com/blog/2019/0…

替代品：httpie.io/ ；用法更简单，结果会格式化之后高亮显示，体验更好。


oh-my-zsh

官网：ohmyz.sh/ 前置安装：git、curl

💪强大的 shell 终端，简单、易用。这个确实比 Mac 自带的 bash 好用多了，属于用了就回不去的那种。官方网站已经说的很详细了，直接看官网就可以

curl 方式下载
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
chsh -s /bin/zsh   // 切换为zsh  重启终端即可使用 zsh
chsh -s /bin/bash  // 切换为bash 重启终端即可使用 bash

Mysql

关系型数据库。

不要怀疑哈🤨，前端环境确实是需要它。俗话说，不懂数据库的前端不是一个好全栈，当然也包括 Redis 缓存层。

数据库下载：dev.mysql.com/downloads/f…

打开 “系统偏好设置” 最下方会出现 Mysql 的图标，可查看当前 Mysql 的状态以及各文件地址。

大部分都停留在 5.7 版本。 8.0 及以上版本的默认为强密码，在 Egg 等类似的框架上还未支持此方式连接（估计要很久以后了吧，毕竟 5.7 就跟 centos7 一样命硬），如果链接过程中出现未支持等情况，大多数为此类原因，可以通过 “系统偏好设置” 中的操作面板，初始化 Mysql 为第二选项（非强密码选项）即可解决。

保存密码

在安装即将结束时，会弹出一个对话框显示 root 用户的临时密码。请务必记下此密码，用于首次登录。

启动服务

打开系统设置（或偏好设置），在底部找到 MySQL，点击并启动服务。

image.png

配置环境

使 mysql 命令可用 点击 configuration，查看并复制 Base Directory 路径

image.png

  • 打开终端执行：echo 'export PATH="/usr/local/mysql/bin:$PATH"' >> ~/.zshrc。

  • 应用配置：source ~/.zshrc。

登录与修改密码

  • 终端输入：mysql -u root -p。
  • 输入第3步的临时密码。

Redis

官网：redis.io/      中文文档：www.redis.net.cn/tutorial/35…

brew install redis
// 启动服务
brew services start redis
redis-server
ps axu | grep redis // 查看redis服务进程

VsCode

官网：code.visualstudio.com/download#

目前最受欢迎的编辑器，我的饭碗🥣。vscode 也已经有 M1 的版本。

brew cask install visual-studio-code

vscode 的快捷命令配置还是很多的，有一些跟随项目的配置文件，好用的配置插件，这里就先说两个吧。

快捷打开编辑器

使用命令打开

打开 VS Code，打开控制面板（⇧⌘P），输入 "shell command"，在提示里看到 Shell Command: Install "code" command in PATH，点击安装。 终端进入到指定文件夹，执行 code . || code filename 便可以使用 vscode 打开当前文件夹

拓展插件

Markdown Preview Github Stylin

本地 md 文档样式上传到 Github、npm 时，经常出现本地与线上表现不一致的问题👀。相信经常更新 npm 包的老板们都经历过文档在 Github、npm 上都展示的很丑的情况，但在本地 md 文档上显示很好。

此插件可在编写时预览本地 md 文档在 Github 上展现的样式。


Docker

官网：hub.docker.com/editions/co…

docker 也是一个前端应该必备的工具了，做 CI/CD 必不可少的工具，了解整个前端的构建流程。K8s 的话就有点远了，应该很少有使用到容器编排的需要。

目前也有 M1 版本的了，直接官网下载安装包安装即可。

或者可以通过命令行安装非桌面版的

brew install docker

Typora

官网：typora.io/

目前使用过的最好用的 md 文档编辑器👌。虽然它已经开始收费了，单但目前它的替代品跟它比确实是稍逊一筹。

到这里，基本的环境配置就差不多了！很想知道你们有没有什么开发利器可以推荐给我！

avatar
文章
阅读
粉丝