自從谷歌I/O2019發(fā)布Flutter web版本之后烫扼，有好多開發(fā)者嘗試搭建環(huán)境，我也不例外牌借，先前在公司電腦上搭建過一次度气，只是沒有總結(jié)出教程，趁著周末在家無聊，再次在家里電腦搭建環(huán)境，由于官方文檔中推薦是Visual Studio Code創(chuàng)建的項(xiàng)目袄秩，所以我就順便研究了完全用命令行創(chuàng)建web項(xiàng)目。

本文在Mac環(huán)境下完成院领，windows環(huán)境大同小異，可作為參考够吩。

官方英文文檔：https://github.com/flutter/flutter_web

To use the Flutter SDK with the flutter_web preview make sure you have upgraded Flutter to at least v1.5.4 by running flutter upgrade from your machine.
在使用flutter_web預(yù)覽版之前比然，要保證電腦中安裝的Flutter版本是大于1.5.4。

以下是我機(jī)器的flutter doctor信息：

Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[?] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[?] Android Studio (version 3.4)
[?] VS Code (version 1.34.0)
[?] Connected device (1 available)
? No issues found!

搭建步驟

1周循、從github上面把flutter_web項(xiàng)目克隆到本地

git clone https://github.com/flutter/flutter_web.git
存放目錄隨意强法，不過建議存放目錄跟flutter sdk同級(jí)，日后更新維護(hù)好找

2湾笛、安裝flutter_web的編譯工具webdev

//環(huán)境變量只配置了flutter sdk而沒有配置dart sdk
flutter pub global activate webdev
//環(huán)境變量已經(jīng)配置了dart sdk
pub global activate webdev

安裝過程可能出現(xiàn)如下信息饮怯，此為網(wǎng)友在windows上配置時(shí)出現(xiàn)的

Resolving dependencies…
It looks like pub.dartlang.org is having some trouble
Pub will wait for a while before trying to connect again.
Got socket error trying to find package webdev at https://pub.dartlang.org.
pub finished with exit code 69

此問題我沒碰到過，如果出現(xiàn)上訴問題是因?yàn)榫W(wǎng)絡(luò)問題嚎研，建議多嘗試幾次硕淑。

如果出現(xiàn)如下信息，則安裝成功

Precompiling executables…
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.0.6

上述信息中可能有一個(gè)Warning提示需要配置環(huán)境變量嘉赎，按提示將$HOME/.pub-cache/bin配置到環(huán)境變量即可

可以嘗試執(zhí)行命令

//環(huán)境變量只配置了flutter sdk而沒有配置dart sdk
flutter pub global run webdev
//環(huán)境變量已經(jīng)配置了dart sdk
 pub global run webdev

到此環(huán)境搭建成功了。

3于樟、創(chuàng)建和啟動(dòng)項(xiàng)目

3.1使用現(xiàn)有項(xiàng)目

flutter_web目錄下有examples幾個(gè)demo項(xiàng)目公条，比如：hello_world

cd <flutter_web目錄>/examples/hello_world

執(zhí)行

flutter pub upgrade 或 pub upgrade
或
flutter pub get 或 pub get

如果出現(xiàn)

RandyWeideMacBook-Pro:hello_world wei$ flutter pub get
! flutter_web 0.0.0 from path ../../packages/flutter_web                
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui          
Running "flutter packages get" in hello_world...                   21.9s

說明項(xiàng)目配置成功了，然后就是啟動(dòng)本地服務(wù)

//環(huán)境變量只配置了flutter sdk而沒有配置dart sdk
flutter pub global run webdev serve
//環(huán)境變量已經(jīng)配置了dart sdk
webdev serve

出現(xiàn)以下信息就是成功了

RandyWeideMacBook-Pro:hello_world wei$ flutter pub global run webdev serve
[INFO] Building new asset graph completed, took 1.5s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 18.3s
[INFO] Caching finalized dependency graph completed, took 201ms
[INFO] Succeeded after 18.5s with 556 outputs (3217 actions)
[INFO] ------------------------------------------------------------------------

然后就可以在瀏覽器使用信息中的地址 http://localhost:8080 訪問到了迂曲。

3.2 創(chuàng)建新項(xiàng)目

官方給兩種途徑創(chuàng)建新項(xiàng)目
1）使用Visual Studio Code靶橱，具體配置Flutter Dart插件就不多說。使用命令面板Flutter: New Web Project路捧，就可以創(chuàng)建一個(gè)新項(xiàng)目了关霸，等配置完成后，按F5或者Debug -> Start Debugging杰扫，就可以啟動(dòng)服務(wù)并自動(dòng)打開瀏覽器队寇。

2）使用IntelliJ，沒有研究

3）使用Android Studio章姓，因?yàn)楸旧砦沂情_發(fā)安卓的佳遣，習(xí)慣使用Studio進(jìn)行開發(fā)识埋。然而studio并不能創(chuàng)建一個(gè)普通的dart項(xiàng)目，或者flutter web項(xiàng)目零渐，相信后期官方一定是能支持的窒舟。

目前想使用studio寫代碼的，可以使用Visual Studio Code诵盼，創(chuàng)建完項(xiàng)目完之后惠豺，再用Android Studio打開項(xiàng)目，也是可以的风宁。

不過對(duì)于沒有安裝Visual Studio Code的同學(xué)來說的話洁墙，還可以用命令行來創(chuàng)建項(xiàng)目。

命令行創(chuàng)建web項(xiàng)目需要安裝另一個(gè)工具

//環(huán)境變量只配置了flutter sdk而沒有配置dart sdk
flutter pub global activate stagehand
//環(huán)境變量已經(jīng)配置了dart sdk
pub global activate stagehand

跟安裝webdev一樣
安裝成功后可以執(zhí)行下面命令查看幫助

flutter pub global run stagehand

Stagehand will generate the given application type into the current directory.
usage: stagehand <generator-name>
    --[no-]analytics    Opt out of anonymous usage and crash reporting.
-h, --help              Help!
    --version           Display the version for stagehand.
    --author            The author name to use for file headers.
                        (defaults to "<your name>")

Available generators:
  console-full        - A command-line application sample.
  flutter-web-preview - A simple Flutter Web app.
  package-simple      - A starting point for Dart libraries or applications.
  server-shelf        - A web server built using the shelf package.
  web-angular         - A web app with material design components.
  web-simple          - A web app that uses only core Dart libraries.
  web-stagexl         - A starting point for 2D animation and games.

可以看到這個(gè)工具可以按照7種模版創(chuàng)建項(xiàng)目杀糯，我們使用的是flutter-web-preview扫俺，其他模版有興趣的可以自行研究。

創(chuàng)建一個(gè)項(xiàng)目目錄固翰，然后

cd 目錄

執(zhí)行命令

//環(huán)境變量只配置了flutter sdk而沒有配置dart sdk
flutter pub global run stagehand flutter-web-preview
//環(huán)境變量已經(jīng)配置了dart sdk
stagehand flutter-web-preview

一個(gè)web項(xiàng)目就創(chuàng)建完成了狼纬，可以使用studio打開項(xiàng)目，使用flutter pub get配置好完之后骂际，可以進(jìn)行正常的代碼了疗琉。
后續(xù)的項(xiàng)目配置和服務(wù)啟動(dòng)都需要命令行操作，參考3.1