programing

vue-material: 알 수 없는 커스텀 컴포넌트 md-md-content

sourcetip 2022. 12. 26. 22:30
반응형

vue-material: 알 수 없는 커스텀 컴포넌트 md-md-content

렌더링 시도 중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.discloss.main.discloss.

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)
})

이 코드는 vue-material 문서에서 거의 직접 복사하여 붙여넣은 코드임을 알 수 있습니다.이 때문에 나는 거의 이 문제가 이 문제라는 것을 확신한다.main.js하지만 난 볼 수 없어, 다른 누군가가 볼 수 있을지도 몰라.

또, 제가 잘못하고 있는 것, 또는 Vue에 관한 일반적인 것에 관한 추가의 포인트는, 환영입니다.

https://vuematerial.io의 정보가 github과 동기화되지 않았습니다.

1) node_modules/vue-material/components/에서 MdDDrawer 폴더가 있는지 확인합니다.

2) 파일이 github https://github.com/vuematerial/vue-material에 존재하는 것을 확인할 수 있습니다.

3) github npm install vue-material@modial --save에 기재된 바와 같이 설치해야 합니다.

실행하기 전에 npm uninstall vue-material을 실행하여 이전 vue-material을 삭제합니다.

언급URL : https://stackoverflow.com/questions/47544714/vue-material-unknown-custom-component-md-drawer-md-content

반응형