MAC安装vue环境保姆级教程(homebrew、nvm、nodejs、npm、vue、axios等)
作者：Xd聊架构
前言
在 macOS 上搭建前端开发环境，是每一位开发者入门或换机时的“必经之路”。一个稳定、高效的开发环境，不仅能提升编码效率，还能避免因版本冲突或依赖问题带来的各种“坑”。而在众多工具链中，Homebrew、nvm、Node.js 和 npm 是构建现代 JavaScript/前端项目不可或缺的核心组件。
你是否也曾因为找不到合适的安装教程而苦恼？是否在配置 nvm 后发现命令无法使用而一头雾水？又或者安装了 Node.js 却无法自由切换版本而感到困扰？
本文将手把手带你完成在 macOS 系统下，从零开始安装和配置 Homebrew → nvm → Node.js → npm 的完整流程。无论你是刚接触命令行的新手，还是想系统梳理安装步骤的开发者，这篇文章都能为你提供清晰、可靠的操作指引。
我们将一步步介绍：
如何通过 Homebrew（Mac 的包管理神器）安装 nvm；
如何正确配置 nvm 以实现多版本 Node.js 的自由切换；
最后使用 nvm 安装指定版本的 Node.js 和 npm，并验证安装结果。
整个过程简洁明了，附带常用命令速查，助你快速搭建起属于自己的现代化前端开发环境。准备好了吗？打开终端，让我们开始吧！
一、安装Homebrew
1.安装brew
检查电脑是否有安装 Homebrew，在终端输入
brew -v //检查 brew 的版本 //已安装：则出现版本号，则表示已安装Homebrew //未安装：-bash: brew: command not found
未安装则在终端执行（已安装则跳过）：
//安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" //安装完成查看版本号， brew -v
2.brew常用命令介绍
安装软件：brew install 软件名，例：brew install wget 搜索软件：brew search 软件名，例：brew search wget 卸载软件：brew uninstall 软件名，例：brew uninstall wget 更新所有软件：brew update 更新具体软件：brew upgrade 软件名 ，例：brew upgrade git 显示已安装软件：brew list 查看软件信息：brew info／home 软件名 ，例：brew info git ／ brew home git 显示包依赖：brew reps 显示安装的服务：brew services list 安装服务启动、停止、重启：brew services start/stop/restart serverName
二、使用 Homebrew 安装 nvm
1.nvm安装
brew install nvm
安装成功后不能直接使用 nvm 命令， 安装成功之后，还不能直接使用 nvm 命令，需要进行以下配置，将以下命令复制到终端执行：
echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile . ~/.bash_profile //需要重新定向来源
执行 nvm 命令
nvm list
2.nvm 常用命令介绍
nvm list ##是查找本电脑上所有的node版本
- nvm list ##查看已经安装的版本
- nvm list installed ##查看已经安装的版本
- nvm list available ##查看网络可以安装的版本
nvm install ##安装指定版本node
nvm uninstall ##卸载制定的版本
nvm install stable ## 安装最新稳定版 node，当前是node v9.5.0 (npm v5.6.0)
nvm install ##安装指定版本，可模糊安装，如：安装v4.4.0，既可nvm install v4.4.0，又可nvm install 4.4
nvm use ##切换使用指定的版本node
nvm -v ##查看当前的版本
nvm ls ## 列出所有安装的版本
nvm ls-remote ## 列出所有远程服务器的版本（官方node version list）
nvm current ## 显示当前的版本
nvm alias ## 给不同的版本号添加别名
nvm unalias ## 删除已定义的别名
nvm reinstall-packages ## 在当前版本 node 环境下，重新全局安装指定版本号的 npm 包
nvm on ##打开nodejs控制
nvm off ##关闭nodejs控制
nvm proxy ##查看设置与代理
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/.
nvm use [version] [arch] ##切换制定的node版本和位数
nvm root [path] ##设置和查看root路径
三、nvm安装nodejs
以安装24.10.0版本为例
nvm install 24 # Verify the Node.js version: node -v # Should print "v24.10.0". # Verify npm version: npm -v # Should print "11.6.1".
四、安装vue环境
npm install -g @vue/cli
npm install webpack -g
vue版本对应关系
Vue 3 需要 vue-router@4.x 或更高版本
Vue 2 使用 vue-router@3.x 版本
npm install vue-router@4
总结
到此这篇关于MAC安装vue环境(homebrew、nvm、nodejs、npm、vue、axios等)的文章就介绍到这了,更多相关MAC安装vue环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！