本文首发简书
转载请注明出处
原文连接
掘金连接
https://www.jianshu.com/p/c55ad0e8f24f

windows篇可以看这个大佬的

高能提示：文章字数不多，图很多，请做好战斗准备

前言

写这篇文章的原因是我自己的macbook开不开机，返修后，所有开发环境全部没有了，正好要重新配置开发环境，所以写一个从零配置的文章
因为flutter涉及到跨平台开发，所以预想中会包含四部分
mac篇，android篇，ios篇，flutter篇

术语相关

cmd = command键（空格左边）
opt／alt = option键（cmd左边）
ctrl = control（opt左边）
cli = 命令行工具（command-line interface,命令行界面)
as = Android Studio

写在前面

最低需要xcode 9.0.0 以上的xcode版本
但是不建议从非官方渠道下载xcode，以免遇到之前盗版xcode的问题

我就是都装好了8.3才告诉我这个，没办法只能升级系统，再升级xcode

mac篇

所谓mac篇就是一些基础的环境，和效率工具

后面会使用

cli

我这里使用iterm2，一个免费的开源的命令行工具
默认的命令行工具用launchpad=> 其他 => 终端打开

zsh，用于替换bash环境，直接命令行中敲zsh,即可进入，修改默认zsh的可以自行百度
oh my zsh，一个zsh插件 具体可以自行百度

brew 一个很方便的包管理工具，基于ruby+git
命令行敲
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"即可
这里会自动安装xcode命令行环境，git环境，需要输入密码确认

效率篇

Alfred 一个快速开启app的辅助工具
Paw http工具
Sip 取色器

dmg相关

遇到提示dmg损坏，不要着急 并不一定是真的损坏里，参考这里 https://bbs.feng.com/read-htm-tid-10584598.html ，允许所有的来源即可

对于mac新手来说，可能不会使用dmg，双击打开，有允许点允许，有dmg密码输入密码，最后将应用拖入到application／应用里，一般dmg里都有快捷方式，没有的话自己打开finder／访达，拖到应用程序里面也行

image.png

环境变量相关

不会配置环境变量的，这要仔细看了
在cli中敲对应的命令即可

export NAME=VALUE //加入环境变量
unset NAME //删除环境变量

source fileName //使重新读取配置文件

这个敲击仅当前cli或衍生cli有效，想要永久生效就要将配置加入配置文件中

默认是bash，所以我们编辑bash的配置文件
vi .bash_profile 我这里使用的是vim工具，如果不习惯 后续的vi可以换成open ，遇到文件不存在就先敲touch $fileName

默认是没有.bash_profile 文件的，创建 并添加
export PATH=XXXXX:$PATH
这里XXX代表了你自己的环境变量（adb，jdk，flutter）等

因为我使用的是zsh,这里配置zsh相关的，让zsh可以“读取”到bash的配置即可

vi .zshrc

在最后一行添加
source .bash_profile
保存，退出

vi个人常用命令
i插入 a在后插入
shift+4 行尾
l+数字，enter 指定行号
dd 删除行
yy 复制行
p 粘贴行
:wq 保存退出
:q 保存退出
:q! 强制退出不保存

ios篇

从app store安装xcode，建议不要使用迅雷等工具下载

image.png

image.png

我这里不是最新的mac os版本，所以需要下一个旧的xcode

等待漫长的安装，然后运行xcode

image.png

只能同意

等待中

image.png

image.png

看到这里xcode就算ok了

插一句，我这里因为先安装了brew，所以xcode命令行工具预先安装到了mac里，如果没装brew，这里可能会提示安装xcode命令行工具，git等等，请同意即可

点击cmd+，打开首选项

首选项

左下角加号 apple id 来登陆你自己的苹果开发者账号／ 不是开发者也能开发ios 就是不能上传apple store

img

android环境篇

android studio安装

这里我使用一个中文镜像 http://www.android-studio.org/ 下载
有梯子的可以去 android官网下载

拖到application里

打开

出现这个不要紧 cancel就行

image.png

一路next

image.png

finish

image.png

