新手菜鳥(niǎo)一枚，想從產(chǎn)品轉(zhuǎn)入技術(shù)坑，目標(biāo)：移動(dòng)端APP開(kāi)發(fā)。最近聽(tīng)技術(shù)達(dá)人 飛狐 說(shuō)flutter beta發(fā)布了，于是乎零基礎(chǔ)入坑~話說(shuō)想提高英文水平的同學(xué)，請(qǐng)移步flutter官網(wǎng)，從知道flutter到現(xiàn)在剛好24小時(shí)，在這里分享一點(diǎn)學(xué)習(xí)中遇到的小坑。

1.下載flutter SDK

git clone https://github.com/flutter/fl...

什么? 不會(huì)git?請(qǐng)自行百度git安裝教程，或者打開(kāi)這里，直接下載sdk壓縮包：

直接執(zhí)行這個(gè)命令下載超慢，而且不停掉線，舍不得買代理翻墻的童鞋，請(qǐng)配置鏡像服務(wù)器地址，查看官方說(shuō)明：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

可惜倆命令只支持mac和linux，坑爹的教程，害我去hosts里面配了半天沒(méi)效果，再胡亂搜了半天，才發(fā)現(xiàn)是在windows下加兩個(gè)環(huán)境變量：
PUB_HOSTED_URL https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

配置好這個(gè)變量后，執(zhí)行上面的git命令下載flutter提速幾倍，也不算快，但不至于各種掉線和失敗了

2. 配置flutter庫(kù)環(huán)境變量

SDK下載完成后，你得讓操作系統(tǒng)識(shí)別flutter的命令，所以再次打開(kāi)環(huán)境變量：

控制面板>系統(tǒng)和安全>系統(tǒng)>高級(jí)系統(tǒng)設(shè)置>環(huán)境變量，Path變量中添加Flutter的路徑，結(jié)尾記得加英文;號(hào):
[你的Flutter文件夾路徑]\flutter\bin

win10的同學(xué)請(qǐng)到系統(tǒng)設(shè)置里搜索“環(huán)境變量”>編輯環(huán)境變量，向列表里添加以上路徑。

3. 檢驗(yàn)flutter庫(kù)運(yùn)行環(huán)境

打開(kāi)“命令提示符”，以管理員身份運(yùn)行，輸入： ##

flutter doctor

如果提示命令不存在或無(wú)法識(shí)別，請(qǐng)檢查上一步的環(huán)境變量是否正確添加
如果環(huán)境變量沒(méi)問(wèn)題，輸入上面的命令后，flutter會(huì)自動(dòng)下載一系列的依賴和基礎(chǔ)控件，請(qǐng)耐心等待幾十秒，幸好有官方鏡像的配置，否則這里妥妥的下個(gè)通宵，別問(wèn)我怎么知道的。。。。

下載完畢后效果：

提示安裝android studio和android SDK，這個(gè)大家參考我的筆記2

4. VScode配置

進(jìn)入VScode，打開(kāi)擴(kuò)展列表，輸入dart code，搜索dart插件，點(diǎn)擊安裝>重啟：

是時(shí)候驗(yàn)證信仰了，點(diǎn)擊菜單中的查看->命令面板，輸入：

doctor

選擇Flutter: Run Flutter Doctor回車

安裝dart code插件后VScode居然無(wú)法識(shí)別flutter命令

相信有些同學(xué)會(huì)提示：沒(méi)有匹配的命令
并且反復(fù)安裝dart code這個(gè)插件還是檢索不到這個(gè)命令，但是在命令提示符里輸入：flutter doctor，居然是能正確運(yùn)行的，坑爹呢這是
各種查不到資料。。。

就在我準(zhǔn)備放棄使用vscode的命令行后，問(wèn)題解決了。。。。請(qǐng)看下一步

5. 創(chuàng)建第一個(gè)flutter項(xiàng)目

打開(kāi)命令提示符，進(jìn)入一個(gè)自己想新建flutter項(xiàng)目的文件夾下，輸入：

flutter create myflutter

耐心讓命令行滾動(dòng)一會(huì)兒~
執(zhí)行完畢后，會(huì)在文件夾下生成一個(gè)myflutter文件，這個(gè)時(shí)候用vscode打開(kāi)這個(gè)文件夾，再回到菜單中的查看->命令面板，輸入：doctor

呵呵，命令搜索到了，居然還有這種操作！
也就是說(shuō)vscode必須在打開(kāi)flutter項(xiàng)目的情況下，才能識(shí)別dart指令，關(guān)閉項(xiàng)目文件夾后，又無(wú)法識(shí)別指令了。至于怎么回事，我還沒(méi)搞清楚，找到原因和處理辦法了再分享給大家吧，如果有高手知道怎么搞，請(qǐng)?jiān)u論中告訴我~感激不盡

對(duì)flutter感興趣的小伙伴可以關(guān)注我，也歡迎大家到我在簡(jiǎn)書(shū)中創(chuàng)建的Flutter圈子中投稿，也可以聯(lián)系管理員加入我們的flutter微信群嗨聊。
flutter 中文社區(qū)（官方QQ群：338252156）

總結(jié)

以上是生活随笔為你收集整理的flutter笔记1 VScode安装dart code插件踩坑记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。