component

Question

강의랑 관련 없는 내용이지만 초급강좌에서는 html 에서 만드시는데 중급 강좌에서는 app.vue로 만드시잖아요. 상품 관련 컴포넌트를 만들려고 vue에다가 전역 컴포넌트를 만들고 라우터.js 에 눌르면 가게 해놨는데 컴포넌트 등록한게 맞냐고 자꾸 에러가 뜨는데 왜 그런건지 모르겠어요ㅠ 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

univue · Answer

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

univue · Answer

app.vue

univue · Answer

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

캡틴판교 · Answer

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

univue · Answer

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