使用 Dart 構建 Web 應用

本頁介紹如何使用 Dart 開發僅限 Web的應用的步驟。如果你想編寫一個多平臺應用，請嘗試 Flutter。

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

要開發實際應用，你需要一個 SDK。你可以直接下載 Dart SDK（如下所述），或者下載包含完整 Dart SDK 的 Flutter SDK。

C:\> choco install dart-sdk

brew tap dart-lang/dart
brew install dart

terminal 如果你喜歡使用命令列，請安裝 webdev package

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 編譯器構建和提供你的應用。首次開發編譯器構建和提供應用時，啟動速度最慢。之後，資源會快取在磁碟上，增量構建會快得多。

一旦你的應用編譯完成，瀏覽器應該顯示“Your Dart app is running.”（你的 Dart 應用正在執行。）

讓我們自定義你剛剛建立的應用。

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

   dart

   Iterable<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';
         }
       }
     }
   }

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

   dart

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

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

   dart

   Iterable<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));
    }
   }

4. 儲存你的更改。

5. webdev 工具會自動重新構建你的應用。重新整理應用的瀏覽器視窗。現在你的簡單 Dart 應用有了一個待辦事項列表！它應該看起來像這樣
   

6. （可選）透過編輯 web/styles.css 改進格式，然後重新載入應用以檢視你的更改。

   css

   #output {
     padding: 20px;
     text-align: left;
   }

使用 Dart DevTools 設定斷點、檢視值和型別，並逐步執行應用的 Dart 程式碼。有關設定詳細資訊和演示，請參閱除錯 Dart Web 應用。

要在開發環境之外執行你的 Web 應用，你需要構建並部署它。要了解有關部署 Dart Web 應用的更多資訊，請檢視Web 部署。

檢視這些資源

• Dart 語言、庫和約定
  • 語言導覽
  • 核心庫詳解
  • Effective Dart
• Web 開發
  • JavaScript 互操作
  • Web 庫和 package
  • package:web 概覽
  • DOM 簡介
• Dart 教程

如果你遇到困難，請在社群和支援處尋求幫助。