Sök…
Använd skillnad: vulkanisera
I projektets rot, se till att Bower är installerad ( npm install -g bower
) och kör bower init
. Detta skapar en bower.json
fil i projektets katalog.
Skapa en ny fil som heter .bowerrc
till din rotkatalog. Det bör innehålla följande:
{
"directory": "public/bower_components"
}
Detta låter Bower veta att den ska spara komponenter i mappen bower_components
i din apps offentliga katalog.
Lägg nu till de polymerkomponenter du vill använda med din app.
I din apps rotkatalog installerar du varje komponent du vill använda.
bower install --save PolymerElements/paper-button#^1.0.0 PolymerElements/paper-checkbox#^1.0.0
Lägg till Vulcanize till ditt projekt
Meteor add differential:vulcanize
Skapa en ny fil som heter config.vulcanize i roten till ditt projekt. Det bör innehålla följande:
{
"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"
bör lista varje komponent du använder i din app.
Du kan nu använda komponenter som du har importerat i dina Blaze-mallar precis som du skulle göra något annat element:
<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>