如果您在将Polymer添加到Meteor中仍然遇到问题,这里有一种可行的方法。
我们将使用Bower将Polymer添加到Meteor项目中。
创建Meteor应用程序后,请转到应用程序目录并按照以下步骤操作:
$ bower init
=> 这将通过终端引导您完成创建bower.json文件所需的步骤
现在让我们添加Polymer组件:
$ bower install --save Polymer/polymer
bower install --save Polymer/webcomponentsjs
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
现在,我们将拥有一个位于应用程序根文件夹内的bower_components
目录,其中包含了Polymer组件。创建另一个名为public
的文件夹,并将bower_components
移动到public
文件夹中,以便我们拥有public/bower_components
。
这里有一段简单的代码,您可以使用它替换yourappname.html
的内容。
<head>
<title>Athman's Polymer Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-menu/core-menu.html">
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<style>
html, body {
height: 100%;
margin: 0;
}
body {
font-family: sans-serif;
}
core-scaffold {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#core_toolbar {
color: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
#core_card {
width: 96%;
height: 300px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
margin: 2%;
background-color: rgb(255, 255, 255);
text-align: left;
}
paper-fab {
position: absolute;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body >
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar id="core_toolbar">Navigation</core-toolbar>
<core-menu theme="core-light-theme">
<core-item icon="settings" label="item1"></core-item>
<core-item icon="settings" label="item2"></core-item>
</core-menu>
</core-header-panel>
<div tool>Test Project</div>
<core-card id="core_card" vertical layout start>
<div style="padding: 20px;">This is a sample project</div>
</core-card>
<paper-toast id="toast1" text="Created by Nic Raboy"></paper-toast>
</core-scaffold>
<paper-fab icon="add" onclick="document.querySelector('#toast1').show()"></paper-fab>
</body>
现在让我们来运行我们的应用程序...
$ meteor
享受Polymer的乐趣
致谢:Nic Raboy:使用Polymer与Apache Cordova