本文首发简书,本人为原作者,现逃离简书
转载请注明出处
原文连接
掘金连接
https://www.jianshu.com/p/c55ad0e8f24f

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

前言

写这篇文章的原因是我自己的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/访达,拖到应用程序里面也行
mac 开发 flutter 环境配置

环境变量相关

不会配置环境变量的,这要仔细看了
在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,建议不要使用迅雷等工具下载
mac 开发 flutter 环境配置
mac 开发 flutter 环境配置

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

等待漫长的安装,然后运行xcode
mac 开发 flutter 环境配置
只能同意

等待中
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置
看到这里xcode就算ok了

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

点击cmd+,打开首选项
mac 开发 flutter 环境配置
左下角加号 apple id 来登陆你自己的苹果开发者账号/ 不是开发者也能开发ios 就是不能上传apple store
mac 开发 flutter 环境配置

android环境篇

android studio安装

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

拖到application里

打开

出现这个不要紧 cancel就行
mac 开发 flutter 环境配置

一路next
mac 开发 flutter 环境配置

finish
mac 开发 flutter 环境配置

等待,这里大部分的资源目前应该不需要梯子,头几年都是要翻才能下的
mac 开发 flutter 环境配置

finish
mac 开发 flutter 环境配置

出现这个窗口就说明android的环境ok了
mac 开发 flutter 环境配置

配置android的环境变量

jdk

oracle jdk1.8
mac 开发 flutter 环境配置
打开dmg
双击pkg
一路next

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

能正确显示版本号即可
mac 开发 flutter 环境配置

添加javahome环境变量

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

/usr/libexec/java_home -V  

mac 开发 flutter 环境配置
复制这里的最后一行 也就是那个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  

mac 开发 flutter 环境配置

配置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的相关构建工具等等
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置

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

mac 开发 flutter 环境配置

这里我标记了6个问题

  1. android 许可证问题

flutter doctor --android-licenses
一路y过去
mac 开发 flutter 环境配置

  1. xcode的问题

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

    1. flutter ios工具链的问题

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

brew install --HEAD libimobiledevice`  

这里会安装很多的二进制库
mac 开发 flutter 环境配置
完成后继续下一步

brew install ideviceinstaller  

mac 开发 flutter 环境配置
这里比较简短

brew install ios-deploy  

mac 开发 flutter 环境配置

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

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

brew install cocoapods  

mac 开发 flutter 环境配置

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

pod setup  

mac 开发 flutter 环境配置

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

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

mac 开发 flutter 环境配置

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

  1. android studio 插件问题

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

mac 开发 flutter 环境配置

mac 开发 flutter 环境配置

选下载人多的
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置
点yes

然后耐心等待

mac 开发 flutter 环境配置

完成后是这样的

mac 开发 flutter 环境配置

点击重启后

问题解决完毕


我们返回到cli中 敲

flutter doctor -v  

mac 开发 flutter 环境配置
这里我发现我这遇到里之前没有的问题,
第一个X提示我xcode需要最低9.0.0的版本
第二个X提示我缺少一个叫six的python库

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

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

sudo easy_install six  

mac 开发 flutter 环境配置

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

系统更新

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

mac 开发 flutter 环境配置

完成后打开,接着一路下一步,都是中文,等待完成就行
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置


系统更新完成,现在开始更新xcode
mac 开发 flutter 环境配置

完成后,回到cli中

flutter doctor -v  

mac 开发 flutter 环境配置

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

我这里用命令行同意

sudo xcodebuild -license  

mac 开发 flutter 环境配置
这里点enter(回车)

mac 开发 flutter 环境配置
这里输入agree 回车

mac 开发 flutter 环境配置
这里的错误还是需要打开xcode,所以前面建议你直接打开xcode app

mac 开发 flutter 环境配置
这里之前遇到过,install就行了

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

再次flutter doctor -v

mac 开发 flutter 环境配置

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

brew install cocoapods  

mac 开发 flutter 环境配置

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

brew reinstall cocoapods  

mac 开发 flutter 环境配置

mac 开发 flutter 环境配置
这是最后一次了 除了没连接设备外,没其他问题了?

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

运行项目

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

cli里敲击

flutter create hello_world  

项目名不能有大写字母,所以建议使用下划线作为单词的分隔
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置
这样就代表项目的文件都ok了,接着按照提示进入项目内,这里慢的话 可能是获取依赖的时候卡住了

mac 开发 flutter 环境配置

android运行

右上角
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置

mac 开发 flutter 环境配置

我这里新装的sdk,没有android的镜像,所以download下
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置
完成后点finish即可

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

mac 开发 flutter 环境配置

运行后关闭device manager 回到主界面
mac 开发 flutter 环境配置

mac 开发 flutter 环境配置

这第一次运行会下载gradle,速度不好说,可能会很慢
mac 开发 flutter 环境配置
这个会下载这个,你可以用迅雷复制这里的链接下载下来,复制到如下图的文件夹下
mac 开发 flutter 环境配置

我这里速度很好,很快就跑起来了
mac 开发 flutter 环境配置

ios运行

mac 开发 flutter 环境配置
在as中点这个 会开启一个ios 模拟器

mac 开发 flutter 环境配置
在开启模拟器成功后,发现as识别不到,这种情况不要怕

命令行敲flutter doctor -v 试试
mac 开发 flutter 环境配置

我们看到,是有设备的,重启下as试试吧
mac 开发 flutter 环境配置

设备出来了,我们点旁边的run(绿三角)试试吧

mac 开发 flutter 环境配置
项目也跑起来了,大功告成

后记

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

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

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

相关文章:

  • 2021-08-09
  • 2021-11-18
  • 2021-09-04
  • 2021-11-29
  • 2021-07-10
  • 2021-11-23
  • 2021-04-25
  • 2022-12-23
猜你喜欢
  • 2019-09-17
  • 2022-01-15
  • 2021-09-20
  • 2021-12-09
  • 2021-12-22
  • 2021-09-21
  • 2021-07-01
相关资源
相似解决方案