Component 로 만들어 사용하기

화면을 크게

1. Header 부분

2. Content 부분

3. Footer 부분

으로 나눠, 각 영역을 Component 로 만들어 조립하는 예제.

 

전체를 수용하는 App.vue 파일이 있고,

그안에 각 Component 를 끼어 넣는 구조임.

 

1. 프로젝트 생성

vue create vue-component

 

2. 실행

npm run serve

 

3. 실제 소스

3.1 App.vue

----------------------------------------------------------------------------------------------------------------

<template>

  <MallHeader/>

  <MallContent/>

  <MallFooter/>

</template>

<script>

import MallHeader from "./components/MallHeader.vue";

import MallContent from "./components/MallContent.vue";

import MallFooter from "./components/MallFooter.vue";

export default {

  name: 'App',

  components: {

    MallHeader,

    MallContent,

    MallFooter

  }

}

</script>

<style>

</style>

----------------------------------------------------------------------------------------------------------------

3.2 MallHeader.vue

----------------------------------------------------------------------------------------------------------------

<template>

  <h1>vue 쇼핑몰에 오신것을 환영합니다.</h1>

  <hr/>

</template>

<script>

export default {

}

</script>

<style>

</style>

---------------------------------------------------------------------------------------------------------------

 

3.3 MallContent.vue

----------------------------------------------------------------------------------------------------------------

<template>

<ur>

  <li>아이폰</li>

  <li>갤럭시</li>

  <li>아이패드</li>

</ur>

</template>

<script>

export default {

}

</script>

<style>

</style>

----------------------------------------------------------------------------------------------------------------

 

3.4 MallFooter.vue

----------------------------------------------------------------------------------------------------------------

<template>

  <br/>

  <h3>Copyright 2022 by goldercrab</h3>

</template>

<script>

export default {

}

</script>

<style>

</style>

 

----------------------------------------------------------------------------------------------------------------