1. 程式人生 > >flutter筆記1:VScode安裝dart code插件踩坑記錄

flutter筆記1:VScode安裝dart code插件踩坑記錄

新手 nsh 處理 官網 解決 gem 小時 添加 選擇

新手菜鳥一枚,想從產品轉入技術坑,目標:移動端APP開發。最近聽技術達人 飛狐 說flutter beta發布了,支持跨平臺APP開發,各種強大易上手,於是乎零基礎入坑~話說想提高英文水平的同學,請移步flutter官網,從知道flutter到現在剛好24小時,在這裏分享一點學習中遇到的小坑,

按官方套路安裝:

1.下載flutter SDK:

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

什麽? 不會git?請自行百度git安裝教程,或者打開這裏,直接下載sdk壓縮包:

技術分享圖片 flutter SDK下載

直接執行這個命令下載超慢,而且不停掉線,舍不得買代理FQ的童鞋,請配置鏡像服務器地址,查看官方說明:

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

可惜倆命令只支持mac和linux,坑爹的教程,害我去hosts裏面配了半天沒效果,再胡亂搜了半天,才發現是在windows下加兩個環境變量:
PUB_HOSTED_URL https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

技術分享圖片 flutter鏡像

配置好這個變量後,執行上面的git命令下載flutter提速幾倍,也不算快,但不至於各種掉線和失敗了

2.SDK下載完成後,你得讓操作系統識別flutter的命令,所以再次打開環境變量:
控制面板>系統和安全>系統>高級系統設置>環境變量,Path變量中添加Flutter的路徑,結尾記得加英文;號:
[你的Flutter文件夾路徑]\flutter\bin

win10的同學請到系統設置裏搜索“環境變量”>編輯環境變量,向列表裏添加以上路徑

3.打開“命令提示符”,以管理員身份運行,輸入:

flutter doctor

如果提示命令不存在或無法識別,請檢查上一步的環境變量是否正確添加
如果環境變量沒問題,輸入上面的命令後,flutter會自動下載一系列的依賴和基礎控件,請耐心等待幾十秒,幸好有官方鏡像的配置,否則這裏妥妥的下個通宵,別問我怎麽知道的。。。。

下載完畢後效果:


技術分享圖片 flutter安裝完畢

提示安裝android studio和android SDK,這個請大家參考我的第二篇筆記

4.VScode配置
進入VScode,打開擴展列表,輸入dart code,搜索dart插件,點擊安裝>重啟:


技術分享圖片 dart code

是時候驗證信仰了,點擊菜單中的查看->命令面板,輸入:

doctor

選擇Flutter: Run Flutter Doctor回車


技術分享圖片 doctor命令

安裝dart code插件後VScode居然無法識別flutter命令

相信有些同學會提示:沒有匹配的命令
並且反復安裝dart code這個插件還是檢索不到這個命令,但是在命令提示符裏輸入:flutter doctor,居然是能正確運行的,坑爹呢這是
各種查不到資料。。。

就在我準備放棄使用vscode的命令行後,問題解決了。。。。請看下一步

5.打開命令提示符,進入一個自己想新建flutter項目的文件夾下,輸入:

flutter create myflutter

耐心讓命令行滾動一會兒~
執行完畢後,會在文件夾下生成一個myflutter文件,這個時候用vscode打開這個文件夾,再回到菜單中的查看->命令面板,輸入:doctor

呵呵,命令搜索到了,居然還有這種操作!
也就是說vscode必須在打開flutter項目的情況下,才能識別dart指令,關閉項目文件夾後,又無法識別指令了。至於怎麽回事,我還沒搞清楚,找到原因和處理辦法了再分享給大家吧,如果有高手知道怎麽搞,請評論中告訴我~感激不盡




flutter筆記1:VScode安裝dart code插件踩坑記錄