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配置代理服务器proxy 多种方法示例详解

    vue配置代理服务器proxy 多种方法示例详解

    这篇文章主要介绍了vue配置代理服务器proxy 多种方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • React 树形组件Tree View的具体使用

    React 树形组件Tree View的具体使用

    本文主要介绍了React中构建一个简单的树形组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11
  • vue项目在IE浏览器下运行空白问题及解决

    vue项目在IE浏览器下运行空白问题及解决

    IE11浏览器无法解析ES6语法导致Vue项目在IE11下显示空白,解决方法包括安装babel-polyfill,并在项目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解决办法是使用版本3以下的js-base64,这些措施可以帮助兼容IE11,确保项目正常运行
    2024-09-09
  • vue使用openlayers创建地图

    vue使用openlayers创建地图

    这篇文章主要为大家详细介绍了vue项目中使用openlayers创建地图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 基于Element封装一个表格组件tableList的使用方法

    基于Element封装一个表格组件tableList的使用方法

    这篇文章主要介绍了基于Element封装一个表格组件tableList的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue项目做屏幕自适应处理方式

    vue项目做屏幕自适应处理方式

    这篇文章主要介绍了vue项目做屏幕自适应处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue具名插槽的基本使用实例

    vue具名插槽的基本使用实例

    Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。下面这篇文章主要给大家介绍了关于vue具名插槽基本使用的相关资料,需要的朋友可以参考下
    2021-05-05
  • Vue开发指南之重点知识梳理

    Vue开发指南之重点知识梳理

    这篇文章主要介绍了Vue开发指南之重点知识梳理,对Vue框架感兴趣的同学,可以参考下
    2021-05-05
  • vue3+ts+element-plus 表单el-form取消回车默认提交

    vue3+ts+element-plus 表单el-form取消回车默认提交

    文章主要讲述了在使用Element UI的el-form和el-input组件时,按回车键导致页面刷新的问题,并提供了四种解决方法:阻止表单的默认提交事件、阻止keydown回车事件、在指定的el-input组件上阻止keydown回车事件以及在el-input中按特定组合键进行查找,感兴趣的朋友一起看看吧
    2025-01-01
  • vue3中ref和reactive的区别举例详解

    vue3中ref和reactive的区别举例详解

    ref和reactive是Vue3中构建响应式数据的两大核心 API,虽然它们在使用上相似,但底层机制和适用场景有明显不同,这篇文章主要介绍了vue3中ref和reactive区别的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-06-06

最新评论