内容

使用 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 应用，请使用名为**基本 Web 应用**的模板创建项目。

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.5.3。页面最后更新于 2024-06-10。 查看源代码 或 报告问题。