起步：使用 Dart 开发 Web 应用

Follow these steps to start using Dart to develop web apps.First you’ll play with Dart in your browser, no download required.Then you’ll install Dart and build a small web app.

1. Play with a web app in DartPad

With DartPad you can experiment with the Dart language and APIs,no download necessary.

For example, here’s an embedded DartPad that lets you play withthe code for a todo-list generator.Click Run to run the app;the console output appears beneath the code.Try editing the source code—perhaps you’d like to add “horses”to the list of pets. To get the full DartPad experience,which includes the web UI that the app produces,open the example at dartpad.dev.

备忘: If you see an empty box instead of code, go to theDartPad troubleshooting page.

如果你只看到了空白框框（而不是一些代码），请查阅DartPad 常见问题页面。

More information:

2. Install Dart

Once you’re ready to move beyond DartPad and develop real apps,you need the Dart SDK.

  • Windows
  • Linux
  • Mac

Use Chocolatey to install a stable release of the Dart SDK:

  1.   C:\> choco install dart-sdk

You can use Aptitude to install the Dart SDK on Linux.

  • Perform the following one-time setup: 
  1. $ sudo apt-get update
  2. $ sudo apt-get install apt-transport-https
  3. $ sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
  4. $ sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
  • Install the Dart SDK: 
  1. $ sudo apt-get update
  2. $ sudo apt-get install dart

With Homebrew, installing Dart is easy.

  1.   $ brew tap dart-lang/dart
  2.   $ brew install dart

重要说明: For more information, including how to adjust your PATH, see Get the Dart SDK.

3. Get CLI tools or an IDE (or both)

If you like to use the command line, install webdevand stagehand:

  1. $ pub global activate webdev
  2. $ pub global activate stagehand

_web_Although using an IDE is optional, we highly recommend using one.For a list of available IDEs, see theoverview of editors & debuggers.

4. Create a web app

To create a web app from the command line, use these commands:

  1. $ mkdir quickstart
  2. $ cd quickstart
  3. $ stagehand web-simple
  4. $ pub get

_web_To create the same web app from an IDE that has Dart integration,create a project using the template named Bare-bones Web App.

5. Run the app

To run the app from the command line, use webdev to build and serve the app:

  1. $ webdev serve

_web_Or run the app from your IDE.

To view your app, use the Chrome browser to visit the app’s URL —for example, localhost:8080.

Whether you use an IDE or the command line,webdev serve builds and serves your appusing the Dart development compiler, dartdevc.Startup is slowest the first time dartdevc builds and serves your app.After that, assets are cached on disk and incremental builds are much faster.

Once your app has compiled, the browser should display“Your Dart app is running.”

Launched bare-bones app

6. Add custom code to the app

Let’s customize the app you just created.

  • Copy the thingsTodo() function from the DartPad aboveto the web/main.dart file.

  • In the main() function, initialize the output element usingthingsTodo():

  1. void main() {
  2.   Element output = querySelector('#output');
  3.   output.children.addAll(thingsTodo().map(newLI));
  4. }
  5.  
  6. LIElement newLI(String itemText) => LIElement()..text = itemText;
  7.  
  8. Iterable<String> thingsTodo() sync* { ... }

  • Save your changes.

  • The webdev tool automatically rebuilds your app.Refresh the app’s browser window.Now your simple Dart app has a todo list!It should look something like this:Running the revised app

  • Optionally, improve the formatting by editing web/styles.css,then reload the app to check your changes.

  1. #output {
  2.   padding: 20px;
  3.   text-align: left;
  4. }

7. Use DevTools to inspect the app

Use Chrome DevTools to set breakpoints, view values and types,and step through your app’s Dart code.For setup details and a walkthrough, seeDebugging Dart Web Apps.

Feeling lost? Don’t worry! This was a whirlwind introduction to Dart and web programming that left out many details. For a gentler approach, try a low-level HTML tutorial for Dart.

What next?

Check out these resources:

If you get stuck, find help at Community and Support.