Mac 从零搭建 Vue 开发环境：Homebrew、NVM、Node.js（超完整）

原创 于 2025-12-04 20:36:57 发布 · 668 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#macos #vue.js #node.js #前端 #javascript #css

Vue 作为热门前端框架，搭建稳定的开发环境是入门关键。本文针对 macOS 用户，从基础工具到框架安装，一步步拆解 Homebrew、NVM、Node.js、npm 与 Vue 的安装配置流程，包含镜像源优化、版本切换、环境验证等实用技巧，解决新手常见的版本冲突、下载缓慢等问题，帮助快速搭建可直接用于项目开发的 Vue 环境。

前言

需要分清楚homebrew nvm node npm vue

[!NOTE]

  • nvm：给 Node.js 换版本的“版本管理器”
  • node：让你可以在浏览器之外跑 JavaScript 的“运行时”
  • npm：Node.js 自带的“包管理器”
  • vue：基于 JavaScript 的“前端 UI 框架”

Homebrew

是 macOS（也支持 Linux）上的包管理工具，类似手机上的应用商店，用于简化软件的安装、更新和卸载。通过它可以快速安装开发所需的各种工具（如 Node.js、Git 等），命令简洁直观，例如 brew install node 即可安装 Node.js。

[!IMPORTANT]

Homebrew 就是 Mac（也能是 Linux）上的“万能安装器”，一条 brew install xxx 搞定几乎所有开源软件和常用 GUI 应用。

1. Homebrew（包管理工具）
安装软件：brew install [软件名]（如 brew install git）
卸载软件：brew uninstall [软件名]
更新软件列表：brew update
升级已安装软件：brew upgrade [软件名]（不加软件名则升级所有）
查看已安装软件：brew list

nvm（Node Version Manager）

是 Node.js 的版本管理工具。由于不同项目可能依赖不同版本的 Node.js，nvm 可以让你在同一台电脑上轻松切换多个 Node.js 版本，避免版本冲突。常用命令如 nvm install 18 安装 18.x 版本，nvm use 16 切换到 16.x 版本。

2. nvm（Node.js 版本管理）
安装指定 Node.js 版本：nvm install [版本号]（如 nvm install 18.17.0）
切换使用的版本：nvm use [版本号]（如 nvm use 16）
查看已安装版本：nvm ls
查看当前使用版本：nvm current
设置默认版本：nvm alias default [版本号]

Node.js

是一个基于 Chrome V8 引擎的 JavaScript 运行环境，让 JavaScript 可以脱离浏览器运行在服务器端。它支持异步 I/O，适合开发高性能的网络应用（如后端 API、实时服务等），同时也是前端工程化工具（如 Webpack、Vue CLI）的运行基础。

3. Node.js（运行环境，主要通过命令行执行 JS 文件）
执行 JS 脚本：node [文件名]（如 node app.js）
查看 Node 版本：node -v 或 node --version
进入交互模式（类似浏览器控制台）：node
退出交互模式：.exit 或按 Ctrl+C 两次

npm（Node Package Manager）

是 Node.js 自带的包管理工具，用于管理 JavaScript 库（如 React、Vue 等）。通过 npm 可以快速下载、安装第三方库到项目中，也能发布自己开发的库。常用命令如 npm install vue 安装 Vue，npm run dev 执行项目中的脚本。

4. npm（Node 包管理工具）
初始化项目（生成 package.json）：npm init（加 -y 可跳过问答直接生成）
安装依赖包：npm install [包名]（简写 npm i [包名]）
开发环境依赖：npm install [包名] --save-dev（简写 -D）
全局安装：npm install [包名] -g
卸载依赖包：npm uninstall [包名]
运行 package.json 中的脚本：npm run [脚本名]（如 npm run dev）
查看全局安装的包：npm list -g --depth 0

Vue

是一个渐进式 JavaScript 前端框架，用于构建用户界面。它核心只关注视图层，易于上手，同时可以与其他库或现有项目整合。Vue 提供了数据绑定、组件化、路由等功能，适合开发单页应用（SPA），目前广泛用于前端开发。

[!CAUTION]

nvm 管 Node 版本，Node 让你跑 JS，npm 帮你拉依赖，Vue 是这些基础设施之上做前端界面的框架。

5. Vue（前端框架，通常配合 Vue CLI 或 Vite 使用）
安装 Vue CLI（全局）：npm install -g @vue/cli
创建 Vue 项目（Vue CLI）：vue create [项目名]
启动开发服务器：npm run serve（Vue CLI 项目）或 npm run dev（Vite 项目）
构建生产环境代码：npm run build
安装 Vue 路由 / 状态管理等官方库：
npm install vue-router（路由）
npm install vuex（状态管理，Vue 3 推荐用 Pinia）

第一步：安装homebrew

打开终端窗口


