인프런 커뮤니티 질문&답변

univue님의 프로필 이미지
univue

작성한 질문수

Vue.js 시작하기 - Age of Vue.js

component

작성

·

296

0

강의랑 관련 없는 내용이지만 초급강좌에서는 html 에서 만드시는데 중급 강좌에서는 app.vue로 만드시잖아요.

상품 관련 컴포넌트를 만들려고 vue에다가 전역 컴포넌트를 만들고 라우터.js 에 눌르면 가게 해놨는데 컴포넌트 등록한게 맞냐고 자꾸 에러가 뜨는데 왜 그런건지 모르겠어요ㅠ

<template>
<div id="app">
<ka-nav></ka-nav>
</div>
</template>


<script>

Vue.component('ka-nav', {
template: '<h1>k</h1>'
});

new Vue({
el: '#app'
});


export default {

}
</script>


<style>

</style>import VueRouter from 'vue-router'
import FRAGANCE from './components/ka-nav-fra.vue'
import NEWARRIVALS from './components/ka-nav-f.vue'


Vue.config.productionTip = false

Vue.use(VueRouter)


const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/FRAGANCE',
component: FRAGANCE
},
{
path: '/NEWARRIVALS',
component: NEWARRIVALS
}
]
});

export default router

답변 5

1

univue님의 프로필 이미지
univue
질문자

컴포넌트 등록 구글링 해보면 html 예제가 많이 나와있어서 vue 에다가 해도 되는건지도 모르겠어여ㅠ

1

univue님의 프로필 이미지
univue
질문자

app.vue

1

univue님의 프로필 이미지
univue
질문자

<template>
<div id="app">
<img src="./assets/images/logo.jpg">
<img src="./assets/images/lili.jpg">
<KaHeader></KaHeader>
<KaInput></KaInput>
<KaList></KaList>
<KaFooter></KaFooter>

<router-link to="/FRAGANCE">FRAGANCE</router-link>
<router-view></router-view>
<div id="nav-f">
<router-link to="/NEWARRIVALS">NEW ARRIVALS</router-link>

</div>

</div>

</template>



<script>


import KaHeader from './components/KaHeader.vue'
import KaInput from './components/KaInput.vue'
import KaList from './components/KaList.vue'
import KaFooter from './components/KaFooter.vue'




export default {
components: {
'KaHeader': KaHeader,
'KaInput': KaInput,
'KaList': KaList,
'KaFooter': KaFooter
}
}


</script>

<style>

</style>

0

안녕하세요 윤희님~ 제가 답변이 좀 늦었네요..! 그 위에 첨부해주신 코드를 보면 싱글 파일 컴포넌트의 구조를 정확하게 이해하시지 못한 것 같아요. 싱글 파일 컴포넌트(.vue 파일)에는 script에 export default {} 구문이 들어가야 합니다. 그리고 그 안에 components 속성을 이용해서 컴포넌트를 등록하셔야 해요. 강의를 한번 초급과 중급 쭈욱 들어보시고 다시 한번 구현해나가보시면 좋을 것 같습니다 :)

0

univue님의 프로필 이미지
univue
질문자

vue.esm.js?efeb:628 [Vue warn]: Unknown custom element: <ka-nav> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <KaNavF> at src/components/ka-nav-f.vue

       <App> at src/App.vue

         <Root>

univue님의 프로필 이미지
univue

작성한 질문수

질문하기