我的GitHub

无星的小窝

估计也么的人看

0%

无星的命令行与环境总结（二）-新mac如何安装开发环境(web,iOS,Android,flutter,react-native,java,go)

发表于 更新于 分类于 阅读次数：
本文字数： 5.4k 阅读时长 ≈ 5 分钟

我看谁还不会装环境！

背景

最近新来的同事有点多，为了统一大家的开发环境和工具

专门写了环境安装文档，以供使用

所有命令，均在iterm2中输入

Mac常用信息介绍

有mac使用经验的用户可以跳过这一节

以前使用Windows的同学可以先看这一节

键盘

Windows 上常用的ctrl键，在mac上使用command键代替（简称cmd键）

1.png

在部分外接键盘上，是win键

安装包下载

可以从AppStore下载

也可以从网页下载

分盘

mac上默认标准只有一个盘，不会有分盘的概念

Windows的我的电脑

mac上为finder（访达）

2.png

从网页下载安装包格式

  • dmg
  • pkg
  • zip

从网页下载的安装包会有这三种格式

dmg格式

双击安装

以企业微信为例子

3.png

鼠标左键按住软件，拖到右边的文件夹中

pkg文件

双击以后，无脑下一步即可

zip文件

类似windows的绿色软件

解压缩以后，将得到的应用程序拖动到finder文件夹中，应用程序文件夹下即可

4.png

软件无法打开

5.png

6.png

遇到这种类型的弹窗，第一个选择好，第二个选择取消

7.png

8.png

添加finder默认可选件夹

9.png

10.png

常用软件安装

除了各自常用的开发软件，比如vscode,webstrom,idea,xcode,as之类的

以下软件需要安装

1
2
3
4
5
6
7
翻墙工具（各显神通）

git

iterm2

Alfred4

翻墙工具

不管用啥，只要用的顺手就行

开启以后，找到代理设置

不管是web的，客户端的，都一定能找到代理设置！！！

这里以小飞机举例：

小飞机

查看Http端口（mac默认为1087，Windows默认为1080）

http端口

根据端口设置http和https代理

1
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

这个命令要记一下，以后的开发生涯很多地方会用到！！！

这个命令要记一下，以后的开发生涯很多地方会用到！！！

这个命令要记一下，以后的开发生涯很多地方会用到！！！

如何测试是否成功

切记不要用ping www.google.com测试，你就是Ping到明年也ping不通

1
2
3
4
5
6
7
测试方法一：
curl www.google.com
有回文则成功

测试方法二：
curl cip.cc
看看返回的数据是否为节点ip

git

打开iterm2，输入

1
git --version

如果有git，就输出版本

如果没有git，就会出现弹窗，安装即可

alfred4

剪切板历史

11.png

cmd+alt+c 唤出剪切板历史

快速搜索-百度搜索

12.png

13.png

1
http://www.baidu.com/s?wd={query}

快速搜索-Github搜索

14.png

15.png

1
https://github.com/search?q={query}

唤起搜索 alt+空格 输入github/baidu 要搜索的关键字 （注意中间有个空格）

例如：github 123或者baidu 123

有道插件

YoudaoTranslate下载

解压后导入

16.png

具体配置，请参照右侧，只需要填写youdao_appkey和youdao_secret即可

17.png

alt+空格，唤起Alfred输入框后，输入yd 英文即可（注意中间有个空格）

例如：yd Hello World

预备环境安装

在安装完上述软件以后，我们来安装一些mac上的通用环境

oh-my-zsh（git安装好以后操作）

打开iterm2

所有命令从上到下依次执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

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

# 安装zsh插件
cd ~/.oh-my-zsh/custom/plugins
# 高亮插件
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

source ./zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

# 自动补全插件
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

安装完毕以后

1
2
3
cd ~

open -e ~/.zshrc

会弹出一个文本编辑

搜索plugin找到

18.png

修改为

19.png

1
plugins=(zsh-autosuggestions git zsh-syntax-highlighting)

然后保存

在iterm2中输入

1
source ~/.zshrc

