目錄

使用 Dart 建立網路應用程式

此頁面說明開始使用 Dart 開發僅限網路應用程式的步驟。如果您想要撰寫多平台應用程式,請嘗試 Flutter。

開始之前,請先閱讀Dart 簡介,確認您已熟悉 Dart 基礎知識。然後按照下列步驟使用 Dart 建立小型網路應用程式。

1. 安裝 Dart

#

若要開發實際應用程式,您需要 SDK。您可以直接下載 Dart SDK(如下所述),或下載 Flutter SDK(包含完整的 Dart SDK)。

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

安裝 Dart SDK

C:\> choco install dart-sdk

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

  1. 執行下列一次性設定

    $ 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
  2. 安裝 Dart SDK

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

使用 Homebrew 可以輕鬆安裝 Dart。

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

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

#

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

$ dart pub global activate webdev

web 雖然使用 IDE 是選用的,但我們強烈建議您使用。如需可用 IDE 的清單,請參閱編輯器和偵錯工具概觀

3. 建立網頁應用程式

#

terminal 若要從命令列建立網路應用程式,請使用 dart create 指令和 web 範本

$ dart create -t web quickstart

web 若要從已整合 Dart 的 IDE 建立相同的網路應用程式,請使用名為簡潔網路應用程式的範本建立專案。

4. 執行應用程式

#

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

$ cd quickstart
$ webdev serve

web 或者從 IDE 執行應用程式。

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

無論您使用 IDE 或命令列,webdev serve 都會使用開發 JavaScript 編譯器建置並提供應用程式。第一次使用開發編譯器建置並提供應用程式時,啟動會最慢。之後,資產會快取在磁碟上,而增量建置也會快很多。

應用程式編譯完成後,瀏覽器應會顯示「您的 Dart 應用程式正在執行中」。

Launched bare-bones app

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

#

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

  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() 函式(如下所示)。它會建立一個包含指定 字串 的新 LIElement

    dart
    Iterable<String> thingsTodo() sync* { /* ... */ }
    
    HTMLLIElement newLI(String itemText) =>
      (document.createElement('li') as HTMLLIElement)..text = itemText;
     
    void main() { /* ... */ }
  3. main() 函式中,使用 appendChildthingsTodo() 的值將內容附加到 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 應用程式就有待辦事項清單了!它應該看起來像這樣
    Running the revised app

  6. 您也可以編輯 web/styles.css 來改善格式,然後重新載入應用程式來查看變更。

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

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

#

使用 Dart DevTools 來設定中斷點、檢視值和型別,以及逐步執行應用程式的 Dart 程式碼。如需設定詳細資料和操作說明,請參閱 偵錯 Dart 網路應用程式

7. 建立並部署網頁應用程式

#

若要在開發環境外執行網路應用程式,您需要建置並部署它。如需進一步瞭解如何部署 Dart 網路應用程式,請查看 網路部署

下一步是什麼?

#

查看這些資源

如果您遇到問題,請在 社群和支援 中尋求協助。