本文首發(fā)簡書
轉(zhuǎn)載請注明出處
原文連接
掘金連接
http://www.reibang.com/p/c55ad0e8f24f
windows篇可以看這個大佬的
高能提示：文章字?jǐn)?shù)不多朵锣，圖很多旁蔼，請做好戰(zhàn)斗準(zhǔn)備
前言
寫這篇文章的原因是我自己的macbook開不開機(jī)挨队，返修后跋理，所有開發(fā)環(huán)境全部沒有了绷跑，正好要重新配置開發(fā)環(huán)境椅野，所以寫一個從零配置的文章
因?yàn)閒lutter涉及到跨平臺開發(fā)力奋，所以預(yù)想中會包含四部分
mac篇榜旦，android篇，ios篇景殷，flutter篇
術(shù)語相關(guān)
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才告訴我這個，沒辦法只能升級系統(tǒng)猿挚，再升級xcode
mac篇
所謂mac篇就是一些基礎(chǔ)的環(huán)境咐旧，和效率工具
后面會使用
cli
我這里使用iterm2，一個免費(fèi)的開源的命令行工具
默認(rèn)的命令行工具用launchpad=> 其他 => 終端打開
zsh绩蜻，用于替換bash環(huán)境铣墨，直接命令行中敲zsh,即可進(jìn)入，修改默認(rèn)zsh的可以自行百度
oh my zsh办绝，一個zsh插件 具體可以自行百度
brew 一個很方便的包管理工具伊约，基于ruby+git
命令行敲
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"即可
這里會自動安裝xcode命令行環(huán)境，git環(huán)境孕蝉，需要輸入密碼確認(rèn)
效率篇
Alfred 一個快速開啟app的輔助工具
Paw http工具
Sip 取色器
dmg相關(guān)
遇到提示dmg損壞屡律，不要著急 并不一定是真的損壞里，參考這里 https://bbs.feng.com/read-htm-tid-10584598.html 降淮，允許所有的來源即可
對于mac新手來說超埋，可能不會使用dmg，雙擊打開骤肛，有允許點(diǎn)允許纳本，有dmg密碼輸入密碼窍蓝，最后將應(yīng)用拖入到application／應(yīng)用里腋颠，一般dmg里都有快捷方式，沒有的話自己打開finder／訪達(dá)吓笙，拖到應(yīng)用程序里面也行
環(huán)境變量相關(guān)
不會配置環(huán)境變量的淑玫，這要仔細(xì)看了
在cli中敲對應(yīng)的命令即可
export NAME=VALUE //加入環(huán)境變量
unset NAME //刪除環(huán)境變量
source fileName //使重新讀取配置文件
這個敲擊僅當(dāng)前cli或衍生cli有效，想要永久生效就要將配置加入配置文件中
默認(rèn)是bash面睛，所以我們編輯bash的配置文件
vi .bash_profile 我這里使用的是vim工具絮蒿，如果不習(xí)慣 后續(xù)的vi可以換成open ，遇到文件不存在就先敲touch $fileName
默認(rèn)是沒有.bash_profile 文件的叁鉴，創(chuàng)建 并添加
export PATH=XXXXX:$PATH
這里XXX代表了你自己的環(huán)境變量（adb土涝，jdk，flutter）等
因?yàn)槲沂褂玫氖莦sh,這里配置zsh相關(guān)的幌墓，讓zsh可以“讀取”到bash的配置即可
vi .zshrc
在最后一行添加
source .bash_profile
保存但壮，退出
vi個人常用命令
i插入 a在后插入
shift+4 行尾
l+數(shù)字冀泻，enter 指定行號
dd 刪除行
yy 復(fù)制行
p 粘貼行
:wq 保存退出
:q 保存退出
:q! 強(qiáng)制退出不保存
ios篇
從app store安裝xcode，建議不要使用迅雷等工具下載
我這里不是最新的mac os版本蜡饵，所以需要下一個舊的xcode
等待漫長的安裝弹渔，然后運(yùn)行xcode
只能同意
等待中
看到這里xcode就算ok了
插一句，我這里因?yàn)橄劝惭b了brew溯祸，所以xcode命令行工具預(yù)先安裝到了mac里肢专，如果沒裝brew，這里可能會提示安裝xcode命令行工具焦辅，git等等博杖，請同意即可
點(diǎn)擊cmd+，打開首選項(xiàng)
左下角加號 apple id 來登陸你自己的蘋果開發(fā)者賬號／ 不是開發(fā)者也能開發(fā)ios 就是不能上傳apple store
android環(huán)境篇
android studio安裝
這里我使用一個中文鏡像 http://www.android-studio.org/ 下載
有梯子的可以去 android官網(wǎng)下載
拖到application里
打開
出現(xiàn)這個不要緊 cancel就行
一路next
finish
等待氨鹏，這里大部分的資源目前應(yīng)該不需要梯子欧募，頭幾年都是要翻才能下的
finish
出現(xiàn)這個窗口就說明android的環(huán)境ok了
配置android的環(huán)境變量
jdk
打開dmg
雙擊pkg
一路next
新開一個命令行
javac -version
java -version
能正確顯示版本號即可
添加javahome環(huán)境變量
如果你是pkg安裝的，先看看java安裝目錄仆抵，自己解壓的壓縮包那就按照自己的目錄
/usr/libexec/java_home -V
復(fù)制這里的最后一行 也就是那個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下
這里根據(jù)你的用戶名不同會有不同的地址，繼續(xù)添加到.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 有沒有其實(shí)沒關(guān)系
現(xiàn)在返回cli中镣丑，敲adb會出現(xiàn)很長的英文舔糖，這個是adb命令的說明
能出現(xiàn)則說明成功，不成功的話請重新檢查下環(huán)境變量是不是沒配置好
flutter篇
終于要開始flutter篇了
pub環(huán)境變量
這里建議沒有常駐翻墻的同學(xué)打開下面的頁面莺匠，配置下中文的pub鏡像金吗，pub是dart官方提供的一個中心倉庫，可以將依賴／開源庫上傳到上面
https://github.com/flutter/flutter/wiki/Using-Flutter-in-China
官網(wǎng)
有能力的同學(xué)這里自己進(jìn)入flutter官網(wǎng)按照mac篇進(jìn)行配置
或者繼續(xù)看下去
開始安裝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
后續(xù)修改git的remote為github地址即可
git remote set-url origin https://github.com/flutter/flutter.git
查看下
git remote -v
配置flutter的環(huán)境變量
這里配置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的環(huán)境問題趣竣，以后可能會經(jīng)常敲
這里加-v就是詳情摇庙，如果有問題需要幫助，這里一定要帶-v
這里加-v就是詳情遥缕，如果有問題需要幫助卫袒，這里一定要帶-v
這里加-v就是詳情，如果有問題需要幫助单匣，這里一定要帶-v
這里加-v就是詳情夕凝，如果有問題需要幫助，這里一定要帶-v
接著就是漫長的等待户秤，這里會下載flutter的相關(guān)構(gòu)建工具等等
這里帶X的就是有問題的码秉，我們需要一項(xiàng)項(xiàng)的去解決
大部分都給了cli方案 就是run： 后面的東西
這里我們看到了建議大家使用brew去安裝這些庫，這也是為什么我這里開篇就介紹如何安裝brew的原因
這里我標(biāo)記了6個問題
- android 許可證問題
flutter doctor --android-licenses
一路y過去
- xcode的問題
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
- flutter ios工具鏈的問題
這里需要使用brew安裝一些工具以幫助flutter可以調(diào)試ios程序鸡号，你模擬器能跑起來转砖，但是ios真機(jī)不行大概率就是這里的原因
cli:
brew install --HEAD libimobiledevice`
這里會安裝很多的二進(jìn)制庫
完成后繼續(xù)下一步
brew install ideviceinstaller
這里比較簡短
brew install ios-deploy
- 這里是ios開發(fā)相關(guān)的了
使用cocoapod作為ios的庫管理工具，這個是ios開發(fā)中很常見的一個包管理工具鲸伴，我們按照提示安裝
brew install cocoapods
接著是安裝pod的庫相關(guān)的索引
pod setup
這里看到 下載速度還行府蔗，雖然沒有國內(nèi)快莉兰，但是也有接近4m的速度了，如果這里你的速度不佳礁竞，可以考慮使用gitee的spec中轉(zhuǎn)糖荒，
這里因?yàn)樯婕暗降奈募芏?百萬級文件數(shù)量，所以會比較慢模捂，耐心等待就行了
如果你是imac／mac mini 沒有固態(tài)捶朵，建議你自己想辦法加一個，不然這步時(shí)間可能1～3小時(shí)不等
我的2016款macbook pro是pcie的ssd狂男，下載時(shí)間大概5分鐘综看，“解壓”也用了5分鐘，全程10分鐘左右
平心而論岖食，pod的索引方式個人感覺很蠢红碑，最初數(shù)量級小的情況下還算能接受，現(xiàn)在pod的庫數(shù)量越來越多泡垃，用這種方式來做中心庫索引簡直接受不了析珊，后面會越來越臃腫
- android studio 插件問題
在studio中點(diǎn)cmd+, 打開首選項(xiàng)
點(diǎn)擊plugin
選下載人多的
點(diǎn)yes
然后耐心等待
完成后是這樣的
點(diǎn)擊重啟后
問題解決完畢
我們返回到cli中 敲
flutter doctor -v
這里我發(fā)現(xiàn)我這遇到里之前沒有的問題，
第一個X提示我xcode需要最低9.0.0的版本
第二個X提示我缺少一個叫six的python庫
我這里因?yàn)橄到y(tǒng)版本的原因下載不了9.0.0以上的xcode蔑穴，只能升級版本后重新下載了忠寻，這個后面補(bǔ)上
先完成第二個，有兩個選擇 pip install six sudo easy_install six
根據(jù)提示敲擊存和，我這里選擇的是第二個
sudo easy_install six
然后我們只剩下xcode的問題了奕剃，如果你的xcode版本沒問題，那你可以跳過這里捐腿，直接看flutter的運(yùn)行相關(guān)
系統(tǒng)更新
到mac app store中 去下載新的系統(tǒng)版本
完成后打開纵朋，接著一路下一步，都是中文茄袖，等待完成就行
系統(tǒng)更新完成操软，現(xiàn)在開始更新xcode
完成后，回到cli中
flutter doctor -v
提示我要同意協(xié)議
這里可以打開xcode绞佩，也可以直接命令行敲擊寺鸥，建議直接打開xcode
我這里用命令行同意
sudo xcodebuild -license
這里點(diǎn)enter（回車）
這里輸入agree 回車
這里的錯誤還是需要打開xcode猪钮，所以前面建議你直接打開xcode app
這里之前遇到過品山，install就行了
到這里xcode的問題就都解決了
再次flutter doctor -v
pod又出問題了，還是應(yīng)該先升級系統(tǒng)烤低，再一次性安裝肘交，這又來了無用功
按提示走把
brew install cocoapods
告訴我已經(jīng)安裝了 提示我reinstall
brew reinstall cocoapods
這是最后一次了 除了沒連接設(shè)備外，沒其他問題了??
flutter部分的環(huán)境配置到這里基本完成了扑馁，接著就該運(yùn)行項(xiàng)目了
運(yùn)行項(xiàng)目
初次建立項(xiàng)目建議使用cli創(chuàng)建涯呻，因?yàn)闀苈棺ぃ胊s的話 你很難知道自己在等什么，甚至網(wǎng)絡(luò)鏈接失敗你都不知道
cli里敲擊
flutter create hello_world
項(xiàng)目名不能有大寫字母复罐，所以建議使用下劃線作為單詞的分隔
這樣就代表項(xiàng)目的文件都o(jì)k了涝登，接著按照提示進(jìn)入項(xiàng)目內(nèi)，這里慢的話 可能是獲取依賴的時(shí)候卡住了
android運(yùn)行
右上角
我這里新裝的sdk效诅，沒有android的鏡像胀滚，所以download下
完成后點(diǎn)finish即可
接著點(diǎn)選剛剛下載的，一路next+finish
運(yùn)行后關(guān)閉device manager 回到主界面
這第一次運(yùn)行會下載gradle乱投，速度不好說咽笼，可能會很慢
這個會下載這個，你可以用迅雷復(fù)制這里的鏈接下載下來戚炫，復(fù)制到如下圖的文件夾下
我這里速度很好剑刑，很快就跑起來了
ios運(yùn)行
在as中點(diǎn)這個 會開啟一個ios 模擬器
在開啟模擬器成功后，發(fā)現(xiàn)as識別不到双肤，這種情況不要怕
命令行敲flutter doctor -v 試試
我們看到施掏，是有設(shè)備的，重啟下as試試吧
設(shè)備出來了茅糜，我們點(diǎn)旁邊的run（綠三角）試試吧
項(xiàng)目也跑起來了其监，大功告成
后記
整篇文章是我邊搭環(huán)境邊寫的
可以說很詳細(xì)了，中間我還走了xcode版本號的彎路
但是項(xiàng)目后來還是成功的跑起來了限匣，希望各位看我文章的 也能成功
可以看到我開始的截圖 macos版本是10.12.3
后來安裝了新版本 變成了10.13.6
我單位的版本是10.12.6 那個macos版本是可以安裝xcode 9.0的
