起步：使用 Dart 开发 Web 应用

下面的步骤将指引你使用 Dart 开发 web 应用。如果你想编写 跨平台 应用，请 尝试 Flutter。

开始旅程？你将先在浏览器中尝试 Dart，无需下载。之后你将会安装 Dart 并创建一个小型 web 应用。

1. 在 DartPad 中开发 web 程序

通过 DartPad，你不需要下载任何东西即可尝试 Dart 编程语言和 API。

例如，下面这个内嵌的 DartPad 可以让你尝试待办列表生成器的代码。点击 Run 运行程序；输出界面显示在代码的右侧。尝试编辑源码，比如在 pets 列表中添加「horses」。

{$ begin main.dart $}
import 'dart:html';

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';
      }
    }
  }
}

void addTodoItem(String item) {
  final listElement = LIElement()..text = item;
  todoList.children.add(listElement);
}

final UListElement todoList = querySelector('#todolist') as UListElement;

void main() {
  thingsTodo().forEach(addTodoItem);
}

{$ end main.dart $}
{$ begin index.html $}
<h2>A Simple To-Do List</h2>

<p>Things to do:</p>

<ul id="todolist">
</ul>
{$ end index.html $}

更多信息：

• DartPad 文档

• Dart 语言概览

• Dart 库概览

• 简明 Dart web 开发指南

2. 安装 Dart

Once you’re ready to move beyond DartPad and develop real apps, you need an SDK. You can either download the Dart SDK directly (as described below) or download the Flutter SDK, which includes the full Dart SDK.

• Windows
• Linux
• Mac

  C:\> choco install dart-sdk

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

3. 获取 CLI 工具或者 IDE（或两者都有）

如果你想使用命令行，请安装 [webdev][]：

$ dart pub global activate webdev

尽管使用 IDE 是可选的，但我们强烈建议使用 IDE。有关可用的 IDE 列表，请查看 编辑器和调试器的概览。

4. 创建一个 web 应用

通过在命令行输入以下命令，创建一个 web 应用：

$ dart create -t web quickstart

通过已经集成 Dart 的 IDE 同样可以创建一个 web 应用，使用名为 Bare-bones Web App 的模版创建一个项目。

5. 运行应用

要从命令行运行应用程序，可以使用 [webdev][] 构建和运行应用程序：

$ cd quickstart
$ webdev serve

或者从 IDE 运行应用程序。

使用 Chrome 浏览器访问应用程序的 URL 即可查看你的应用程序。比如，localhost:8080。

无论使用 IDE 还是命令行， [webdev serve][] 构建和运行你的程序都是通过 Dart 开发编译器 [dartdevc][]。第一次构建和运行应用程序时，启动速度很慢。之后的构建会很快，因为资源会被缓存在磁盘并且使用增量构建。

一旦应用程序编译完成，浏览器会显示「Your Dart app is running.」

6. 添加自定义代码

让我们自定义刚才创建的应用。

1. 从 DartPad 将 thingsTodo() 函数拷贝到 web/main.dart 文件中。

2. 添加 newLI() 函数（如下所示）。它接收 String 类型的参数并创建一个新的 LIElement。

   Iterable<String> thingsTodo() sync* { ... }
   
   LIElement newLI(String itemText) => LIElement()..text = itemText;
   
   void main() { ... }

3. 在 main() 函数中，初始化 output 元素通过 thingsTodo()：

   Iterable<String> thingsTodo() sync* { ... }
   
   LIElement newLI(String itemText) => LIElement()..text = itemText;
   
   void main() {
     querySelector('#output')?.children.addAll(thingsTodo().map(newLI));
   }

4. 保存你的修改。

5. webdev 工具会自动重新构建你的应用程序。在浏览器刷新应用。现在你简易的 Dart 程序已经有了一个待办列表！如下图所示：
   

6. 你可以选择美化一下应用的样式通过编辑 web/styles.css，然后重新加载应用程序来检查你的改动。

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

7. 使用 Dart 开发者工具检查应用

使用 Dart 开发者工具设置断点，查看值和类型，逐行运行你的 Dart 代码。有关设置细节和演示，请查看 调试 Dart Web 应用。

接下来做什么？

检索这些资源：

• Tutorials and codelabs for Dart
  • Tutorials
  • Codelabs
• Dart language, libraries, and conventions
  • Language tour
  • Library tour
  • Effective Dart
• Tools & libraries
  • Dart SDK
  • Dart tools
  • IDEs
  • Web libraries and packages

如果你在这一步无法继续进行，可以从 社区和帮助 中查找帮助。