使用 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 教程

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