等待，这里大部分的资源目前应该不需要梯子，头几年都是要翻才能下的

image.png

finish

image.png

出现这个窗口就说明android的环境ok了

image.png

配置android的环境变量

jdk

oracle jdk1.8

image.png

新开一个命令行
javac -version
java -version

能正确显示版本号即可

image.png

添加javahome环境变量

如果你是pkg安装的，先看看java安装目录，自己解压的压缩包那就按照自己的目录

/usr/libexec/java_home -V

image.png

复制这里的最后一行 也就是那个Home的目录

配置在.bash_profile里

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

别忘了

source .bash_profile

androidsdk

如果是通过刚刚的android studio自动安装的，则目录会在/Users/caijinglong/Library/Android/sdk下
这里根据你的用户名不同会有不同的地址，继续添加到.bash_profile中

目前我的.bash_profile是这样的

export ANDROID_HOME=/Users/caijinglong/Library/Android/sdk/
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$PATH

第三行的$JAVA_HOME/bin 有没有其实没关系
现在返回cli中，敲adb会出现很长的英文，这个是adb命令的说明
能出现则说明成功，不成功的话请重新检查下环境变量是不是没配置好

flutter篇

终于要开始flutter篇了

pub环境变量

这里建议没有常驻翻墙的同学打开下面的页面，配置下中文的pub镜像，pub是dart官方提供的一个中心仓库，可以将依赖／开源库上传到上面
https://github.com/flutter/flutter/wiki/Using-Flutter-in-China

官网

有能力的同学这里自己进入flutter官网按照mac篇进行配置
或者继续看下去

开始安装flutter

cli：

cd ~/Library
mkdir Flutter && cd Flutter

这里可能会比较慢 可以使用gitee的镜像来clone

//github
git clone -b dev https://github.com/flutter/flutter.git  

//gitee（我同步github的库）
git clone -b dev https://gitee.com/kikt/flutter.git 

后续修改git的remote为github地址即可

git remote set-url origin https://github.com/flutter/flutter.git

查看下

git remote -v

image.png

配置flutter的环境变量

这里配置flutter_home

export FLUTTER_HOME=/Users/caijinglong/Library/Flutter/flutter
export PATH=$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$FLUTTER_HOME/bin:$PATH

接着返回cli

cd ~
source .bash_profile
flutter doctor -v

这个flutter doctor -v
就是显示flutter的环境问题，以后可能会经常敲

这里加-v就是详情，如果有问题需要帮助，这里一定要带-v
这里加-v就是详情，如果有问题需要帮助，这里一定要带-v
这里加-v就是详情，如果有问题需要帮助，这里一定要带-v

这里加-v就是详情，如果有问题需要帮助，这里一定要带-v

接着就是漫长的等待，这里会下载flutter的相关构建工具等等

image.png

image.png

这里带X的就是有问题的，我们需要一项项的去解决
大部分都给了cli方案 就是run： 后面的东西
这里我们看到了建议大家使用brew去安装这些库，这也是为什么我这里开篇就介绍如何安装brew的原因

image.png

这里我标记了6个问题

1. android 许可证问题

flutter doctor --android-licenses
一路y过去

image.png

2. xcode的问题

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

3. 4. flutter ios工具链的问题

这里需要使用brew安装一些工具以帮助flutter可以调试ios程序，你模拟器能跑起来，但是ios真机不行大概率就是这里的原因
cli:

