vue-material : 알 수없는 custom 구성 요소 md-drawer & md-content

Question

md-drawer 구성 요소와 md-content 구성 요소를 렌더링하려고합니다. 하지만이 오류를 극복하는 데 문제가 있습니다.

[Vue warn]: Unknown custom element: <md-drawer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

는 <md-content> 구성 요소는 동일한 에러 메시지가있다.

다음은이 코드입니다.

App.vue

<template> 
    <div id="app" class="page-container md-layout-column"> 

     <div class="page-container md-layout-column"> 
     <md-toolbar class="md-primary"> 
      <md-button class="md-icon-button" @click="showNavigation = true"> 
      <md-icon>menu</md-icon> 
      </md-button> 
     </md-toolbar> 

     <md-drawer :md-active.sync="showNavigation"> 
      <md-toolbar class="md-transparent" md-elevation="0"> 
      <span class="md-title">My App name</span> 
      </md-toolbar> 

      <md-list> 
      <md-list-item> 
       <md-icon>move_to_inbox</md-icon> 
       <span class="md-list-item-text">Inbox</span> 
      </md-list-item> 

      <md-list-item> 
       <md-icon>send</md-icon> 
       <span class="md-list-item-text">Sent Mail</span> 
      </md-list-item> 

      <md-list-item> 
       <md-icon>delete</md-icon> 
       <span class="md-list-item-text">Trash</span> 
      </md-list-item> 

      <md-list-item> 
       <md-icon>error</md-icon> 
       <span class="md-list-item-text">Spam</span> 
      </md-list-item> 
      </md-list> 
     </md-drawer> 

     <md-content> 
      <router-view></router-view> 
     </md-content> 
     </div> 
    </div> 
</template> 

<script> 
export default { 
    name: "app", 
    data:() => ({ 
    showNavigation: false, 
    showSidepanel: false 
    }) 
}; 
... 
<style>...</style> 

main.js

import Vue from 'vue' 
import Vuex from 'vuex' 
import VueRouter from 'vue-router' 
import VueMaterial from 'vue-material' 

import App from './App.vue' 
import store from './store' 
import routes from './router' 

import 'vue-material/dist/vue-material.css' 

const router = new VueRouter({ 
    routes 
}) 

let colorPrimary = { 
    color: 'green', 
    hue: 700, 
    hexa: '#42b883' 
} 

let colorAccent = { 
    color: 'blue', 
    hue: 600, 
    hexa: '#35495e' 
} 

Vue.use(VueMaterial) 

Vue.material.registerTheme('default', { 
    primary: colorPrimary, 
    accent: colorAccent, 
    warn: colorPrimary, 
    background: 'white' 
}) 

Vue.material.setCurrentTheme('default') 

Vue.use(Vuex) 
Vue.use(VueRouter) 

new Vue({ 
    el: '#app', 
    store, 
    router, 
    render: h => h(App) 
}) 

당신은 아마이 코드는 거의 직접 복사가 있음을 말해 the vue-material docs에서 붙여 넣을 수 있습니다. 이 때문에 나는 거의 긍정적이다. 문제는 main.js에서 오는 것이지만 나는 그것을 볼 수 없다. 아마도 다른 누군가가 그럴 수있다.

또한 내가하고있는 다른 것에 대한 추가 안내문이나 Vue에 관한 모든 사항은 환영합니다!

Answer 1

https://vuematerial.io의 정보는 github와 맞지 않습니다. 당신이

2 MdDrawer

폴더가있는 경우

1) node_modules 체크인/VUE 소재/부품/ 당신은 아마) 당신은 파일이 github에 https://github.com/vuematerial/vue-material

3에 존재 볼 수 있습니다) 볼 실행하기 전에 github npm install vue-material @ beta --save

과 같이 설치해야합니다. 이전 버전을 제거하려면 npm uninstall vue-material을 실행해야합니다.