跳到主要内容
目录

使用 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 应用，请使用带有 web 模板的 dart create 命令

$ 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 编译器构建并服务您的应用。首次开发编译器构建并服务您的应用时，启动速度最慢。之后，资源会被缓存在磁盘上，增量构建会快得多。

一旦您的应用编译完成，浏览器应显示“Your Dart app is running.”（您的 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，其中包含指定的 String。

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