Question

试图掌握聚合物和整个材料设计方面的事情。我在工作中使用它并且运行正常，但是当我试图在家里自己做事时它永远无法正常工作......即使我从Polymer本身安装示例，即：

polymer init polymer-1-application

例如在标题中，我给出了纸卡组件，它似乎不起作用。我已经启动并运行了app-header / app-toolbar，但这是通过复制和粘贴其他代码。

请参阅下面的代码（我只会包含重要的部分，请假设所有标签都正确）

的index.html

<!doctype html>
<html>
<head>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="elements/newProj-header-bar.html">
  <link rel="import" href="elements/newProj-card.html">

  <style>/* CSS HERE */</style>
</head>
<body unresolved>

  <newProj-header-bar></newProj-header-bar>
  <newProj-card></newProj-card>

</body>
</html>

new-Poj-header-bar.html（包括所有代码）

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<dom-module id="newProj-header-bar">
  <template>
    <style>
      :host {
        display: block;
        background: #115f9b;
        color: white;
      }
    </style>

       <app-header slot="header" reveals shadow effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
            <div main-title>Adam's App</div>
            <paper-icon-button icon="refresh"></paper-icon-button>
            <paper-icon-button icon="create"></paper-icon-button>
            <paper-icon-button icon="search"></paper-icon-button>
          </app-toolbar>
        </app-header>

  </template>

  <script>
    Polymer({

      is: 'newProj-header-bar',

      properties: {

      },

    });
  </script>
</dom-module>

取名为NewProj-card.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">

<link rel="import" href="../bower_components/paper-button/paper-button.html">

<link rel="import" href="../bower_components/paper-card/paper-card.html">

<dom-module id="newProj-card">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
       <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
          <div class="card-content">
            Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
          </div>
          <div class="card-actions">
            <paper-button>Share</paper-button>
            <paper-button>Explore!</paper-button>
          </div>
        </paper-card>

  </template>

  <script>
    Polymer({

      is: 'newProj-card',

      properties: {

      },

    });
  </script>

编辑（17/06/17）

我将命名约定更改为没有Pascal L建议的任何大写字母，但事情仍然无效。我甚至尝试使用纸质材料，但没有骰子。

我现在将向您展示bower.json的纸质卡片，看看它是否与不兼容的版本有关......

寻找我的bower.json文件我发现我有一个“bower.json”，还有一个“.bower.json”以及标准的“.gitignore”文件......点缀一个似乎有更多的信息，但不知道发生了什么或为什么两个文件......

纸卡/ bower.json

{
  "name": "paper-card",
  "private": false,
  "main": "paper-card.html",
  "ignore": [
    "README.md"
    ],
  "dependencies": {
    "paper-shadow": "Polymer/paper-shadow#master",
    "paper-ripple": "Polymer/paper-ripple#master"
  }
}

.bower.json

{
  "name": "paper-card",
  "private": false,
  "main": "paper-card.html",
  "ignore": [
    "README.md"
  ],
  "dependencies": {
    "paper-shadow": "Polymer/paper-shadow#master",
    "paper-ripple": "Polymer/paper-ripple#master"
  },
  "homepage": "https://github.com/andytuwm/paper-card",
  "version": "0.1.5",
  "_release": "0.1.5",
  "_resolution": {
    "type": "version",
    "tag": "0.1.5",
    "commit": "092df7a4e6766a6acc26d42447811fcf2a844998"
  },
  "_source": "https://github.com/andytuwm/paper-card.git",
  "_target": "^0.1.5",
  "_originalSource": "paper-card",
  "_direct": true
}

Answer 1

您好，您必须将newProj卡组件重命名为new-proj-card，因为Html不允许使用大写字母作为标记名称。

Polymer Bower Components纸卡不工作