【发布时间】：2017-11-15 15:02:52
【问题描述】：
尝试掌握 Polymer 和整个 Material Design 方面。我在工作中使用过它并且它运行正常，但是当我尝试在家里自己做事情时它永远无法正常工作......即使我是从 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 年 6 月 14 日）
按照 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
}
【问题讨论】：
-
您的 Polymer 版本是什么？ （只需在您网站上的控制台中输入 Polymer.version。）另一件事是我不知道为什么您在 bower.json 中有
#master词缀。我正在使用最新的更新，例如，在我的bower.json文件中，我的大部分元素描述如下："paper-material": "PolymerElements/paper-material#^2.0.0",这可能与此有关。尝试重新安装项目中使用的每个元素。 -
嘿 Kuba，是的，我想我现在已经对此进行了一些排序......这与组件的版本控制有关。我一直在使用“bower install paper-card”来安装组件，但由于某种原因这将获得最早的版本。然后我使用了最新版本的“bower install Polymer/paper-card”，它现在可以工作了。
-
是的，您应该始终遵循 webcomponents.org 文档中描述的说明。很高兴知道不应使用
bower install paper-card命令 -
嘿，来吧，这是他们让我使用的，也是我在工作中使用的哈哈。
标签： html polymer material-design paper-elements