[Vue] 3. Vue파일 Component로 넣기

1. src폴더 밑에 있는 components폴더에 component로 넣을 vue 파일 생성

   

2. component_test.vue파일 작성

    <template>
      <div>
        component_test
      </div>
    </template>
   
    <script>
    export default {
      name: 'test'
    }
    </script>

3. component를 넣고 싶은 vue파일에 가서 script와 template을 수정해준다.

    <template>
      <div>
          Hello World!!
          <test/>
      </div>
    </template>
   
    <script>
    import test from '@/components/component_test'
    export default {
      name: 'MainPage',
      components: {
        test
      }
    }
    </script>

   • script에 component로 넣고자 하는 vue파일을 import한다. 이때 경로에 들어가는 @는 src폴더를 말한다.
   • componets에 import한 component를 넣어준 후 그 component를 template에서 태그처럼 사용한다.

4. 서버 가동(http://localhost:8080/)