使用 Dart 建立 Web 應用程式

1. 安裝 Dart
2. 取得 CLI 工具或 IDE（或兩者皆有）
3. 建立 Web 應用程式
4. 執行應用程式
5. 將自訂程式碼新增至應用程式
6. 使用 Dart DevTools 來檢查應用程式
7. 建置和部署您的 Web 應用程式
下一步？

此頁面描述開始使用 Dart 開發僅限 Web 應用程式的步驟。如果您想撰寫多平台應用程式，請嘗試 Flutter。

在開始之前，請先閱讀Dart 簡介，確保您熟悉 Dart 的基礎知識。然後按照以下步驟，使用 Dart 建立一個小型 Web 應用程式。

若要開發真正的應用程式，您需要 SDK。您可以直接下載 Dart SDK（如下所述），或者下載 Flutter SDK，其中包含完整的 Dart SDK。

Windows
Linux
Mac

使用 Chocolatey 安裝 Dart SDK 的穩定版本。

安裝 Dart SDK

C:\> choco install dart-sdk

您可以使用 APT 在 Linux 上安裝 Dart SDK。

執行以下一次性設定

$ sudo apt-get update
$ sudo apt-get install apt-transport-https
$ wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/dart.gpg
$ echo 'deb [signed-by=/usr/share/keyrings/dart.gpg arch=amd64] https://storage.googleapis.com/download.dartlang.org/linux/debian stable main' | sudo tee /etc/apt/sources.list.d/dart_stable.list

安裝 Dart SDK

$ sudo apt-get update
$ sudo apt-get install dart

使用 Homebrew，安裝 Dart 很簡單。

$ brew tap dart-lang/dart
$ brew install dart

terminal 如果您喜歡使用命令列，請安裝 webdev 套件

$ dart pub global activate webdev

web 雖然使用 IDE 是選用的，但我們強烈建議使用。如需可用 IDE 的清單，請參閱編輯器和除錯器總覽。

terminal 若要從命令列建立 Web 應用程式，請使用 dart create 命令搭配 web 範本

$ dart create -t web quickstart

web 若要從具有 Dart 整合功能的 IDE 建立相同的 Web 應用程式，請使用名為Bare-bones Web App 的範本建立專案。

Web 應用程式範本會匯入 package:web，這是 Dart 為現代 Web 所建構的強大且簡潔的 Web 互通性解決方案。若要瞭解更多資訊，請查看 Web 互通性總覽。

terminal 若要從命令列執行應用程式，請使用 webdev 來建置並提供應用程式

$ cd quickstart
$ webdev serve

web 或從您的 IDE 執行應用程式。

若要檢視您的應用程式，請使用 Chrome 瀏覽器來瀏覽應用程式的 URL，例如 localhost:8080。

無論您是使用 IDE 還是命令列，webdev serve 都會使用開發 JavaScript 編譯器來建置並提供您的應用程式。第一次開發編譯器建置並提供您的應用程式時，啟動速度最慢。之後，資源會快取到磁碟上，而增量建置會快得多。

編譯應用程式後，瀏覽器應顯示「您的 Dart 應用程式正在執行。」

Launched bare-bones app

讓我們自訂您剛建立的應用程式。

將以下程式碼片段中的 thingsTodo() 函式複製到 web/main.dart 檔案

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

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

新增 newLI() 函式（如下所示）。它會建立一個新的 LIElement，其中包含指定的 String。

dartIterable<String> thingsTodo() sync* { /* ... */ }

HTMLLIElement newLI(String itemText) =>
  (document.createElement('li') as HTMLLIElement)..text = itemText;
 
void main() { /* ... */ }

在 main() 函式中，使用 appendChild 和 thingsTodo() 的值，將內容附加到 output 元素

dartIterable<String> thingsTodo() sync* { /* ... */ }

HTMLLIElement newLI(String itemText) =>
  (document.createElement('li') as HTMLLIElement)..text = itemText;

void main() {
 final output = querySelector('#output');
 for (final item in thingsTodo()) {
   output?.appendChild(newLI(item));
 }
}

儲存您的變更。
webdev 工具會自動重建您的應用程式。重新整理應用程式的瀏覽器視窗。現在您的簡單 Dart 應用程式有一個待辦事項清單！它應該看起來像這樣
您可以選擇編輯 web/styles.css 來改善格式，然後重新載入應用程式以檢查您的變更。
css
```
#output {
  padding: 20px;
  text-align: left;
}
```

使用 Dart DevTools 設定中斷點、檢視值和類型，並逐步執行應用程式的 Dart 程式碼。如需設定詳細資訊和逐步解說，請參閱除錯 Dart Web 應用程式。

若要在開發環境之外執行您的 Web 應用程式，您需要建置並部署它。若要瞭解更多關於部署 Dart Web 應用程式的資訊，請查看Web 部署。

查看這些資源

如果您遇到困難，請在社群和支援中尋求協助。

除非另有說明，否則本網站的文件反映的是 Dart 3.6.0。頁面上次更新於 2024-06-10。檢視來源或回報問題。

使用 Dart 建立 Web 應用程式

1. 安裝 Dart

2. 取得 CLI 工具或 IDE（或兩者皆有）

3. 建立 Web 應用程式

4. 執行應用程式

5. 將自訂程式碼新增至應用程式

6. 使用 Dart DevTools 來檢查應用程式

7. 建置和部署您的 Web 應用程式

下一步？