我的GitHub
0%

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

我看谁还不会装环境!

背景

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

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

所有命令,均在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_appkeyyoudao_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