1.官网提供的链接（没有vpn的话执行不成功）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 
2.国内下载地址
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

如需卸载

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/HomebrewUninstall.sh)"

[!WARNING]

安装完后需重启终端窗口

第二步：使用homebrew安装NVM

终端窗口

执行

brew install nvm

在这里插入图片描述

确定Shell配置文件（可忽略）

echo $SHELL
  • 如果输出是/bin/bash，则使用bash。
  • 如果输出是/bin/zsh，则使用zsh。

打开或创建 shell 配置文件：

对于 macOS Mojave 及以后版本（使用 zsh 作为默认 shell）的用户，您需要编辑或创建 ~/.zshrc 文件 如果文件不存在的话，则需要先创建（文件存在的话就可以忽略这一步）：

创建文件

touch ~/.zshrc

打开文件

open ~/.zshrc

添加如下内容到文件末尾

1.配置nvm环境变量

2.可解决nvm下载慢的问题

3.项目配置.nvmrc文件打开终端可自动切换版本号

# 配置 nvm 环境
export NVM_DIR="$HOME/.nvm"
[ -s "$(brew --prefix nvm)/nvm.sh" ] && \. "$(brew --prefix nvm)/nvm.sh"
 
# 配置 nvm下载镜像源
export NVM_NODEJS_ORG_MIRROR=https://nodejs.org/dist
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
 
# 定义自动加载 .nvmrc 的逻辑
load-nvmrc() {
  if [[ -f .nvmrc ]]; then
    local VERSION
    VERSION=$(cat .nvmrc)  # 获取 .nvmrc 文件中的版本号
    
    # 检查当前版本是否与 .nvmrc 中指定的版本相同
    if [[ "$(nvm current)" != "$VERSION" ]]; then
      # 切换 Node 版本
      nvm use "$VERSION" &>/dev/null  # 避免不必要的输出
      if [[ $? -eq 0 ]]; then
        echo "Switched to Node version $(node -v)"  # 显示当前版本
      else
        echo "Error: Failed to switch Node version"
      fi
    else
      echo "Already using Node version $(node -v)"  # 当前版本已经是指定版本
    fi
  fi
}
 
# 使用 chpwd 钩子，确保每次切换目录时执行 load-nvmrc
autoload -U add-zsh-hook
add-zsh-hook chpwd load-nvmrc
 
# 在终端启动时执行一次 load-nvmrc，确保初始加载时正确
load-nvmrc

重新加载 .zshrc

source ~/.zshrc

检查是否安装完毕

nvm --version

在这里插入图片描述

第三步：通过nvm安装指定版本的node.js

nvm install 20.17.0

npm安装测试

npm install express -g

在这里插入图片描述

配置npm镜像

修改为淘宝镜像

npm config set registry https://registry.npmmirror.com

查看当前镜像

npm config get registry

在这里插入图片描述

npm常用命令

在这里插入图片描述

第四步：安装脚手架

安装指令

npm install -g @vue/cli

在这里插入图片描述

测试

vue -v

在这里插入图片描述

第五步：完整测试

检查 Homebrew

运行版本查看命令，能正常输出版本号即表示安装正常：

brew --version

检查 nvm（Node 版本管理器）

先确认 nvm 是否能正常调用，再检查其管理的 Node 版本：

# 查看 nvm 版本
nvm --version

# 查看已安装的 Node 版本列表（至少应有一个版本）
nvm ls

检查 Node.js

查看当前激活的 Node 版本，能输出版本号即表示配置正常：

node -v

检查 npm

npm 随 Node 一起安装，通过版本命令验证：

npm -v

检查 Vue 相关工具

根据你使用的工具（Vue CLI 或 Vite）进行检查：

若安装了 Vue CLI：
vue --version
验证 Vue 项目能否正常运行（可选）：
# 创建 Vue 项目（按提示选择默认配置即可）
vue create test-vue-app

# 进入项目目录
cd test-vue-app

# 启动开发服务器
npm run serve

若终端显示 App running at: 并给出本地访问地址（如 http://localhost:8080/），且浏览器能打开并看到 Vue 欢迎页，则说明 Vue 环境配置正常。

关闭开发服务器

在运行开发服务器的终端窗口中，按下 Ctrl + C 组合键（Windows/Linux/macOS 通用），终端会显示终止信息（如 Terminated 或 ^C），此时开发服务器就会停止运行

在这里插入图片描述

参考文献

mac 安装HomeBrew并且使用nvm管理node

超详细mac上用nvm安装node环境，配置npm

