component

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

20.04.29 21:45 작성

293

강의랑 관련 없는 내용이지만 초급강좌에서는 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

javascript vuejs

답변 5

univue

질문자

2020. 04. 29. 21:48

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

univue

질문자

2020. 04. 29. 21:47

app.vue

univue

질문자

2020. 04. 29. 21:46

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

장기효(캡틴판교)

지식공유자

2020. 05. 06. 13:54

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

univue

질문자

2020. 04. 29. 21:46

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>

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

component