brew

homebrew是mac上的包管理器，能非常方便的管理我们的各种环境和路径依赖

1
2
3
4
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

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

中途出现需要输入密码的地方，填写开机密码，输入过程不会有显示，这是linux的机制，写完了回车就行

20.png

点击enter键，继续下一步

21.png

复制这段代码执行

自动操作脚本

基于各自的ide，自行添加此脚本

可以直接在finder中通过ide打开项目，不再需要打开ide再去找项目文件夹了

以VSCode为例

VSCode的全名为：Visual Studio Code

23.png

24.png

25.png

26.png

1
2
3
4
5

for f in "$@"
do
    open -a "Visual Studio Code" "$f"
done

Visual Studio Code可替换为任意ied的全名，例如Android Studio等

cmd + s 保存为任意名称

27.png

使用

28.png

至此，预备工作准备完毕

iOS环境安装

iOS其实没啥要装的

Xcode安装完毕

命令行工具安装

1
sudo xcode-select --install

cocoapods安装

1
2
3
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

brew install cocoapods

如果遇到pod install下载不下来

可以先执行

export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

再下载

iOS环境安装完毕

Android

也很简单

先打开翻墙工具，开启代理

Android Studio下载安装

安装完毕以后，打开iterm2

1
open -e ~/.zshrc

在环境变量文件最后添加

1
2
3
4
5
# android
export Android_Home=~/Library/Android/sdk
export PATH=$Android_Home/tools:$PATH
export PATH=$Android_Home/platform-tools:$PATH
export PATH=$Android_Home/build-tools:$PATH%

保存

打开iterm2执行

1
source ~/.zshrc

安卓环境安装完毕

Web

安装nvm

1
2
3
4
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

brew install nvm
1
open -e ~/.zshrc

在文件最后添加

1
2
3
4
# nvm
export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

22.png

1
source ~/.zshrc

安装node

1
2
3
4
5
6
nvm ls-remote
# 打印输出后面跟着lts的表示稳定版本
# m1用户只能安装15以上版本，其余用户自行安装对应版本
nvm install v15.14.0

npm install npm -g --registry https://registry.npm.taobao.org

安装nrm并切换淘宝源

1
2
3
npm install nrm -g --registry https://registry.npm.taobao.org

nrm use taobao

Vscode配置

必备插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 正则
any-rule
# 自动修改标签
Auto Rename Tag
# 括号带颜色
Bracket Pair Colorizer 2
# Chinese
Chinese
# 颜色高亮
Color Highlight
# ESLint
ESlint
# Git插件
GitLens — Git supercharged
# 路径补充
Path Intellisense
# 主题
vscode-icons

如果是vue同学，再加两个

1
2
Vetur
vue-helper

配置项：

1
2
3
4
5
6
7
8
9
10
{
    // icon主题
    "workbench.iconTheme": "vscode-icons",
    // 打开页面不预览（不覆盖）
    "workbench.editor.enablePreview": false,
    // eslint自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}

web环境安装完毕

flutter

先照着上面的iOS和Android环境安装

然后照着下面的安装

flutter环境安装

react-native

先安装iOS的开发环境

再安装Android的开发环境

再安装web的开发环境

然后

watchman

1
2
3
4
5
6
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

brew install watchman

npm i yarn -g

react-native 环境安装完毕

java

就装个jdk

对jdk版本无要求的，可以安装openjdk版本的

例如安装jdk8

1
2
3
4
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

brew install homebrew/cask-versions/adoptopenjdk8

如果需要安装oracle版本的，可以参考mac使用brew安装Java8

当然，直接下安装包安装也是ojbk的

1
2
3
4
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

brew install maven

java环境安装完毕

go

1
2
3
4
# 执行终端翻墙，见文章上方介绍的终端翻墙命令
export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;

brew install go

go就装好了

其实也在探索更加方便的环境安装方式

比如打好一个docker镜像，或者使用写脚本的方式安装

但目前，还是先手动安装吧～～

END

我是阿星，阿星的阿，阿星的星！