Ahtacca
关注
前端领域Node.js环境搭建详细教程
AI架构全栈开发实战笔记
06-17 1116
在前端开发中，Node.js早已不是“可选工具”——从用npm安装Vue/React等框架，到用webpack打包代码，再到用Express搭建本地测试服务器，几乎所有现代前端项目都依赖Node.js环境。Node.js的核心作用与原理三平台（Windows/macOS/Linux）安装步骤版本管理工具nvm的使用镜像源配置加速下载实战验证环境有效性。
【nvm】如何使用nvm优雅的管理Node.js
一捌柒的博客
06-28 1330
如何更好的管理node.js版本，解放频繁的配置环境变量双手～
Node.js 与 Vue3 环境配置完整指南【从零开始搭建前端开发环境】
🎉毛球oo的博客
10-27 924
nvm (Node Version Manager) 是 Node.js 版本管理工具，可以在同一台电脑上安装和切换多个 Node.js 版本。核心优势✅ 自动配置环境变量✅ 无需手动配置和node_cache✅ 一条命令即可切换版本✅ 每个版本的 npm 独立管理注意事项❌ 使用 nvm 前不要提前安装 Node.js❌ 如果已安装 Node.js，需要先卸载（参考2.4 从直接安装迁移到 nvm。
Node.js开发环境完整部署指南
smssy的博客
06-12 2070
本文详细介绍了Node.js开发环境的完整部署流程，主要包括以下内容： 环境准备：列出系统要求并提供Ubuntu/CentOS/macOS的依赖安装命令 目录规划：创建标准化的目录结构用于存放Node.js相关文件、缓存和项目 工具安装： NVM的安装与配置（含国内镜像设置） Node.js多版本管理 NPM和Yarn的配置优化 环境配置： 详细的.bashrc配置示例 包含自动加载脚本和环境变量设置 提供常用命令别名 管理脚本：包含Node版本切换、安装和配置的自动化脚本 优化建议： 使用国内镜像加速下载
Node.js 版本管理全指南：卸载 Node、安装 NVM、常用命令及问题解决
Toroto5的博客
09-11 2409
该问题通常发生在 Windows 系统中，当 NVM 尝试创建或修改 Node.js 的符号链接时，由于用户权限不足导致操作被拒绝。在安装 Node Version Manager (NVM) 前，必须彻底卸载电脑中已有的 Node.js（若从未安装可跳过此步骤），否则可能导致 NVM 管理失效或版本冲突问题。如果这些命令仍有效，说明系统中还存在独立安装的Node.js，需要单独卸载。：如果系统已安装Node.js，建议先卸载，避免与nvm管理的版本冲突。
系列学习前端之第 9 章：一文搞懂 Node.js 和 nvm，掌握 npm
流放深圳
04-05 1990
npm是 Node.js 默认的包管理工具，也就是他们俩是一对的、相辅相成的，很难分开来讨论他们。所以，安装了 Node.js 之后，npm会自动帮你安装上。总的来说：安装 Node.js 默认就会安装 npm，而安装 npm 最简单的方式就是安装 Node.js。
MAC安装vue环境（homebrew、nvm、nodejs、npm、vue、axios等）
少说，多做
10-28 738
本文详细介绍了在macOS系统下搭建前端开发环境的完整流程。首先通过安装Homebrew（Mac包管理工具），然后使用Homebrew安装nvm（Node版本管理工具），并配置环境变量使其生效。接着讲解了nvm的常用命令，包括查看、安装、切换Node版本等功能。最后演示了如何使用nvm安装指定版本的Node.js（以24.10.0为例）并验证安装结果。整个过程包含详细命令和配置说明，帮助开发者快速建立稳定高效的前端开发环境，实现Node.js多版本的自由切换。
在 Ubuntu 上快速配置 Node.js 环境（附问题说明）
热门推荐
qq_63786218的博客
11-04 2万+
本文详细介绍了在Ubuntu系统上安装Node.js和配置VuePress项目的完整流程。主要内容包括：1) 通过uname命令查看系统架构并下载对应版本的Node.js安装包；2) 解压安装包、移动到指定目录并建立软连接实现全局访问；3) 配置npm镜像源提高下载速度；4) 以VuePress项目为例，展示如何使用npm安装依赖并解决权限问题。文章还提供了安装过程中的常见问题及解决方法，如安装失败、命令无法识别、npm安装包失败等问题，帮助用户快速搭建Node.js开发环境。通过清晰的步骤说明和问题解决方
Node.js 环境配置指南：从入门到生产级优化
zqmgx13291的博客
08-07 2045
本文从版本选择、多平台安装、环境配置到生产优化，全面覆盖 Node.js 环境搭建的核心要点。通过 nvm/n 管理版本，切换淘宝镜像加速依赖安装，配置私有仓库保障企业安全，结合 Docker 容器化实现生产环境一致性。遵循本文指南，可快速搭建从开发到生产的全流程 Node.js 环境，为应用开发奠定坚实基础。<|FCResponseEnd|># Node.js 环境配置指南：从入门到生产级优化本文从版本选择、多平台安装、环境配置到生产优化，全面覆盖 Node.js 环境搭建的核心要点。
26、Vue 开发环境搭建与常见问题解答
v5w6x的博客
11-01 16
本文详细介绍了Vue开发环境的搭建步骤，包括Node.js和npm的安装、Vue-CLI的配置以及常见问题的解决方案。同时涵盖了Vue开发中的核心知识点，如组件创建与注册、数据传递、条件与循环渲染、表单处理、动画与过渡等，并提供了流程图帮助理解开发流程，适合Vue初学者和进阶开发者参考学习。
文森特测试项目：基于Node.js的开发环境搭建指南
“文森特测试”这一标题所指向的项目，从其描述和相关标签可以推断出，它是一个基于Node.js技术栈的开发演示项目或测试性应用，可能用于教学、技能验证或开发环境配置的实践案例。该项目名为“vincent-test”，...
Node.js安装与开发环境搭建详细指南
综上所述，“Node.js的安装与环境的搭建（详细版）”不仅仅是一个简单的软件安装教程，而是涵盖了从基础运行时配置到完整开发工作流建立的系统性知识体系。它涉及操作系统适配、命令行操作、包管理机制、项目初始化...
MacOS升级ruby版本
2509_94213744的博客
11-29 197
但是如果我们使用“ruby -v”查看版本，发现使用的还是MacOS自带ruby版本是2.x。homebrew安装的ruby版本号可以通过“brew info ruby”命令参看。MacOS自带ruby版本是2.x，可以通过“ruby -v”查看版本号。如果没有安装，可以“brew install ruby”进行安装。或者通过“brew install ruby”进行升级。再次使用“ruby -v”查看一下版本。
macOs安装docker且在docker上部署nginx+php
2509_94088164的博客
11-29 781
v ~/project/nginx/conf.d:/etc/nginx/conf.d 将主机的 ~/project/nginx/conf.d 目录挂载到容器的 /etc/nginx/conf.d。-v ~/project/www:/usr/share/nginx/html 将主机的 ~/project/www 目录挂载到容器的 /www。–link myphp:php 将 myphp 容器的网络并入 nginx 容器，实现容器间的通信。如果想将docker内的文件与docker外的文件相关关联。
macOS 上使用 Homebrew 安装和配置 PostgreSQL 的详细步骤
benxin1234的博客
11-30 603
默认情况下，PostgreSQL 会创建一个与您当前 macOS 用户名同名的数据库和超级用户，并且没有密码。为了安全和管理方便，建议创建一个专用的应用用户和数据库。这是目前最推荐的方式，因为它管理方便，易于升级和卸载。推荐安装 pgAdmin，这是一个功能强大的开源 PostgreSQL 管理工具。◦ 在 “General” 标签页，输入一个名称（如 “Local PostgreSQL”）。如果显示类似 psql (PostgreSQL) 17.0 的信息，说明安装成功。这表示您已成功连接到数据库。
macOS 上安装与配置apksigner (读取APK签名的工具)
最新发布
Simon的专栏
12-03 168
本文介绍了在macOS上安装apksigner工具来读取APK签名信息的完整流程。主要内容包括：1)确认或安装Android SDK；2)通过sdkmanager安装指定版本的Build-Tools；3)将apksigner加入系统PATH环境变量；4)验证安装结果；5)使用apksigner命令读取APK的SHA-1/SHA-256签名指纹。最后提供了一个一键式安装脚本，方便快速完成环境配置。适用于已安装Android Studio或仅需命令行工具的用户场景。
如何将照片从 Mac 传输到 Android
Digitally的博客
12-03 442
将照片从 Mac 传输到 Android 手机或平板电脑有时会感觉像是跨越数字鸿沟。由于 Mac 和 Android 运行在不同的生态系统中，直接拖放的方法行不通。如果您想将照片从 Mac 传输到 Android，可以尝试本指南中介绍的有效方法，这些方法可以高质量地传输照片。
Mac 远程连接 Windows 简明教程（2025 实测版）
zangzh的博客
12-02 985
日常使用优先尝试局域网直连 RDP（最快最稳）外网访问优先用内网穿透工具（如 ZeroTier）+ RDP，比暴露 3389 更安全企业环境务必配合 IT 确认网关策略（CAP/RAP）和网络可达性。
电脑安装黑苹果教程，MacOS教程(未验证版)
雪花凌落的盛夏
11-30 536
加载Intel 蓝牙功能，使用的是 Apple T2/USB 蓝牙 → 选「No」使用VoodooHDA支持更好的兼容性。输入AGREE打开制作好的镜像目录。拖动EFI文件到ISO文件里面。✅ 操作环境：Windows。‼️一个可以格式化的U盘。格式化U盘并写入磁盘镜像。直接回车，使用默认选项。制作EFI启动引导镜像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值