Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

2024-02-27 1196阅读

温馨提示:这篇文章已超过401天没有更新,请注意相关的内容是否还可用!

最近换了台新 Mac,所有的配置和软件就重新安装下,顺便写个文章。

一、环境配置

1. 安装 Homebrew

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

安装 Homebrew【Mac 安装 Homebrew】

通过国内镜像安装会比较快

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

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

安装 Git 后再运行此脚本,在系统弹窗中点击“安装”按钮

点击安装按钮,安装 Git 之后在重新运行此命令,即可安装 Homebrew

可以输入 y 继续安装 Core、Cask、services

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

按照提醒进行配置即可,最后可以输入 brew -v 查看版本

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

2. 安装 Git

  1. 【Git 地址】

  2. Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  3. git -v 查看版本

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

3. 安装 Nvm

  1. 安装 nvm 【Mac M2 芯片安装 nvm】

也是通过 gitee 拉取镜像安装

git clone https://gitee.com/mirrors/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
  1. 配置 .zshrc 文件
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  1. 【nvm 命令及解释】

安装步骤以及展示

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

4. Node 安装

  1. 【node 地址】
  2. nvm 安装

安装 node 版本

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

5. Nrm 安装

  1. npm 安装
npm install -g nrm

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

命令解释
nrm --version查看版本
nrm ls列出所有源, * 表示正在使用的源
nrm use npm切换源
nrm add 添加源 nrm add npmName http://npm.company.com/
nrm del 删除源 nrm delete npmName
nrm current显示当前源
nrm test测试源速度 nrm test npmName

6. 安装 Yarn 和 Pnpm

  1. npm 安装

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

7. 安装 Nginx

  1. 使用 brew 安装
  2. 查看 nginx 信息
brew info nginx

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

可以看到 nginx 还未在本地安装

  1. 安装 nginx
brew install nginx

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  1. 可以看到 nginx 在 M3 芯片上和 intel 芯片位置不一样,我们可以 open 打开看下
/opt/homebrew/etc/nginx/servers/. # 位置
open /opt/homebrew/etc/nginx # 打开

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  1. nginx 启动程序路径,该路径下的 bin/nginx 为启动命令
open /opt/homebrew/Cellar/nginx # 打开

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  1. 启动 nginx

直接命令行输入 nginx,没有报错即为启动成功

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  1. 打开浏览器验证,访问 localhost:8080

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  1. nginx 常用命令
命令解释
nginx启动 nginx
nginx -s stop快速停止命令
nginx -s quit退出命令
nginx -s reload重新加载文件
nginx -t检查文件

可以输入 nginx -s quit 再刷新刚刚的 8080 页面看下

二、软件安装

1. Xcode 安装

app Store 安装即可

2. Python2 安装

可能有些老项目或者其他,需要 python2 版本

M3 芯片未安装 Xcode 情况

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

  1. 【Python 2.7.18 下载】

  2. 安装包下载 python-2.7.18-macosx10.9.pkg.zip

点击上面链接进行下载,然后安装即可,打开新的终端页面输入 python --version

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

安装 Xcode 之后再输入 python3 --version

Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

3. Chrome 浏览器安装

  1. 【Chrome 下载】
  2. 最下面有百度网盘

4. 安装 Vscode

  1. 【Vscode 下载】

  2. 安装包下载

    VSCode-darwin-arm64.zip

  3. 【VSCODE 插件推荐】

  4. 配置 code . 打开项目

  • 打开配置 nvm 的 .zshrc 文件
  • 添加环境变量,把 export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin" 放在文件中即可
    open -e  ~/.zshrc # 打开文件
    source ~/.zshrc # 更新文件
    

    Mac M1/M2/M3 芯片环境配置以及常用软件安装-前端

    5. 安装微信小程序开发工具

    【微信开发者工具下载】

    6. 支付宝小程序开发者工具

    【小程序开发者工具】

    三、百度网盘地址

    包含:Chrome 浏览器、python2.7 安装包、Vscode 安装包、微信小程序开发者工具、支付宝小程序开发者工具

    链接: https://pan.baidu.com/s/1-_v6FenWYyN5xJ5pHNwWMw 提取码: m2m3

    引用

    • 【Mac 安装 Homebrew】
    • 【Mac M2 芯片安装 nvm】
    • 【nvm 命令及解释】
    • 【VSCODE 插件推荐】
VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]