인프런 커뮤니티 질문&답변
작성한 질문수
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
1
1
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
질문자
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>