在 M1 芯片的 Mac 上安装iOS开发环境和H5前端开发环境. 这些只是我个人参考网上文章的安装过程, 做一下记录, 方便以后查阅, 有些步骤有可能有更好的方案, 但是我就是这么过来的, 而且成功了.

1. 安装 Xcode 和 Git

苹果开发者必须要装的编译器, 安装 Xcode 比较简单, 直接去 App Store 下载安装就可以了, 这个软件安装好后会把 git 也安装上. 下载安装过程比较漫长, 我们可以同时安装其他的东西. 等他安装好了, 运行一下就可以了.

2 安装或者更新 homebrew

根据官网规划, arm 版 homebrew 必须安装在 /opt/homebrew 路径下, 而不是以前的 /usr/local/Homebrew.

切换到/opt目录

cd /opt

创建homebrew目录

sudo mkdir homebrew

修改目录所属用户

sudo chown -R $(whoami) /opt/homebrew

安装 arm 版 homebrew

curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew

配置 homebrew 环境变量

按照以下步骤执行命令:

(1) 查看终端当前 shell 环境, 新电脑都是 zsh, 所以就按照zsh配置为例, 执行命令输出结果如图所示.

echo $SHELL

(2) 用 vi 命令打开配置文件 .zshrc, 配置文件在家目录下, 第一次如果没有, vi命令保存时候会新建的, 不用担心.

# 打开配置文件, 新建的, 不用担心.
vi ~/.zshrc

(3) 添加如下配置并保存退出.

export BREW_DIR="/opt/homebrew/bin"
export PATH="$BREW_DIR:$PATH"

(4) 重新加载配置文件, 然后新打开一个终端窗口就可以正常使用 brew install xxx 命令愉快的安装其他工具了.

source ~/.zshrc

不会用 vi 命令的自行百度, 我相信大家应该都会用. 😄😄😄

3. 安装 rvm

rvm 是 ruby 的安装和版本管理工具. 用下面命令安装 rvm. 有可能需要科学上网.

curl -L https://get.rvm.io | bash -s stable

查看版本

rvm -v

查看 ruby 源是不是国内源, 不是的话, 需要替换一下.

gem sources -l

删除旧的 ruby 源

gem sources --remove https://rubygems.org/

添加国内的源, 添加完成后再查看一下是否安装成功

gem sources --add https://gems.ruby-china.com/

4. 安装 ruby

rvm 是 ruby 的安装和版本管理工具. 当然也可以使用 brew 来安装 ruby

查看已知的 ruby 版本

rvm list known

查询已安装的 ruby 版本

rvm list

使用 rvm 安装指定版本的 ruby

rvm install 3.0.0

卸载一个已安装版本

rvm remove 3.0.0

查看版本

ruby -v

如果 rvm 没有安装成功, 可以使用最新版本的 homebrew安装, 安装命令: brew install ruby

5. 安装 cocoapods

cocoaPods 是用 ruby 实现的, 要想使用它首先需要有 ruby 的环境, mac 系统自带 ruby, 但是往往版本过低, 有可能无法正常支持 cocoaPods 的使用，所以需要先安装更新升级 rvm 和 ruby。

安装最新版本

sudo gem install cocoapods

安装指定版本, 如 1.10.2

sudo gem install cocoapods -v 1.10.2

配置 cocoapods 本地库 pod setup 这个命令已经失效, 所以只能手动获取 sepcs 文件. cocoapods 的 sepcs 文件是放在这个目录里面 ~/.cocoapods/repos, 所以可以直接 cd 到该目录下, 然后运行命令:

# 切换目录
cd ~/.cocoapods/repos

# 取最新分支的, 否则太大, 容易失败.
git clone --depth=1 https://github.com/CocoaPods/Specs.git master

6. 安装 nvm

nvm 用来管理多版本同时存在的情况, 可以安装指定版本的 node 和 npm, 使用 brew install nvm 命令安装 nvm, 安装完成后根据提示, 需要在当前用户(~)目录下创建一个隐藏文件夹.nvm, 并在配置文件中添加一些配置.

brew install nvm

安装完成后创建 .nvm 文件夹

mkdir ~/.nvm

在配置文件.zshrc 中添加的内容如下, 用 vi 命令编辑添加即可, 如果内容不同, 就根据提示复制添加即可;

export NVM_DIR="$HOME/.nvm"
     [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
     [ -s "$NVM_DIR/bash_completion.d/nvm" ] && . "$NVM_DIR/bash_completion.d/nvm" # This loads nvm bash_completion

让配置文件生效

source ~/.zshrc

查看版本

nvm -v

7.安装 node 和 npm

安装 14以下 的版本，先进入 Rosetta shell 环境

arch -x86_64 zsh

查看所有可安装的版本

nvm ls-remote

安装最新稳定版本

nvm install stable

安装指定版本, 如 v14.17.3, 有的版本号前边带 v, 有的不带, 根据查看结果即可.

nvm install v14.17.3

所有已经安装的版本

nvm ls

切换使用指定的版本, 如 v14.17.3,

nvm use v14.17.3

查看当前使用的版本

nvm current

设置默认 node 版本, 如 v14.17.3, 否则有可能每次打开 vscode 都会报错

nvm alias default v14.17.3

解除当前版本绑定

nvm deactivate

删除某版本的 node, 如 v14.17.3

nvm uninstall v14.17.3

查看 node 和 npm 版本, 分别执行以下两条命令

node -v
npm -v

查看本地配置

npm config list

设置 prefix

// node 路径
npm config set prefix /Users/用户名/.nvm/versions/node/v16.20.0/bin/node

记得换成自己的 node 路径

设置淘宝镜像源

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

卸载某个设置, 如: prefix

npm config unset prefix

创建 vue 项目

// 项目名为 vue-demo02
npm init vue@latest

// 根据提示, 创建成功后, 执行如下命令
cd vue-demo02

npm install

// 安装 element-plus
// 可选操作, 创建的时候需要选择 TypeScript  Eslint
npm install element-plus --save

npm run dev

8. 安装 yarn

使用 brew 命令安装. 安装完成后即可使用,

brew install yarn

查看版本

yarn -v

9. 指定架构安装

// arm64
arch -arm64 brew install yarn

// x86_64
arch -x86_64 brew install yarn

M1 安装 rvm ruby homebrew cocoapods nvm node npm yarn