macOS 前端环境安装

雨巷深陌
772 阅读2分钟

最近把电脑换成了MacBook，记录了一些在环境安装中需要注意的要处和难点

系统偏好设置

1、系统偏好设置->触控板->滚动缩放：自然
2、系统偏好设置->光标与点按->轻点来点按
3、系统偏好设置->指针控制->触控板：启用拖移-三指拖移

chrome安装

下载

前端必备的浏览器
通过Safari访问chrome官网，直接在官网进行下载

插件推荐

插件下载地址

  • 彩云小译
  • Adblock Plus - 免费的广告拦截器
  • FeHelper(前端助手) 前端工具集
  • vue , react等等开发插件
  • 掘金插件

vs code安装

下载

前端开发工具

官网下载

插件推荐

  • ESLint
  • Vetur
  • JavaScript (ES6) code snippets
  • Prettier
  • Auto Close Tag
  • Auto Rename Tag
  • ES7+ React/Redux/React-Native

Homebrew安装

软件包管理工具

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

按照提示安装需要的下载源，桌面的Old_homebrew文件夹如果没有需要的文件可以删除

brew -v

检测是否安装成功

Git安装

安装

brew install git

关于ssh

生成shh

ssh-keygen -t rsa -C "shijl@163.com"

截屏2023-02-19 下午5.12.29的副本.png
生成并添加SSH Key

ssh-add ~/.ssh/id_rsa

查看SSH Key

cat ~/.ssh/id_rsa.pub

复制代码并加入具体的git仓库
截屏2023-02-19 下午5.16.57.png

nvm安装

安装

brew install nvm

安装完成后执行指令

这里需要确认当前使用的shell窗口执行的是什么
zsh->文件为.zshrc
bash->文件为.bash_profile
bash只需要把后续的.zshrc改成.bash_profile文件即可

echo "source $(brew --prefix nvm)/nvm.sh" >> .zshrc

修改之后，需要重新定向来源，复制以下命令并执行：

. ~/.zshrc

检测是否安装成功

nvm -v

如果安装失败使用 进入当前用户的 home 目录

cd ~

创建 .zshrc 文件 这里需要判断操作的类型，bash的话，创建的文件则为bash_profile

touch ~/.zshrc

编辑 .zshrc 文件

sudo vi ~/.zshrc

按i进入编辑模式,输入

export NVM_DIR=~/.nvm
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
## or
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

完成后按esc，输入:后输入w，回车，退出编辑模式 更新配置

source .zshrc

重新检测是否安装成功

常用指令

## 安装最新稳定版 node，当前是node v9.5.0 (npm v5.6.0)
nvm install stable

## 安装指定版本，可模糊安装，如：安装v4.4.0，既可nvm install v4.4.0，又可nvm install 4.4
nvm install <version>

## 删除已安装的指定版本，语法与install类似
nvm uninstall <version> 

## 切换使用指定的版本node
nvm use <version> 

## 列出所有安装的版本
nvm ls 

## 列出所有远程服务器的版本（官方node version list）
nvm ls-remote 

## 显示当前的版本
nvm current 

## 给不同的版本号添加别名
nvm alias <name> <version> 

## 删除已定义的别名
nvm unalias <name> 

## 在当前版本 node 环境下，重新全局安装指定版本号的 npm 包
nvm reinstall-packages <version>

node

## 此处安装的是14.4.0版本
nvm install 14.4.0

Flutter

移动端开发用，非必要安装，如果没有开发需要可以忽视

安装

前往官网下载需要的包

截屏2023-02-24 下午8.56.25.png 将文件解压到需要的文件夹
配置 flutter 的 PATH 环境变量：
使用open ~/.zshrc打开文件，并添加 PATH="$PATH:/Users/mac/app/flutter/bin"
注：$PATH 后的路径指向的是flutter解压后的文件路径
更新文件。

source ~/.zshrc
## 检测版本
flutter -h

出现截图内容则为安装成功 截屏2023-02-24 下午9.44.29.png

安装Xcode

在iOS设备上构建并运行Flutter应用程序，那么就需要下载安装Xcode9.0或更高版本。

在app stroe上安装Xcode即可

安装AS

在Android设备上构建并运行Flutter应用程序，那么就需要下载安装Android Studio（简称AS）。

具体的安装可参考文章
插件推荐

截屏2023-02-25 下午5.00.47.png

同意安卓生产许可

flutter doctor --android-licenses

一直选择y即可完成安装
截屏2023-02-25 下午2.12.53.png

设置镜像配置

详情文档可以前往官网进行查看 输入open ~/.zshrc，并在文件中输入并保存

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

输入source ~/.zshrc；再通过echo指令检测

~ % echo $PUB_HOSTED_URL
https://pub.flutter-io.cn
~ % echo $FLUTTER_STORAGE_BASE_URL
https://storage.flutter-io.cn

检测环境

flutter doctor -v

常见错误

Unable to find bundled Java version.
Android Studio (version 2022.1)     
✗ Unable to find bundled Java version.

方法1

cd /Applications/Android\ Studio.app/Contents/jre

ln -s ../jre jdk

ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk

方法2

截屏2023-02-25 下午3.22.56.png
复制jbr文件，并将副本改名为jre

截屏2023-02-25 下午3.24.04.png
重新检测环境

Electron

桌面端开发，非必要安装，如果没有开发需要可以忽视

electron本身在node中，只需要在项目中用npm加载就行了

npm i -D electron

安装依赖的时候，可能会因为网速的原因下载的很慢，可以更改为镜像源 依旧是使用open ~/.zshrc添加命令行

export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

HBuilderX

小程序开发，非必要安装，如果没有开发需要可以忽视

需要下载开发工具以及微信开发者工具 按照流程正常下载完两个软件后，需要修改一下几个配置
1、HBuilderX中点击上方运行-->运行到小程序模拟器-->运行设置
修改微信开发者工具路径（如果没有特殊的情况，基本都是安装在这个位置，点击浏览选择就行了）

截屏2023-02-26 下午9.37.02.png
2、在微信开发工具中，点击设置中的安全设置，然后开启服务端口

截屏2023-02-26 下午9.41.34.png

avatar
文章
阅读
粉丝