MAC安装vue环境保姆级教程(homebrew、nvm、nodejs、npm、vue、axios等)

 更新时间:2025年12月01日 11:27:05   作者:Xd聊架构  
Vue.js是一种用于构建用户界面的渐进式JavaScript框架,它在前端开发中得到了广泛应用,这篇文章主要介绍了MAC安装vue环境(homebrew、nvm、nodejs、npm、vue、axios等)的相关资料,需要的朋友可以参考下

前言

在 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环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目如何实现Echarts在label中获取点击事件

    vue项目如何实现Echarts在label中获取点击事件

    这篇文章主要介绍了vue项目如何实现Echarts在label中获取点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)

    Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息)

    这篇文章主要介绍了Vue 清除Form表单校验信息的解决方法(清除表单验证上次提示信息),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • element中table操作按钮展示与折叠的实现示例

    element中table操作按钮展示与折叠的实现示例

    因为随着功能的增多,table操作栏中的功能按钮增多,这时候就需要折叠,本文主要介绍了element中table操作按钮展示与折叠的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • vue 列表页跳转详情页获取id以及详情页通过id获取数据

    vue 列表页跳转详情页获取id以及详情页通过id获取数据

    这篇文章主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 解读Vue实例的属性及模板渲染

    解读Vue实例的属性及模板渲染

    这篇文章主要介绍了解读Vue实例的属性及模板渲染问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue项目发布后浏览器缓存问题解决方案

    Vue项目发布后浏览器缓存问题解决方案

    在vue项目开发中一直有一个令人都疼的问题,就是缓存问题,这篇文章主要给大家介绍了关于Vue项目发布后浏览器缓存问题的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue组件引用另一个组件出现组件不显示的问题及解决

    vue组件引用另一个组件出现组件不显示的问题及解决

    这篇文章主要介绍了vue组件引用另一个组件出现组件不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 浅析Vue如何巧用computed计算属性

    浅析Vue如何巧用computed计算属性

    在日常使用Vue开发项目的时候,计算属性computed是一个非常常用的特性,本文就来分享一些使用Vue的computed计算属性时的一些小技巧,希望能够帮助到大家
    2023-06-06
  • Element UI响应式布局问题的解决

    Element UI响应式布局问题的解决

    本文主要介绍了Element UI响应式布局问题的解决,提供了五种屏幕大小尺寸,xs、sm、md、lg 和 xl,并对这五种尺寸提供了两种解决方案,感兴趣的可以了解一下
    2025-08-08
  • 浅谈VUE uni-app 条件编码和页面布局

    浅谈VUE uni-app 条件编码和页面布局

    这篇文章主要介绍了uni-app 的条件编码和页面布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10

最新评论