关键词：
参考技术A M1芯片出来了有一段时间了，各类软件的兼容性已经跟进的差不多了，迫于 M1 实在太香，我的 M1 Macbook 也于本周到达了我的手上。在花费了两三个小时搭建完开发环境后，立马用它开始干活了。这几天的感受只有寥寥一语可以概括：太 TM 香了！太强了作为一个前端开发者，我可以负责任的说前端开发的场景 M1 已经可以完全覆盖，并且体验非常好。目前我依赖的开发环境，并且已经跑在 M1 Mac 上的如下：适配 m1 的 Vscode Insiders 版本 + Node v15(on arm) + Node v14 (on intel) + Nvm + Cocoapods + Xcode + Flutter。可以看到，大前端这一套是完全能够覆盖的。
我在 github 的 issue 中经常看到有关于 m1 安装环境的问题，为了帮助不愿意翻 issue 的开发者，遂决定写下这篇文章记录前端环境的搭建问题。
我会从以下几个步骤来记录：
Xcode 是苹果开发者工具，是一个功能非常强大的 IDE，可以用来开发苹果应用，并且自带了 git 环境, 并且有咱们后续依赖的 Xcode Command line tool , 先进入 app store 中安装 Xcode。安装好之后再进入后续步骤
如果你是一个 mac 老用户，那自然不用我介绍什么是 Homebrew 。若是你是一个新用户，那么请你一定要安装 Homebrew ，并使用它来管理 Mac 中的各类环境依赖。通过👇的命令即可安装 Homebrew
在终端中执行如下命令安装 Homebrew，安装 Homebrew 的时候，常常会因为网络问题导致安装失败,这个问题只能依赖大家自行解决科学上网了。
Nvm 是一个管理 Node 版本的工具，当项目多了以后，总会碰到需要切换 Node 环境的时候，所以推荐大家使用 Nvm 来安装 Node。
若是你已经按上述步骤安装好了 Homebrew，那么你可以直接通过 Homebrew 的命令轻松安装 Nvm
若是你不想使用 Homebrew 管理依赖，那么用 👇 的 curl 直接安装 Nvm 也是可以的
安装好 nvm 后，需要将环境变量写入我们的 shell 配置文件中。
如果你的默认 shell 的 zsh，那么将环境变量命令复制进 .zshrc :
如果不使用 zsh，那么将环境变量复制进 bash 中，通过如下命令创建 bash_profile，并且编辑 bash_profile。
最后将以下环境变量脚本 copy 进 shell 配置文件中：
至此 Nvm 已经安装好，可以尝试在命令行中输入 nvm，你可以看到 nvm 已经正常工作了。
接下来我们通过 nvm 来安装 Node，我们先安装适配了 M1 的 node 版本。
该命令运行完后，会执行很久，编译 node ，大家耐心等就好了，大概需要 5-10 分钟，就会提示安装成功。再提醒一句，报任何错误，首先先检查是不是网络问题，例如 443 、 connect timeout 等，如果是网络问题，建议科学上网。
安装 Node 的部分写的很简单，因为按这个步骤，一般不会出问题。而当你用 nvm 尝试去安装 v14 及以下的 Node 版本时，大概率会报错，而我们在工作中恰恰又可能依赖 v14 及以下的 lts 版本。那么为什么会报错呢？究其原因还是因为低版本的 node 并不是基于 arm64 架构的，所以不适配 M1 芯片。在这里教大家两个方法，就能成功安装上低版本 Node。
在终端中，输入：
通过这个命令可以让 shell 运行在Rosetta2下。
之后你可以通过 nvm install v12 来安装低版本 Node。
在此之后，您可以不用在 Rosetta2 中就可以使用安装的可执行文件，也就是说，您可以将 Node v15与其他节点版本互换使用。
方法二就是通过 Rosetta2 来启动终端，这样通过 Rosetta2 转译到 x86 架构中执行安装，也一样可以安装成功。
至此，我们的 M1 就已经完成了 git + 各版本 Node + npm 的搭建，完成这部分工作后，前端项目已经可以正常运行，各位买了 M1 Mac 的前端小伙伴又能愉快的干活了。希望本文能够帮助被 M1 的开发环境困扰过的您。
【M1芯片Mac】Nuxt构建太慢
】【M1芯片Mac】Nuxt构建太慢【英文标题】：【M1chipMac】Nuxtbuildistooslow【发布时间】：2021-11-0211:48:10【问题描述】：我正在我的新M1芯片机器(Mac)上为Nuxt项目开发环境。问题是Nuxt项目的构建速度太慢了。我将nodeenv安装到我的项目... 查看详情
xcode搭建opengl环境（m1芯片、xcode13）
参考技术A首先，搭建前需要如下几个库：如果是M1芯片，编译会报这个错此时只要在BulidSettings->ExcludeArchiectures添加arm64即可创建一个c++类型的文件，命名为main，创建的时候去掉勾选同时创建头文件的对勾。如有一下报错重新... 查看详情
m1芯片mac配置flutter开发环境(代码片段)
👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇1.配置iOS开发环境（1）下载并安装Xcode直接在AppStore上搜索并下载最新版本的Xcode。（2）安装Cocoapods因为macm1笔记本都会自带可用的ruby版... 查看详情
flutter-macos(m1)开发环境搭建(代码片段)
文章目录flutter-macos(M1)开发环境搭建1.下载fluttersdk2.解压缩3.配置环境变量4.检查5.其他配置5.1gradle5.2打包，仓库等配置参考flutter-macos(M1)开发环境搭建1.下载fluttersdk天翼云网盘地址：https://cloud.189.cn/t/Uf6vqqUV7bU3https://cloud.189.... 查看详情
如何在 mac M1（Apple 芯片）上使用 google_sign_in api 进行开发
】如何在macM1（Apple芯片）上使用google_sign_inapi进行开发【英文标题】：howtodevelopusinggoogle_sign_inapionmacM1(Applesilicon)【发布时间】：2021-11-0300:27:33【问题描述】：我最近开始在M1mac上使用颤振开发一个项目，我所有的依赖项都可以正... 查看详情
应用程序 Spyder 启动可能产生错误 Mac M1 芯片
】应用程序Spyder启动可能产生错误MacM1芯片【英文标题】：ApplicationSpyderlaunchmayhaveproducederrorsMacM1Chip【发布时间】：2021-05-0101:10:54【问题描述】：嘿，亲爱的，我正在尝试在我的anaconda环境中启动spyder，但我遇到了这个错误。Applic... 查看详情
vue开发环境搭建（mac）
一、初识由于个人工作原因以及技术需要一个提升，略晚的开始初探Vue ~。~二、那么Vue是什么呢？他就是一个前端的框架，特点是数据双向绑定、组件化。 三、推荐开发环境 四、环境安装 打开终端运行以下命... 查看详情
前端开发环境搭建以及如何跨域
前端本地开发环境搭建总结：安装nodejs环境（推荐6.0以后的LTS版本），安装完之后打开终端（mac平台），windows平台可以WIN+R打开运行，输入cmd，打开命令窗口，输入npm--version，如果能看到版本，说明已经安装成功；在本地电脑的... 查看详情
最新m1mac如何安装python（miniforge）并搭建环境(代码片段)
...文章目录【最新】M1Mac如何安装Python（miniforge）并搭建环境STEP①：下载shell脚本STEP②：执行shell脚本STEP③：检查是否可以使用Conda命令和Python附录：创建一个Conda虚拟环境》》》🎁CSDN直播课&解答群... 查看详情
游戏开发环境unity使用mac电脑开发，开发环境的搭建（macminim1vscodegit好用工具）(代码片段)
...、Git无法自动补全的问题九、Mac安卓模拟器（兼容M1芯片）十、Mac免费好用工具推荐1、iTerm2终端2、Alfred（应用快捷查找）3、EasyFind（类似于Everything）4、Xnip或iShot（截图工具）5、GIPHYCapture（GIF... 查看详情
在m1芯片的macbookpro上高效开发android的正确姿势(代码片段)
前言2020年11月，苹果发布了M1芯片以及搭载M1芯片的Mackbookpro，由于我的老笔记本还是17款的8G内存的Macbookpro，已无法满足高效工作的需求，而M1芯片在各个自媒体的评测中都取得了非常惊人的性能成就，于是我... 查看详情
支持m1芯片mac电脑的adobephotoshop2021formac中文版本
长久以来，Photoshop在macosM1芯片无法安装最新版本，随着Adobe官方已全面兼容M1芯片的Mac，但是网友发布，m1芯片的Mac，photosho2021破解版本依然无法安装，会报501错误。之前微博大神制作了photosho2019的m1版本&#x... 查看详情
支持m1芯片mac电脑的adobephotoshop2021formac中文版本
长久以来，Photoshop在macosM1芯片无法安装最新版本，随着Adobe官方已全面兼容M1芯片的Mac，但是网友发布，m1芯片的Mac，photosho2021破解版本依然无法安装，会报501错误。之前微博大神制作了photosho2019的m1版本&#x... 查看详情
mac前端开发环境搭建(代码片段)
目录IDE选择环境搭建一、先了解一下背景二、安装nvm三、统一node版本四、安装项目所有依赖库。五、运行 IDE选择visualstudiocode。相比于webStorm更轻量级，功能没有webStorm那么强大，需要自己安装一些插件，比如vetu... 查看详情
mac前端开发环境搭建(代码片段)
目录IDE选择环境搭建一、先了解一下背景二、安装nvm三、统一node版本四、安装项目所有依赖库。五、运行 IDE选择visualstudiocode。相比于webStorm更轻量级，功能没有webStorm那么强大，需要自己安装一些插件，比如vetu... 查看详情
m1mac安装homebrew报错
...命令等待执行结束后发现报错找不到命令：发现是因为M1芯片的包安装位置不在是以前的/usr/local/而是/opt/homebrew，所以要将配置文件里的环境变量改过来3.追加环境变量4.保存5.使生效6.检查是否成功查看当前使用的shell如果是/bin/z... 查看详情
快速查看mac应用程序是不是与m1兼容的方法
...技术A一个新的网站可能成为应用程序与运行在AppleSilicon芯片上的Mac兼容的指南。此网站列出了已移植到可在Apple的新M1处理器上运行的应用程序。它还可以判断应用程序是否与Rosetta2兼容，后者是macOSBigSur功能，允许M1Mac运行为英... 查看详情
在mac上搭建reactnative开发环境
...过在window环境下开发ReactNative项目，今天说说怎么在mac上搭建一个RN的开发环境。配置mac开发环境基本环境安装1.先安装Homebrew：用于安装NodeJS和其他工具。注：Homebrew详解，对这个比较了解的略过，我也是用mac没多久，这里给小... 查看详情