目录

使用 Dart 构建 Web 应用

目录

本页介绍了使用 Dart 开始开发仅限 Web 应用的步骤。 如果您想编写一个多平台应用，请尝试 Flutter。

在开始之前，请阅读Dart 简介，确保您熟悉 Dart 的基础知识。 然后按照以下步骤使用 Dart 创建一个小型的 Web 应用。

1. 安装 Dart

#

要开发真正的应用，您需要一个 SDK。您可以直接下载 Dart SDK（如下所述）或下载 Flutter SDK，其中包含完整的 Dart SDK。

  • Windows
  • Linux
  • Mac

使用Chocolatey 安装 Dart SDK 的稳定版本。

要安装 Dart SDK

C:\> choco install dart-sdk

您可以使用 APT 在 Linux 上安装 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. 创建一个 Web 应用

#

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 互操作概述。

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() 函数（如下所示）。 它创建一个包含指定 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 应用有了一个待办事项列表！ 它应该看起来像这样
    Running the revised app

  6. （可选）通过编辑 web/styles.css 来改进格式，然后重新加载应用以检查您的更改。

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

6. 使用 Dart DevTools 检查该应用

#

使用 Dart DevTools 来设置断点、查看值和类型，并单步执行您应用的 Dart 代码。 有关设置详细信息和演练，请参阅调试 Dart Web 应用。

7. 构建和部署您的 Web 应用

#

要在您的开发环境之外运行您的 Web 应用，您需要构建和部署它。 要了解有关部署 Dart Web 应用的更多信息，请查看Web 部署。

下一步是什么？

#

查看以下资源

如果您遇到困难，请在社区和支持中寻求帮助。

除非另有说明，否则本网站上的文档反映的是 Dart 3.6.0。 页面上次更新时间为 2024-06-10。 查看源代码 或报告问题。