2024年前端从零配置mac开发环境

本文安装配置机型为2019款iMac,跟M系列差别不大

1.安装Homebrew

什么是HomeBrew?

Homebrew 是一个开源的包管理器,专为macOS(尽管也可以在Linux上使用)设计,用来简化在Mac操作系统上安装软件的过程。通过使用命令行界面,Homebrew 允许用户轻松地安装、更新、卸载和管理软件包,而无需手动下载、配置和安装。它基于Ruby编写,并利用GitHub来维护软件包(称为"formulae")的集合,这些软件包包括了从命令行工具到图形界面应用程序的各种软件

国内网络直接使用官网安装命令会网络超时,推荐使用国内镜像安装

# Homebrew国内如何自动安装(国内地址)(Mac & Linux)

打开Mac自带的终端执行命令

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

提示输入序号选择镜像源,推荐选择1,接着输入本机开机密码,提示需要安装xcode命令行工具,点击安装,等待安装完成,再次输入上面的命令

提示是否安装Core、Cask、services,如果需要安装完全体,输入y即可,稍等安装完成

接着选择跟上面一样的源

安装完成,重启终端或者按照提示加载配置文件

重启中断,输入brew -v查看brew是否安装成功,有版本号就是成功

homebrew常用命令

列出已安装的软件包 brew list

搜索软件包 brew search 软件名

安装软件包 brew install 软件名

查看所有可升级的软件包 brew outdated

卸载软件包 brew uninstall 软件名

更新软件包 brew upgrade 软件名

2.安装nvm

终端输入brew install nvm

提示需要一个全局环境变量文件,输入touch ~/.zshrc,创建

打开访达的用户盘根目录,快捷键command+shift+.,即可查看该文件夹的隐藏文件,可以看到刚才创建的.zshrc文件,双击打开编辑,复制黏贴要导出的nvm全局变量,command+s保存

bash 复制代码
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

接着输入source ~/.zshrc加载配置文件,nvm -v查看nvm版本,出现版本即是安装成功

3.安装各个版本node

nvm ls-remote查看远程node版本

建议安装LTS稳定版本,node最新20,18,16版本

nvm install v版本号即可安装

输入nvm ls列出已安装的Node版本

nvm alias default <version>设置默认的node版本

4.安装包管理器

npm已经随着nvm安装的各个node版本自带了,所以我们要额外安装yarn和pnpm,使用homebrew安装的软件是系统级别的,nvm 切换了版本号不用再次安装yarn和pnpm

复制代码
brew install yarn pnpm

设置镜像源

arduino 复制代码
npm config set registry https://registry.npmmirror.com
yarn config set registry https://registry.npmmirror.com
pnpm config set registry https://registry.npmmirror.com

5.安装vue脚手架

复制代码
brew install vue-cli

输入vue -V查看是否安装完成

总体来说使用homebrew能够极大方便地简化mac上的开发环境配置,nginx,python,java等都可以很方便的安装

相关推荐
程序员黑豆15 分钟前
鸿蒙应用开发 @Builder 使用教程:从入门到精通
前端·harmonyos
CCYe、23 分钟前
限流与配额:企业AI网关的工程实践
前端·人工智能
看谷秀31 分钟前
arkts- 6 手势/沉浸式/深浅色/性能/组件补充/访问/js交互/通知/Native交互
前端·arkts
划船不慎掉水顺便摸鱼33 分钟前
TipTap 不是编辑器,是编辑器构造器:ProseMirror 模型驱动的富文本架构
前端
小高00739 分钟前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
凉茶社43 分钟前
shadcn/ui 默认改用 Base UI,Radix 被放弃了吗?
前端
Vuji1 小时前
ReAct 与 Plan-Execute:两种 Agent 范式的实战对比
前端·agent
用户61595868000221 小时前
从零原生搭建一个微前端简易框架
前端
小月土星1 小时前
React + TypeScript 企业级开发实战:从类型约束到组件设计
前端
沙洲1 小时前
Vite 环境变量终极指南:从原理到企业级实战
前端