不能使用任何聚合物元素

Question

我刚刚开始学习和使用聚合物，我已经按照 Google 的聚合物网站进行了所有安装和导入，但我仍然无法使单个聚合物元素正常工作。这些是文件： bower.json

{
  "name": "take0",
  "description": "0.0",
  "main": "index.html",
  "moduleType": [
    "amd"
  ],
  "keywords": [
    "polymer"
  ],
  "authors": [
    "Balajee"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "core-component-page": "Polymer/core-component-page#^0.5",
    "core-elements": "Polymer/core-elements#^0.5.6",
    "paper-elements": "Polymer/paper-elements#^0.5.6",
    "platform": "Polymer/platform#^0.4.2",
    "polymer": "Polymer/polymer#^1.3.0"
  }
}

Index.html:

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            Take 0 on polymer
        </title>
      <link rel"import" href="bower_components/polymer/polymer.html">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
       <!-- Componenet kicks in-->
       <link   rel="import" href="components/component-one.html">
       </head>    
        <body>
            <component-one>
            </component-one>
        </body>
</html>

components/component-one.html:

<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!-- Component one-->
<dom-module id="component-one">
  <style>
    paper-button.fancy {
      background: green;
      color: yellow;
    }
    paper-button.fancy:hover {
      background: lime;
    }
  </style>
  <template>
    <h1>{{title}}</h1>
    <p>Ready to take you out with polymer!!</p>
    <paper-button raised>
      Click Me!!</paper-button>
  </template>
</dom-module>
<script>
  Polymer({
    is: "component-one",
    properties: {
      title: {
        type: String,
        value: "Hello World!!!"
      }
    },
    ready: function() {
      console.log("I'm Working!!!!!")
    }

  });
</script>

我花了 2 天时间寻找问题，但找不到任何解决问题的方法。

Answer 1

这里的问题是您正在使用 Polymer 1.3.0 和为 'ancient' Polymer 0.5 构建的元素。

尝试用这个替换 bower.json 文件的依赖部分：

"dependencies": {
  "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
  "iron-elements": "PolymerElements/iron-elements#^1.0.0",
  "paper-elements": "PolymerElements/paper-elements#^1.0.0",
  "polymer": "Polymer/polymer#^1.3.0"
}

您可以看到 core-elements 库被 iron-elements 替换了。

为避免此类错误，我建议您始终使用 Polymer Elements Catalog 查找 Google 元素（例如这里是 the paper-button page，使用底部显示的推荐 bower 命令的菜单抽屉以将其导入）。

此外，如果您在 Github 或 customelements.io 上发现有趣的元素，请务必检查它的 bower.json 以确定它基于哪个 Polymer 版本。

不能使用任何聚合物元素

Can't use any of the polymer elements

polymer

polymer-1.0