1.Vue2.0推荐开发环境

软件		功能
HomeBrew	3.2.3	Mac系统下的包管理器，类似于Linux的apt-get，rpm
Node.js	16.5.0	JavaScript 运行环境（runtime），操作系统不能直接运行各种编程语言的，通过Node.js 来解释执行JavaScript，类似Java对应的JVM
npm	8.19.3	Node.js下的包管理器，类似于Mac下的Homebrew
webpack	5.75.0	Vue的组件都是后缀为.vue的文件，webpack负责把他们翻译打包成.js 文件
vue-cli	2.9.6	用来生成模板的Vue工程，相当于按照设计好的图来盖房子

2. 安装brew

Mac 系统自带了HomeBrew，如果没有的话，可以通过如下命令安装

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

如果需要输入密码时，输入开机密码继续下载，下载完成后提示重启终端或者运行命令

source ~/.zprofile 

安装完成后可以通过 brew - v 查看Homebrew的版本

hfl-mac:~ hfl$ brew -v
Homebrew 3.2.3-49-g35c9df4
Homebrew/homebrew-core (git revision 5b6f3f2af7; last commit 2021-07-21)
Homebrew/homebrew-cask (git revision ed9c024126; last commit 2021-07-21)

3. 安装Node.js

在终端中运行以下命令：

brew install nodejs

安装过程中可能出现如下错误：

hfl-mac:~ hfl$ brew install nodejs
Warning: You are using macOS 12.
We do not provide support for this pre-release version.
You will encounter build failures with some formulae.
Please create pull requests instead of asking for help on Homebrew's GitHub,
Twitter or any other official channels. You are responsible for resolving
any issues you experience while you are running this
pre-release version.==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/icu4c-69.1.big_sur.bottle.tar.gz
curl: (22) The requested URL returned error: 404                              Warning: Bottle missing, falling back to the default domain...
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/manifests/69.1
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/319330d53dab436f7e6bbe478539f29d41abb6be79788b06615f28006a82b30c--icu4c-69.1.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/blobs/sha256:d46b8ec5c3db629e7848e9fd31e5ec99ed952d9c81c8936a2511fae803d831fd
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/97d30dd52cbc3b71ade0f77163899dd14a8a9dd31a5ac7a211c909ff6c4a5f4e--icu4c--69.1.big_sur.bottle.tar.gz
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/libuv-1.42.0.big_sur.bottle.tar.gz
curl: (22) The requested URL returned error: 404                              Warning: Bottle missing, falling back to the default domain...
==> Downloading https://ghcr.io/v2/homebrew/core/libuv/manifests/1.42.0
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/4ce1023eed1fe46fcf9d27bb80ca32edb847285d1976eb5663e78eebf13c5982--libuv-1.42.0.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/libuv/blobs/sha256:b11e3f74f2caca70d334f8d1172c50ac06d9d53018b959d8fbd0310783c05652
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/ca0b6de87b9ae9718857239be9cad93ad7593988e6fcdbe96cd648239ba17ef7--libuv--1.42.0.big_sur.bottle.tar.gz
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/jemalloc-5.2.1_1.big_sur.bottle.tar.gz
curl: (22) The requested URL returned error: 404                              Warning: Bottle missing, falling back to the default domain...
==> Downloading https://ghcr.io/v2/homebrew/core/jemalloc/manifests/5.2.1_1
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/a8e64cca0eade3cf7d326aa9c46f84455dd632abc04c23827e9ec6dec70fa736--jemalloc-5.2.1_1.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/jemalloc/blobs/sha256:7797788be2da677a8343ac6199e2f180c2e6b627c0b9abc9da133fbc34e86678
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/4da8916c2d8ea0ef05efd105e54e72400bec701f03012ba955e94dbd70f68c74--jemalloc--5.2.1_1.big_sur.bottle.tar.gz
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/libev-4.33.big_sur.bottle.tar.gz
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/9dd82e70208c225e855e7d370e35ea59827d2f699f6f2ac7a5a7327d36b90959--libev-4.33.big_sur.bottle.tar.gz
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/nghttp2-1.44.0.big_sur.bottle.tar.gz
curl: (22) The requested URL returned error: 404                              Warning: Bottle missing, falling back to the default domain...
==> Downloading https://ghcr.io/v2/homebrew/core/nghttp2/manifests/1.44.0
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/463f4fca4b447c5a84fb81213717d06761e2d087a6fb6d384951752fa9503b1c--nghttp2-1.44.0.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/nghttp2/blobs/sha256:8db30133ceaeeb92c004d98f43d8142c499c018654dea07aae604201037af848
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/8f2caddc4158a41091ce59f2b010f0171b49d20eaa81ad887f7aeb656b72202e--nghttp2--1.44.0.big_sur.bottle.tar.gz
==> Downloading https://mirrors.ustc.edu.cn/homebrew-bottles/node-16.5.0.big_sur.bottle.tar.gz
curl: (22) The requested URL returned error: 404                              Warning: Bottle missing, falling back to the default domain...
==> Downloading https://ghcr.io/v2/homebrew/core/node/manifests/16.5.0
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/5b4e56fb22b80c52818f36ad3dfb18023cc48799498d1d4d4dfee32ffdcb252b--node-16.5.0.bottle_manifest.json
==> Downloading https://ghcr.io/v2/homebrew/core/node/blobs/sha256:f5c5fbc689ad6a0b535823f0f8ff12f4e147106553d5236f79f2a1c04750271b
Already downloaded: /Users/huangfl517/Library/Caches/Homebrew/downloads/ce0d4a49694d168908c8803f1559ef69252a6ebef68189039332bc048656d6a1--node--16.5.0.big_sur.bottle.tar.gz
==> Installing dependencies for node: icu4c, libuv, jemalloc, libev and nghttp2
==> Installing node dependency: icu4c
==> Pouring icu4c-69.1.big_sur.bottle.tar.gz
tar: Error opening archive: Failed to open '/Users/huangfl517/Library/Caches/Homebrew/downloads/49a336b747676095aec58aaefce5042d2f564b87f263c52a5fef10715ff5fcfd--icu4c-69.1.big_sur.bottle.tar.gz'
Error: Failure while executing; `tar --extract --no-same-owner --file /Users/huangfl517/Library/Caches/Homebrew/downloads/49a336b747676095aec58aaefce5042d2f564b87f263c52a5fef10715ff5fcfd--icu4c-69.1.big_sur.bottle.tar.gz --directory /private/tmp/d20221128-86502-y9sk6f` exited with 1. Here's the output:
tar: Error opening archive: Failed to open '/Users/huangfl517/Library/Caches/Homebrew/downloads/49a336b747676095aec58aaefce5042d2f564b87f263c52a5fef10715ff5fcfd--icu4c-69.1.big_sur.bottle.tar.gz'

