在Dart編輯器中，點(diǎn)擊 1-blankbadge 下 web 目錄左邊的小箭頭，展開(kāi) web 目錄。這個(gè)目錄包含一個(gè) piratebadge.css 文件，一個(gè) piratebadge.dart ，和一個(gè) piratebadge.html 文件。

打開(kāi)文件

在Dart編輯器中，通過(guò)雙擊文件名來(lái)打開(kāi) piratebadge.dart 文件和 piratebadge.html 文件

查看代碼

熟悉一下這個(gè)框架應(yīng)用的 HTML 和 Dart 代碼。

piratebadge.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Pirate badge</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="piratebadge.css">
  </head>
  <body>
    <h1>Pirate badge</h1>

    <div class="widgets">
      TO DO: Put the UI widgets here.
    </div>
    <div class="badge">
      <div class="greeting">
        Arrr! Me name is
      </div>
      <div class="name">
        <span id="badgeName"> </span>
      </div>
    </div>

    <script type="application/dart" src="piratebadge.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

關(guān)鍵信息：

在這次代碼試驗(yàn)中，你對(duì) piratebadge.html 文件的所有更改都是在 class 為 widgets 的 <div> 標(biāo)簽中進(jìn)行的。
在后續(xù)步驟中, id 為 badgeName 的 <span> 標(biāo)簽會(huì)被具有用戶輸入功能的Dart代碼升級(jí)。
第一個(gè) <script> 標(biāo)簽引入了一個(gè)主文件，piratebadge.dart 文件。
Dart 虛擬機(jī)可以原生地運(yùn)行 Dart 代碼。 Dart 虛擬機(jī)會(huì)在 Dartium 中構(gòu)建－－一個(gè)特殊的，可以讓你運(yùn)行Dart App的 Chromium 瀏覽器。
packages/browser/dart.js 腳本會(huì)檢查原生Dart支持，同時(shí)引導(dǎo)Dart虛擬機(jī)載入編譯JavaScript腳本。

piratebadge.dart

void main() {
  // 你的應(yīng)用從這里開(kāi)始
}

關(guān)鍵信息：

這個(gè)文件包含一個(gè)程序的入口 main() 方法. 在 piratebadge.html 文件的 <script> 標(biāo)簽會(huì)通過(guò)運(yùn)行這個(gè)方法來(lái)開(kāi)始應(yīng)用。
main() 方法是一個(gè) top-level 的方法。
一個(gè) top-level 的變量或者方法是在類(lèi)外進(jìn)行公開(kāi)定義的

運(yùn)行這個(gè)應(yīng)用

在Dart編輯器中運(yùn)行一個(gè)應(yīng)用：右擊 piratebadge.html 文件然后選擇 Run in Dartium。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-1-run-the-skeleton-app-pic1.png" alt="運(yùn)行" />

Dart 編輯器啟動(dòng)了 Dartium，在構(gòu)建之后，讀取到了 piratebadge.html 文件。 piratebadge.html 文件啟動(dòng)了這個(gè)應(yīng)用并且調(diào)用了main()方法。

你應(yīng)該看到如下結(jié)果。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-1-run-the-skeleton-app-pic2.png" alt="運(yùn)行" />

上一篇：步驟 4：創(chuàng)建一個(gè) PirateName 的類(lèi)下一篇：下面要做什么？