使用 Dart 建立 Web 應用程式

安裝

使用 brew 新增 dart-lang/dart 儲存庫,並安裝 dart

1
2
brew tap dart-lang/dart
brew install dart

查看版本。

1
dart --version

取得 CLI 工具。

1
dart pub global activate webdev

將 Dart 套件的執行檔路徑加到環境變數。

1
export PATH="$PATH":"$HOME/.pub-cache/bin"

建立專案

建立專案。

1
dart create -t web-simple dart-web-example

啟動服務。

1
2
cd dart-web-example
webdev serve

修改 main.dart 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import 'dart:html';

void main() {
var output = document.querySelector('#output');
output?.children.addAll(thingsTodo().map(newLI));
}

LIElement newLI(String itemText) => LIElement()..text = itemText;

Iterable<String> thingsTodo() sync* {
var actions = ['Walk', 'Wash', 'Feed'];
var pets = ['cats', 'dogs'];

for (var action in actions) {
for (var pet in pets) {
if (pet == 'cats' && action != 'Feed') continue;
yield '$action the $pet';
}
}
}

瀏覽網頁

前往 http://127.0.0.1:8080 瀏覽。

程式碼

參考資料