MAC安裝vue環(huán)境保姆級(jí)教程(homebrew、nvm、nodejs、npm、vue、axios等)

更新時(shí)間：2025年12月01日 11:27:05 作者：Xd聊架構(gòu)

Vue.js是一種用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,它在前端開(kāi)發(fā)中得到了廣泛應(yīng)用,這篇文章主要介紹了MAC安裝vue環(huán)境(homebrew、nvm、nodejs、npm、vue、axios等)的相關(guān)資料,需要的朋友可以參考下

前言

在 macOS 上搭建前端開(kāi)發(fā)環(huán)境，是每一位開(kāi)發(fā)者入門或換機(jī)時(shí)的“必經(jīng)之路”。一個(gè)穩(wěn)定、高效的開(kāi)發(fā)環(huán)境，不僅能提升編碼效率，還能避免因版本沖突或依賴問(wèn)題帶來(lái)的各種“坑”。而在眾多工具鏈中，Homebrew、nvm、Node.js 和 npm 是構(gòu)建現(xiàn)代 JavaScript/前端項(xiàng)目不可或缺的核心組件。

你是否也曾因?yàn)檎也坏胶线m的安裝教程而苦惱？是否在配置 nvm 后發(fā)現(xiàn)命令無(wú)法使用而一頭霧水？又或者安裝了 Node.js 卻無(wú)法自由切換版本而感到困擾？

本文將手把手帶你完成在 macOS 系統(tǒng)下，從零開(kāi)始安裝和配置 Homebrew → nvm → Node.js → npm 的完整流程。無(wú)論你是剛接觸命令行的新手，還是想系統(tǒng)梳理安裝步驟的開(kāi)發(fā)者，這篇文章都能為你提供清晰、可靠的操作指引。

我們將一步步介紹：

如何通過(guò) Homebrew（Mac 的包管理神器）安裝 nvm；
如何正確配置 nvm 以實(shí)現(xiàn)多版本 Node.js 的自由切換；
最后使用 nvm 安裝指定版本的 Node.js 和 npm，并驗(yàn)證安裝結(jié)果。
整個(gè)過(guò)程簡(jiǎn)潔明了，附帶常用命令速查，助你快速搭建起屬于自己的現(xiàn)代化前端開(kāi)發(fā)環(huán)境。準(zhǔn)備好了嗎？打開(kāi)終端，讓我們開(kāi)始吧！

一、安裝Homebrew

1.安裝brew

檢查電腦是否有安裝 Homebrew，在終端輸入

brew -v  //檢查 brew 的版本

//已安裝：則出現(xiàn)版本號(hào)，則表示已安裝Homebrew
//未安裝：-bash: brew: command not found

未安裝則在終端執(zhí)行（已安裝則跳過(guò)）：

//安裝Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

//安裝完成查看版本號(hào)，
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

顯示安裝的服務(wù)：brew services list

安裝服務(wù)啟動(dòng)、停止、重啟：brew services start/stop/restart serverName

二、使用 Homebrew 安裝 nvm

1.nvm安裝

brew install nvm

安裝成功后不能直接使用 nvm 命令，安裝成功之后，還不能直接使用 nvm 命令，需要進(jìn)行以下配置，將以下命令復(fù)制到終端執(zhí)行：

echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

. ~/.bash_profile   //需要重新定向來(lái)源

執(zhí)行 nvm 命令

nvm list

2.nvm 常用命令介紹

nvm list                 ##是查找本電腦上所有的node版本
    - nvm list     ##查看已經(jīng)安裝的版本
    - nvm list installed ##查看已經(jīng)安裝的版本
    - nvm list available ##查看網(wǎng)絡(luò)可以安裝的版本

nvm install    ##安裝指定版本node
nvm uninstall  ##卸載制定的版本
nvm install stable             ## 安裝最新穩(wěn)定版 node，當(dāng)前是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                                     ##查看當(dāng)前的版本

nvm ls                                     ## 列出所有安裝的版本
nvm ls-remote                     ## 列出所有遠(yuǎn)程服務(wù)器的版本（官方node version list）
nvm current                          ## 顯示當(dāng)前的版本

nvm alias       ## 給不同的版本號(hào)添加別名
nvm unalias                      ## 刪除已定義的別名

nvm reinstall-packages      ## 在當(dāng)前版本 node 環(huán)境下，重新全局安裝指定版本號(hào)的 npm 包

nvm on                         ##打開(kāi)nodejs控制
nvm off                     ##關(guān)閉nodejs控制
nvm proxy                 ##查看設(shè)置與代理
nvm node_mirror [url] ##設(shè)置或者查看setting.txt中的node_mirror，如果不設(shè)置的默認(rèn)是 https://nodejs.org/dist/
nvm npm_mirror [url]  ##設(shè)置或者查看setting.txt中的npm_mirror,如果不設(shè)置的話默認(rèn)的是： https://github.com/npm/npm/archive/.

nvm use [version] [arch] ##切換制定的node版本和位數(shù)
nvm root [path]          ##設(shè)置和查看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環(huán)境

npm install -g @vue/cli

npm install webpack -g

vue版本對(duì)應(yīng)關(guān)系
Vue 3 需要 vue-router@4.x 或更高版本
Vue 2 使用 vue-router@3.x 版本

npm install vue-router@4

總結(jié)

到此這篇關(guān)于MAC安裝vue環(huán)境(homebrew、nvm、nodejs、npm、vue、axios等)的文章就介紹到這了,更多相關(guān)MAC安裝vue環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: