使用 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 應用程式，請搭配 web 範本使用 dart create 命令

$ 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 編譯器來建置並提供您的應用程式服務。首次開發編譯器建置並提供您的應用程式服務時，啟動速度最慢。之後，資產會快取到磁碟，而增量建置會快很多。

一旦您的應用程式編譯完成，瀏覽器應顯示「Your Dart app is running」。

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.7.1 版本。頁面上次更新於 2024-06-10。檢視原始碼或回報問題。

使用 Dart 建立 Web 應用程式

1. 安裝 Dart

2. 取得 CLI 工具或 IDE (或兩者皆可)

3. 建立 Web 應用程式

4. 執行應用程式

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

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

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

下一步？