Question

我单独阅读了Dart和Polymer的入门教程，现在尝试使用Polymer-Dart。所有样本都使用自定义元素，但没有一个使用核心元素，因此存在混淆。

编辑：我已根据评论中的建议编辑了代码并添加了更多详细信息。

这是控制台输出：

[web] GET /packages/core_elements/core-header-panel/core-header-panel.html => Could not find asset core_elements|lib/core-header-panel/core-header-panel.html.
[web] GET /packages/core_elements/core-toolbar/core-toolbar.html => Could not find asset core_elements|lib/core-toolbar/core-toolbar.html.
[web] GET /packages/paper_elements/paper-tabs/paper-tabs.html => Could not find asset paper_elements|lib/paper-tabs/paper-tabs.html.

工具输出：

[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:12:5: couldn't find imported asset "lib/core-header-panel/core-header-panel.html" in package "core_elements".
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:13:5: couldn't find imported asset "lib/core-toolbar/core-toolbar.html" in package "core_elements".
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:14:5: couldn't find imported asset "lib/paper-tabs/paper-tabs.html" in package "paper_elements".
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:26:6: definition for Polymer element with tag name "paper-input" not found.
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:29:4: definition for Polymer element with tag name "core-header-panel" not found.
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:31:5: definition for Polymer element with tag name "core-toolbar" not found.
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:34:5: definition for Polymer element with tag name "paper-tabs" not found.
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:35:7: definition for Polymer element with tag name "paper-tab" not found.
[Warning from polymer (Linter) on mini|web/mini.html]:
web/mini.html:36:7: definition for Polymer element with tag name "paper-tab" not found.
Build error:
Transform ImportInliner on mini|web/mini.html threw error: Could not find asset core_elements|lib/core-header-panel/core-header-panel.html.
null
null
Build completed with 1 errors.

pubsec.yaml

name: mini
description: A sample web application
dependencies:
    polymer: ">=0.11.0 <0.12.0"
    core_elements: ">=0.0.6 <0.1.0"
    paper_elements: ">=0.0.1 <0.1.0"
transformers:
- polymer:
    entry_points: web/mini.html

mini.dart：

import 'dart:html';

void main() {

}

void reverseText(MouseEvent event) {
  var text = querySelector("#sample_text_id").text;
  var buffer = new StringBuffer();
  for (int i = text.length - 1; i >= 0; i--) {
    buffer.write(text[i]);
  }
  querySelector("#sample_text_id").text = buffer.toString();
}

mini.html：

    <!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mini</title>

    <script src="packages/web_components/dart_support.js"></script>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->

    <link rel="import" href="packages/core_elements/core-header-panel/core-header-panel.html">
    <link rel="import" href="packages/core_elements/core-toolbar/core-toolbar.html">
    <link rel="import" href="packages/paper_elements/paper-tabs/paper-tabs.html">

    <script type="application/dart">export 'package:polymer/init.dart';</script>    
    <script async src="packages/browser/dart.js"></script>

    <link rel="stylesheet" href="mini.css">

  </head>
  <body unresolved touch-action="auto">
    <h1>TODO list</h1>

   <div>
     <paper-input label="Your Name"></paper-input>
   </div>

   <core-header-panel>

    <core-toolbar>
    </core-toolbar>

    <paper-tabs id="tabs" selected="all" self-end>
      <paper-tab name="all">ALL</paper-tab>
      <paper-tab name="favorites">FAVORITES</paper-tab>
    </paper-tabs>

  </core-header-panel>

  </body>
</html>

我能够成功构建，并确保所有这些组件都在包中（具有正确的名称和路径）

Answer 1

<!-- before the Polymer elements imports -->
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->

<!-- Dart core-elements/paper-elements use underscores not dashes in the file names -->
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">

<!-- after the Polymer elements imports -->
<script type="application/dart">export 'package:polymer/init.dart';</script>    
<script async src="packages/browser/dart.js"></script>

Answer 2

这是你的问题：

<link rel="import" href="packages/core_elements/core-header-panel/core-header-panel.html">
<link rel="import" href="packages/core_elements/core-toolbar/core-toolbar.html">
<link rel="import" href="packages/paper_elements/paper-tabs/paper-tabs.html">

虽然HTML元素使用-字符，但文件和目录名称使用_。所以你的进口必须是：

<link rel="import" href="packages/core_elements/core_header_panel/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar/core_toolbar.html">
<link rel="import" href="packages/paper_elements/paper_tabs/paper_tabs.html">

使用Polymer.Dart找不到资产

2 个答案: