vue.js에 새 구성 요소를 추가 하시겠습니까?

Question

구성 요소 파일에 구성 요소를 만든 다음 기본 응용 프로그램에 ng-include와 같이 포함 시키겠습니다.

내 App.vue은 다음과 같습니다

<template> 
    <div id="app"> 
    <div class="container-fluid"> 
     <div class="row> 
     <navigation></navigation> 
     </div> 
     <div class="row"> 
     <router-view></router-view> 
     </div> 
    </div> 
    </div> 
    </template> 

    <script> 
    export default { 
    name: 'app', 
    } 
    </script> 

    <style> 
    #app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
    } 
    </style> 

을 그리고 내 main.js 파일은 다음과 같다 :

import Vue from 'vue' 
    import App from './App' 
    import VueRouter from 'vue-router' 
    import homepage from './components/homepage' 
    import navigation from './components/navigation' 

    Vue.use(VueRouter) 

    const routes = [ 
    { path: '/', component: homepage} 
    ] 

    const router = new VueRouter({ 
    routes, 
    mode: 'history' 
    }) 

    new Vue({ 

    el: '#app', 
    template: '<App/>', 
    components: { 
    App, navigation 
    }, 
    router 
    }).$mount('#app') 

navigation.vue :

<template> 
    <div> 
     <p>test</p> 
    </div> 
    </template> 

    <script> 
    export default { 
     name: 'navigation' 
    } 
    </script> 

내가 실행 위의 내용은 다음과 같습니다.

[Vue 경고] : 알 수없는 맞춤 요소 : - 구성 요소를 올바르게 등록 했습니까? 재귀 구성 요소의 경우 "이름"옵션을 제공해야합니다.

는 SRC에

--->에서 발견 당겨/App.vue

나는 vue.component를 추가하는 방법을 알고,하지만 난 내가 원하는 것은 홈페이지와 같은 외부 구성 요소입니다, 구성 요소 폴더에서 가져 와서 기본 앱에 포함시킵니다.

Answer 1

새 Vue 인스턴스의 구성 요소를 사용하거나 VUE.component를 사용하거나 VUE.component를 사용하거나 구성 요소를 가져와 등록해야합니다. 이 https://vuejs.org/v2/guide/components.html#Local-Registration보고 당신이 App.VUE에 으로 시도 할 수 :

<template> 
    <div id="app"> 
    <div class="container-fluid"> 
     <div class="row> 
     <navigation></navigation> 
     </div> 
     <div class="row"> 
     <router-view></router-view> 
     </div> 
    </div> 
    </div> 
    </template> 

    <script> 
    import navigation from './components/navigation.vue' 

    export default { 
    name: 'app', 
    components:{ 
     navigation 
    } 
    } 
    </script> 

    <style> 
    #app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    margin-top: 60px; 
    } 
    </style> 

navigation.vue 구성 요소가 같은가 될 수 있습니다 :

<template src="template.html"></template> 
<script> 
    export default { 
    data(){ 
     return {} 
    } 

    } 
</script>