搭建步驟
1、從 github 上面把 flutter_web 項目克隆到本地
git clone https://github.com/flutter/flutter_web.git
存放目錄隨意草冈，不過建議存放目錄跟 flutter sdk 同級，日后更新維護好找
2怎棱、安裝 flutter_web 的編譯工具
flutter pub global activate webdev
安裝過程可能出現(xiàn)如下信息，此為網(wǎng)友在 windows 上配置時出現(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)上訴問題是因為網(wǎng)絡(luò)問題谬运，建議多嘗試幾次。
如果出現(xiàn)如下信息伞访，則安裝成功
Precompiling executables …
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.0.6
上述信息中可能有一個 Warning 提示需要配置環(huán)境變量轰驳，按提示配置環(huán)境變量即可
可以嘗試執(zhí)行命令
flutter pub global run webdev
到此環(huán)境搭建成功了。
3冒黑、創(chuàng)建和啟動項目
3.1 使用現(xiàn)有項目
flutter_web 目錄下有 examples 幾個 demo 項目勤哗，比如：hello_world
cd <flutter_web 目錄>/examples/hello_world
執(zhí)行
flutter pub upgrade
或
flutter 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
說明項目配置成功了，然后就是啟動本地服務(wù)冬竟，官方的命令是：webdev serve 實際使用過程中這個命令并不對 需要使用
flutter pub global run 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)建新項目
官方給兩種途徑創(chuàng)建新項目 1 ）使用 Visual Studio Code，具體配置 Flutter Dart 插件就不多說。使用命令面板 Flutter: New Web Project焚辅，就可以創(chuàng)建一個新項目了同蜻，等配置完成后，按 F5 或者 Debug -> Start Debugging湾蔓，就可以啟動服務(wù)并自動打開瀏覽器。
2 ）使用 IntelliJ贬循，沒有研究
3 ）使用 Android Studio，因為本身我是開發(fā)安卓的杖虾，習慣使用 Studio 進行開發(fā)。然而 studio 并不能創(chuàng)建一個普通的 dart 項目坟比，或者 flutter web 項目嚷往，相信后期官方一定是能支持的。
目前想使用 studio 寫代碼的籍琳，可以使用 Visual Studio Code魂贬，創(chuàng)建完項目完之后，再用 Android Studio 打開項目付燥，也是可以的。
不過對于沒有安裝 Visual Studio Code 的同學來說的話闻丑，還可以用命令行來創(chuàng)建項目勋颖。
命令行創(chuàng)建 web 項目需要安裝另一個工具
flutter 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.
可以看到這個工具可以按照 7 種模版創(chuàng)建項目饭玲，我們使用的是 flutter-web-preview，其他模版有興趣的可以自行研究茄厘。
創(chuàng)建一個項目目錄，然后
cd 目錄
執(zhí)行命令
flutter pub global run stagehand flutter-web-preview
一個 web 項目就創(chuàng)建完成了胎署，可以使用 studio 打開項目窑滞，使用flutter pub get配置好完之后恢筝，可以進行正常的代碼了巨坊。
總結(jié) ： 目前為止 vscode 最好用，一步創(chuàng)建恢氯，隨意配置鼓寺。
