meteor
유성과 함께 폴리머 사용하기

미분 사용 : vulcanize

프로젝트의 루트에서 Bower가 설치되었는지 확인하고 ( npm install -g bower ) bower init 실행하십시오. 이렇게하면 프로젝트 디렉토리에 bower.json 파일이 생성됩니다.

루트 디렉터리에 .bowerrc 라는 새 파일을 만듭니다. 다음을 포함해야합니다.

{
  "directory": "public/bower_components"
}

이를 통해 Bower는 응용 프로그램의 공개 디렉토리에있는 bower_components 폴더에 구성 요소를 저장해야한다는 것을 알 수 있습니다.

이제 앱에 사용할 Polymer 구성 요소를 추가하십시오.

앱의 루트 디렉토리에서 사용하려는 각 구성 요소를 설치하십시오.

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>