Macbook pro(M1芯片)前端开发环境搭建

6,936 阅读2分钟

M1芯片介绍

-- 优点

1. 续航优势:MacBook Air 最长续航时间18小时;MacBook Pro 最长续航时间20小时

2. 散热控制:MacBook Air「无风扇设计」,MacBook Pro 的风扇也只有在需要高性能工作时才会运转

3. M1 芯片 Mac 还有一个独占功能,运行 iPhone/iPad 上的应用,开发者将应用上架了 Mac App Store,就可以直接在 Mac 上使用 iOS 应用,在 Mac 上打开饿了么订个外卖,或是打开微博客户端刷个微博都不成问题。

-- 缺点:

1. 很多软件可能还没适配,存在兼容性问题

2. 目前 M1 版本的 Mac 并不能安装 Windows 操作系统,就算后期通过虚拟机等方式支持,也别忘了 M1 芯片是 ARM 架构的,兼容性会非常差。

软件兼容性查看网站:isapplesiliconready.com/zh

1. vscode

官网:code.visualstudio.com

常用插件安装:

截屏2021-12-15 下午3.46.10.png

2. homebrew

Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,十分方便快捷。

官网:brew.sh

命令:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

官网提供地址不稳定,安装容易断掉,我试了好几次都失败了

更改其他源安装:我选择的是来源是1-中科大下载源

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

image.png

安装成功截图如下:

image.png

常见错误说明:gitee.com/cunkai/Home…

(1) 如果报错 command not found : brew ARM架构的芯片运行/opt/homebrew/bin/brew -v 查看Homebrew的版本号。 如果能用就是电脑PATH配置问题,重启终端运行 echo $PATH 打印出来自己分析一下。

$ brew -v // 刚开始无效,重启后生效
$ /opt/homebrew/bin/brew -v // 刚开始有效
$ echo $PATH // 刚开始没有brew,重启后有

重启终端后:可以正常显示path配置,也可打印版本号

(2) 常用命令

$ brew search wget  // 搜索包
$ brew install wget // 安装包
$ brew uninstall wget // 卸载包
$ brew info wget // 显示包信息
$ brew list // 查看已安装的包
$ brew list --cask // 查看已安装的包
$ brew upate // 更新homegrew
$ brew outdated // 列出可以升级的包
$ brew upgrade --force --greedy // 升级所有已安装的包
$ brew upgrade wget // 升级某些包
$ brew cleanup // 清理缓存

3. git

官网:git-scm.com/download/ma…

下载命令:

$ brew install git

安装截图:通过命令安装失败了,但是系统自带了git,可以直接使用。

截屏2021-07-12 下午6.03.41.png

(1) 常用命令

# 配置用户名
git config --global user.name "xxx"  
# 配置邮箱
git config --global user.email "xxx" 
# 生成密钥
ssh-keygen -t rsa -C "xxx"
# 查看配置信息
git config --list
# Git默认对大小写不敏感,更改为敏感
git config core.ignorecase false

(2)查看公钥:cat id_rsa.pub

  • 输入cd指令,进入当前用户目录
  • 输入ls -a指令,查看当前用户目录下所有文件,包括隐藏文件
  • 输入cd .ssh指令,进入.ssh目录
  • 输入ls指令,查看.ssh目录下的文件
  • 输入cat id_rsa.pub指令,查看id_rsa.pub文件中内容

(3)Github添加公钥

登录到Github ->右上角Setttings -> SSH keys ->Add key -> New SSH Key

image.png

4. nodejs, npm, yarn

(1) nodejs官网:nodejs.org/zh-cn/downl…

# 命令安装
brew install node
# 检查安装
node -v
npm -v

我直接通过官网包下载安装,node(v14.17.3)中自带npm(v6.14.13)

(2) yarn官网:yarn.bootcss.com/docs/instal…

  1. 直接通过npm安装
# 安装npm
sudo npm install -g npm
# 安装yarn
sudo npm install -g yarn
# 查看版本号
yarn --version
  1. 通过brew安装
# 安装
brew install yarn
#检查安装
yarn -v

通过brew命令安装失败了,如下图所示: image.png

  1. 直接通过如下命令安装成功,yarn版本为1.22.5
curl -o- -L https://yarnpkg.com/install.sh | bash

image.png

5. postman

官网下载地址:www.postman.com/downloads/

进入官网下载地址,点击“Download the App”,下载的是一个zip压缩包,解压后安装即可。

打开后会提示注册与登录,登录后可以在不同设备同步数据,Mac端的App使用和web端一致。

截屏2021-07-13 下午2.41.51.png

6. 终端利器 iTerm2 + oh my zsh

(1) iTerm2下载地址:macwk.com/soft/iterm2

iTerm2官网:iterm2.com/

下载后是一个zip文件,加压后直接运行即可。

(2) oh-my-zsh官网:ohmyz.sh/

oh-my-zsh主题配置:github.com/ohmyzsh/ohm…

安装命令如下:

$ sh -c "$(curl -fsSL <https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)>"

安装成功截图:

image.png

更改主题:

$ vim ~/.zshrc // 进入编辑
$ source ~/.zshrc // 立即生效命令

image.png

注意:使用zsh作为默认的shell,关机重启后,配置的环境变量就不生效了,必须运行source ~/.bash_profile,才能生效。

解决办法:在~/.zshrc文件最后,增加一行source ~/.bash_profile 截屏2021-07-19 下午5.00.48.png

7. charles抓包神器

charles官网下载地址:www.charlesproxy.com/

代理设置:手机端代理成电脑的IP,可用于手机开发调试,查看请求。

Proxy->Proxy Settings->Enbale transparent HTTP proxying

image.png

8. webstorm下载

官网下载地址:

www.jetbrains.com/webstorm/do…

要选择兼容M1芯片的版本: 截屏2021-07-19 下午5.12.50.png

9. Typora

Typora 是 一款 Markdown 的编辑器,可以实时编译转换,所见即所得。

但是最近发布的1.x开始收费了,beta 版本还是免费的