使用差异硫化
在项目的根目录中,确保安装了 Bower(npm install -g bower
)并运行 bower init
。这将在项目的目录中创建一个 bower.json
文件。
在根目录中创建一个名为 .bowerrc
的新文件。它应包含以下内容:
{
"directory": "public/bower_components"
}
这让 Bower 知道它应该保存应用程序公共目录中 bower_components
文件夹中的组件。
现在添加你希望与应用程序一起使用的 Polymer 组件。
在你的应用程序的根目录中,bower-install 你要使用的每个组件。
bower install --save PolymerElements/paper-button#^1.0.0 PolymerElements/paper-checkbox#^1.0.0
将 Vulcanize 添加到项目中
Meteor add differential:vulcanize
在项目的根目录中创建一个名为 config.vulcanize 的新文件。它应包含以下内容:
{
"polyfill": "/bower_components/webcomponentsjs/webcomponents.min.js",
"useShadowDom": true, // optional, defaults to shady dom (polymer default)
"imports": [
"/bower_components/paper-button/paper-button.html",
"/bower_components/paper-checkbox/paper-checkbox.html"
]
}
imports
应列出你将在应用中使用的每个组件。
你现在可以像使用任何其他元素一样使用在 Blaze 模板中导入的组件:
<template name="example">
<div>
this is a material design button: <paper-button></paper-button>
this is a material design checkbox: <paper-checkbox></paper-checkbox>
</div>
</template>