手动安装icu4c, libuv, jemalloc, libev and nghttp2即可。Nodejs安装完成后可通过node - v查看版本

hfl-mac:~ hfl$ node -v
v16.5.0

查看nodejs的安装目录，获取nodejs模块安装目录访问权限

hfl-macbookpro:~ huangfl517$ which node
/usr/local/bin/node
hfl-macbookpro:~ huangfl517$ sudo chmod -R 777 /usr/local/bin/node

4. 安装淘宝镜像（NPM）

通过命令npm install -g cnpm --registry=https://registry.npm.taobao.org 安装cnpm淘宝镜像，然后通过cnpm -v 查看安装的版本

npm install -g cnpm --registry=https://registry.npm.taobao.org
hfl-mac:~ hfl$ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fsadded 360 packages in 20s11 packages are looking for fundingrun `npm fund` for details
npm notice 
npm notice New major version of npm available! 7.19.1 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g npm@9.1.2 to update!
npm notice 
hfl-mac:~ hfl$ cnpm -v
cnpm@8.4.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@8.19.3 (/usr/local/lib/node_modules/cnpm/node_modules/npm/index.js)
node@16.5.0 (/usr/local/Cellar/node/16.5.0/bin/node)
npminstall@6.6.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin x64 21.6.0 
registry=https://registry.npmmirror.com

5. 安装webpack

执行安装命令

sudo cnmp install webpack -g

安装完成后，使用webpack - v 查看版本，会提示是否安装webpack-cli, 这里我们输入no，手动安装

sudo cnpm install webpack-cli -g

再次查看webpack 版本，提示安装成功

6. 安装vue

执行如下命令安装vue

sudo cnpm install vue-cli -g

查看vue版本

hfl-mac:~ hfl$ vue -V
2.9.6

7. 通过模板创建示例工程

在硬盘上，创建一个工程文件夹，然后执行如下命令

vue init webpack-simple mydemo

安装项目依赖

cnpm install

如果cnpm不行的话，可以执行npm install试一下，目前我还没有弄太明白之间的区别

安装vue 路由模块vue-router和网络请求模块vue-resource

sudo cnpm install vue-router vue-resource --save

启动项目

npm run dev

本文参考原文地址：Macbook搭建vue开发环境