前端环境Mac配置篇
2018年1月2日
预计阅读：14min
前端开发环境简介
本文介绍了在 Mac 下搭建高效前端开发环境的常用工具及配置方法，适合前端开发新手和有经验的开发者查阅。内容涵盖包管理、终端美化、版本管理、数据库工具等。
Homebrew
Homebrew 是一款 Mac OS 平台下的软件包管理工具，拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令，就可以实现包管理，而不用你关心各种依赖和文件路径的情况，十分方便快捷。
如果你 zsh 或者 nvm 连接超时，在 /etc/hosts 文件里面添加
199.232.68.133 raw.githubusercontent.com
安装 Homebrew
# 在终端输入如下命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"常用命令
brew install git # 安装软件
brew search git # 搜索软件
brew remove git # 卸载软件
brew list # 显示已安装的软件
brew update # 更新所有软件
brew doctor # 诊断环境问题替换 brew 源
# 进入 brew 安装目录
cd "$(brew --repo)"
# 替换源 (个人感觉比阿里云稳定)
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
# 更新 brew
brew update
# 可以替换的源
腾讯源: https://mirrors.cloud.tencent.com/homebrew/brew.git
阿里源: https://mirrors.aliyun.com/homebrew/brew.git
清华源: https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git卸载 Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/uninstall.sh)"iTerm2 + Zsh + Oh My Zsh
iTerm2：是 Mac 下终端的替代品，比自带的终端强大许多。Zsh：Linux 的一种 shell 外壳。Oh My Zsh：用来管理 zsh 的配置，拥有丰富的插件和主题。
安装 iTerm2
# 官网下载地址，下载的是压缩文件，解压后是执行程序文件，直接将它拖到 Applications 目录下
https://www.iterm2.com/
# 通过 Homebrew 安装
brew install --cask iterm2安装 Oh My Zsh
# 在终端输入如下命令
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
# 安装好之后把 Zsh 设置为当前用户的默认 Shell
chsh -s /bin/zsh推荐 Oh My Zsh 插件
# 自动建议
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
# 语法高亮
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting编辑 ~/.zshrc，plugins 数组中添加
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
使配置生效
source ~/.zshrc
升级 Oh My Zsh
omz updateiTerm2 美化与常用技巧
- 支持分屏、标签页、搜索、配色方案等。
- 可在 iTerm2-Color-Schemes 下载喜欢的配色方案。
- 推荐字体：Fira Code、JetBrains Mono（支持连字和美观的代码显示）。
Git
安装 Git
# 通过 Homebrew 安装
brew install git
# 通过官网下载
https://git-scm.com/downloads创建 ssh key
ssh-keygen -t rsa -C "你的Email"验证有效性
ssh -T git@github.com常用配置
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status推荐 GUI 客户端
Nvm
nvm 是 Mac 下的
node版本管理工具，可以任意切换 node 版本。相比 n，nvm 安装的 node 版本是隔离开的，每个 node 版本都有独立的文件夹。 Nvm 仓库地址
安装 Nvm
# 在终端输入如下命令
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash配置环境变量
# 编辑用户根目录下的 ~/.bash_profile 文件添加以下环境变量；如果你用的是 zsh 那么编辑 ~/.zshrc
# 打开新的窗口环境变量生效，或者执行 source ~/.bash_profile 或 source ~/.zshrc 及时生效
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvmnvm 常用命令
nvm install # 安装指定版本
nvm uninstall # 卸载已安装的 node 版本
nvm use # 切换已安装的 node 版本
nvm ls # 列出本机已安装的 node 版本
nvm ls-remote # 列出所有远程服务器可安装的 node 版本
nvm current # 显示当前正在用的 node 版本
nvm alias default v8.9.0 # 默认 node 版本
nvm alias # 给不同的 node 版本添加别名
nvm unalias # 删除已定义的别名卸载 Nvm
rm -rf ~/.nvm
# 删除相关环境变量配置node 与 npm 关系说明
- nvm 管理 node 版本，每个 node 版本自带独立的 npm。
- 可通过
nvm use 版本号切换 node/npm 环境。
mycli
A Terminal Client for MySQL with AutoCompletion and Syntax Highlighting.
安装
brew update && brew install mycli常用命令
mycli -u [name] -p [password] # 连接本地数据库
mycli -h [host] -u [name] -p [password] # 连接远程数据库配置文件路径
- 默认配置文件：
~/.myclirc
Rust
Rust 是一门系统级编程语言，专注于安全、并发和性能。使用 rustup 可以轻松管理 Rust 工具链。
安装 Rust
# 下载并运行 rustup 安装脚本
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# 安装完成后，配置环境变量
source $HOME/.cargo/env
# 验证安装
rustc --version
cargo --version常用命令
# 创建新项目
cargo new my_project
# 构建项目
cargo build
# 运行项目
cargo run
# 发布版本构建
cargo build --release
# 检查代码（不构建）
cargo check
# 运行测试
cargo test
# 更新 Rust
rustup update
# 添加组件（如 rust-analyzer）
rustup component add rust-analyzer包管理 (Cargo)
# 添加依赖
cargo add serde
# 搜索包
cargo search regex
# 更新依赖
cargo updatepnpm
pnpm 是一个快速的、节省磁盘空间的包管理器，采用硬链接和符号链接来避免重复安装依赖。相比 npm/yarn，速度更快、效率更高。
安装 pnpm
# 使用 npm 安装
npm install -g pnpm
# 使用 Homebrew 安装
brew install pnpm
# 使用独立脚本安装
curl -fsSL https://get.pnpm.io/install.sh | sh -
# 验证安装
pnpm --version常用命令
# 创建新项目
pnpm create vite
# 安装依赖
pnpm install
# 添加依赖
pnpm add <package-name>
# 添加开发依赖
pnpm add -D <package-name>
# 移除依赖
pnpm remove <package-name>
# 运行脚本
pnpm run <script-name>
# 更新依赖
pnpm update
# 全局安装包
pnpm add -g <package-name>配置国内源
# 设置淘宝镜像源
pnpm config set registry https://registry.npmmirror.com
# 查看当前源
pnpm config get registryTauri
Tauri 是一个使用 Web 前端构建桌面应用的框架，比 Electron 更轻量、更安全、资源占用更少。支持前端框架和系统级交互。
安装 Tauri CLI
# 确保已安装 Rust 环境
# 使用 Cargo 安装 Tauri CLI
cargo install tauri-cli --version "^2.0.0"
# 或使用 npm 安装（推荐）
npm install -g @tauri-apps/cli
# 验证安装
tauri --version创建 Tauri 项目
# 使用 create-tauri-app 脚手架
npm create tauri-app@latest
# 或手动添加到现有项目
# 在你的前端项目根目录执行
npm install -D @tauri-apps/cli
npm run tauri init常用命令
# 开发模式（热重载）
npm run tauri dev
# 构建应用
npm run tauri build
# 构建 Web 资源
npm run tauri build -- --debug
# 查看项目信息
npm run tauri info
# 生成图标
npm run tauri icon path/to/icon.png系统依赖
# macOS 开发依赖
# Tauri 需要 Xcode Command Line Tools，可通过以下命令安装：
xcode-select --install
# WebView 依赖（macOS 自带，无需额外安装）http-server
http-server 是一个简单的、零配置的命令行静态文件服务器，适合快速启动本地 Web 服务器进行测试和演示。
安装 http-server
# 全局安装
npm install -g http-server
# 验证安装
http-server --version常用命令
# 在当前目录启动服务器
http-server
# 指定端口启动
http-server -p 8080
# 指定目录启动
http-server /path/to/folder
# 启用 CORS
http-server --cors
# 启用 gzip 压缩
http-server -g
# 显示帮助信息
http-server --helpPM2
PM2 是一个先进的 Node.js 进程管理器，支持负载均衡、日志管理、进程监控等功能，是生产环境部署 Node.js 应用的首选工具。
安装 PM2
# 全局安装
npm install -g pm2
# 验证安装
pm2 --version常用命令
# 启动应用
pm2 start app.js
# 启动并命名进程
pm2 start app.js --name "my-app"
# 监听模式启动（文件变化自动重启）
pm2 start app.js --watch
# 传递参数
pm2 start app.js -- --port 3000
# 查看所有进程
pm2 list
# 查看进程详情
pm2 show <app-name>
# 查看日志
pm2 logs
# 查看特定应用日志
pm2 logs <app-name>
# 停止应用
pm2 stop <app-name>
# 重启应用
pm2 restart <app-name>
# 删除应用
pm2 delete <app-name>
# 清空日志
pm2 flush
# 保存当前进程列表
pm2 save
# 开机自启动
pm2 startuptree
tree 是一个递归列出目录内容的命令行工具，以树状结构显示文件和目录层次关系，便于快速了解项目结构。
安装 tree
# 通过 Homebrew 安装
brew install tree
# 验证安装
tree --version常用命令
# 显示当前目录树
tree
# 指定深度
tree -L 2
# 显示隐藏文件
tree -a
# 只显示目录
tree -d
# 显示文件大小
tree -s
# 使用颜色区分文件类型
tree -C
# 输出到文件
tree > directory_structure.txt
# 忽略特定目录
tree -I "node_modules|dist|.git"
# 显示完整路径
tree -fjq
jq 是一个轻量级且灵活的命令行 JSON 处理器，类似于 JSON 版的 sed，用于解析、查询、修改和格式化 JSON 数据。
安装 jq
# 通过 Homebrew 安装
brew install jq
# 验证安装
jq --version常用命令
# 格式化 JSON（美化输出）
cat file.json | jq '.'
# 查询特定字段
cat file.json | jq '.name'
cat file.json | jq '.user.email'
# 数组索引
cat file.json | jq '.users[0]'
cat file.json | jq '.users[]'
# 过滤数据
cat file.json | jq '.users[] | select(.age > 18)'
# 修改字段
cat file.json | jq '.name = "New Name"'
# 删除字段
cat file.json | jq 'del(.metadata)'
# 提取多个字段
cat file.json | jq '{name: .name, email: .email}'
# 数组操作
cat file.json | jq '.users | length'
cat file.json | jq '.users | map(.age)'
# 从 API 响应中提取数据
curl -s https://api.github.com/users/github | jq '.'
# 合并多个 JSON 文件
jq -s '.' file1.json file2.json常见问题 FAQ
- Homebrew 安装缓慢或失败？
- 检查网络，建议更换国内源。
- iTerm2 中文乱码？
- 设置字体为支持中文的字体，如”PingFang SC”。
- Oh My Zsh 插件不生效？
- 检查 ~/.zshrc 配置，确认插件已添加并 source ~/.zshrc。
- nvm 安装 node 失败？
- 检查网络，或使用 nrm 切换 npm 源。
- mycli 连接失败？
- 检查数据库地址、端口、用户名和密码是否正确。