Contents

Get started: web apps

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

使用DartPad,您可以尝试Dart语言和API,无需下载.

例如,这是一个嵌入式DartPad,可让您使用待办事项列表生成器的代码. 单击运行以运行该应用程序; 控制台输出将显示在代码下方. 尝试编辑源代码,也许您想将"马"添加到宠物列表中. 要获得完整的DartPad体验(包括应用程序生成的Web UI),请在dartpad.dev中打开示例.

更多信息:

2. Install Dart

一旦准备好超越DartPad并开发真实的应用程序,则需要Dart SDK.

使用Chocolatey安装Dart SDK的稳定版本:

  C:\> choco install dart-sdk

您可以使用Aptitude在Linux上安装Dart SDK.

  1. 执行以下一次性设置:
     $   sudo apt-get update $   sudo apt-get install apt-transport-https $   sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' $   sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /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

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

如果您想使用命令行,请安装webdevstagehand:

$ pub global activate webdev
$ pub global activate stagehand

Although using an IDE is optional, we highly recommend using one. Web尽管使用IDE是可选的,但我们强烈建议使用IDE. 有关可用IDE的列表,请参见编辑器和调试器概述 .

4. Create a web app

要从命令行创建Web应用程序,请使用以下命令:

$ mkdir quickstart
$ cd quickstart
$ stagehand web-simple
$ pub get

web要从具有Dart集成的IDE中创建相同的Web应用程序,请使用名为Bare-bones Web App的模板创建一个项目.

5. Run the app

要从命令行运行该应用程序,请使用webdev生成并提供该应用程序:

$ webdev serve

Web或从IDE中运行该应用程序.

要查看您的应用,请使用Chrome浏览器访问应用的URL,例如localhost:8080 .

无论您是使用IDE还是命令行, webdev都会使用Dart开发编译器dartdevc来构建和服务您的应用程序. dartdevc首次构建并服务您的应用程序时,启动速度最慢. 之后,资产被缓存在磁盘上,增量构建速度更快.

应用编译完成后,浏览器应显示"您的Dart应用正在运行".

Launched bare-bones app

6. Add custom code to the app

让我们自定义刚创建的应用程序.

  1. 将上面的thingsTodo()函数复制到web/main.dart文件中.

  2. main()函数中,使用thingsTodo()初始化output元素:

    void main() {
      Element output = querySelector('#output');
      output.children.addAll(thingsTodo().map(newLI));
    }
    
    LIElement newLI(String itemText) => LIElement()..text = itemText;
    
    Iterable<String> thingsTodo() sync* { ... }
  3. 保存您的更改.

  4. webdev工具会自动重建您的应用程序. 刷新应用程序的浏览器窗口. 现在,您简单的Dart应用程序具有待办事项列表! 它看起来应该像这样:
    运行修改后的应用

  5. (可选)通过编辑web/styles.css改善格式,然后重新加载应用程序以检查更改.

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

7. Use DevTools to inspect the app

使用Chrome DevTools设置断点,查看值和类型,并逐步浏览应用程序的Dart代码. 有关设置的详细信息和演练,请参阅调试Dart Web Apps .

What next?

查看以下资源:

如果遇到困难,请在社区和支持中寻求帮助.

by  ICOPY.SITE