brew install --HEAD libimobiledevice`

这里会安装很多的二进制库

image.png

完成后继续下一步

brew install ideviceinstaller

image.png

这里比较简短

brew install ios-deploy

image.png

5. 这里是ios开发相关的了

使用cocoapod作为ios的库管理工具，这个是ios开发中很常见的一个包管理工具，我们按照提示安装

brew install cocoapods

image.png

接着是安装pod的库相关的索引

pod setup

image.png

这里看到 下载速度还行，虽然没有国内快，但是也有接近4m的速度了，如果这里你的速度不佳，可以考虑使用gitee的spec中转，

image.png

这里因为涉及到的文件很多 百万级文件数量，所以会比较慢，耐心等待就行了
如果你是imac／mac mini 没有固态，建议你自己想办法加一个，不然这步时间可能1～3小时不等
我的2016款macbook pro是pcie的ssd，下载时间大概5分钟，“解压”也用了5分钟，全程10分钟左右

image.png

平心而论，pod的索引方式个人感觉很蠢，最初数量级小的情况下还算能接受，现在pod的库数量越来越多，用这种方式来做中心库索引简直接受不了，后面会越来越臃肿

6. android studio 插件问题

在studio中点cmd+, 打开首选项
点击plugin

image.png

image.png

选下载人多的

image.png

依赖dart

点yes

然后耐心等待

image.png

完成后是这样的

重启即可

点击重启后

问题解决完毕

我们返回到cli中 敲

flutter doctor -v

image.png

这里我发现我这遇到里之前没有的问题，
第一个X提示我xcode需要最低9.0.0的版本
第二个X提示我缺少一个叫six的python库

我这里因为系统版本的原因下载不了9.0.0以上的xcode，只能升级版本后重新下载了，这个后面补上

先完成第二个，有两个选择 pip install six sudo easy_install six
根据提示敲击，我这里选择的是第二个

sudo easy_install six

image.png

然后我们只剩下xcode的问题了，如果你的xcode版本没问题，那你可以跳过这里，直接看flutter的运行相关

系统更新

到mac app store中 去下载新的系统版本

image.png

完成后打开，接着一路下一步，都是中文，等待完成就行

image.png

image.png

系统更新完成，现在开始更新xcode

image.png

完成后，回到cli中

flutter doctor -v

image.png

提示我要同意协议
这里可以打开xcode，也可以直接命令行敲击，建议直接打开xcode

我这里用命令行同意

sudo xcodebuild -license

image.png

这里点enter（回车）

image.png

这里输入agree 回车

image.png

这里的错误还是需要打开xcode，所以前面建议你直接打开xcode app

image.png

这里之前遇到过，install就行了

到这里xcode的问题就都解决了

再次flutter doctor -v

image.png

pod又出问题了，还是应该先升级系统，再一次性安装，这又来了无用功
按提示走把

brew install cocoapods

image.png

告诉我已经安装了 提示我reinstall

brew reinstall cocoapods

image.png

image.png

这是最后一次了 除了没连接设备外，没其他问题了😊

flutter部分的环境配置到这里基本完成了，接着就该运行项目了

运行项目

初次建立项目建议使用cli创建，因为会很慢，用as的话 你很难知道自己在等什么，甚至网络链接失败你都不知道

cli里敲击

flutter create hello_world

项目名不能有大写字母，所以建议使用下划线作为单词的分隔

image.png

image.png

这样就代表项目的文件都ok了，接着按照提示进入项目内，这里慢的话 可能是获取依赖的时候卡住了

image.png

android运行

右上角

image.png

image.png

image.png

我这里新装的sdk，没有android的镜像，所以download下

image.png

等待中

完成后点finish即可

接着点选刚刚下载的，一路next+finish

image.png

运行后关闭device manager 回到主界面

image.png

image.png

这第一次运行会下载gradle，速度不好说，可能会很慢

image.png

这个会下载这个，你可以用迅雷复制这里的链接下载下来，复制到如下图的文件夹下

image.png

我这里速度很好，很快就跑起来了

image.png

ios运行

image.png

在as中点这个 会开启一个ios 模拟器

image.png

在开启模拟器成功后，发现as识别不到，这种情况不要怕

命令行敲flutter doctor -v 试试

image.png

我们看到，是有设备的，重启下as试试吧

image.png

设备出来了，我们点旁边的run（绿三角）试试吧

image.png

项目也跑起来了，大功告成

后记

整篇文章是我边搭环境边写的
可以说很详细了，中间我还走了xcode版本号的弯路
但是项目后来还是成功的跑起来了，希望各位看我文章的 也能成功

可以看到我开始的截图 macos版本是10.12.3
后来安装了新版本 变成了10.13.6

我单位的版本是10.12.6 那个macos版本是可以安装xcode 9.0的