이 글은 Vue 2에서 컴포넌트를 이용하여 간단한 웹페이지를 만드는 방법에 대해 설명한다.

1. Vue 파일 만들기

• 프로젝트폴더> src> components> FirstComponent.vue 파일을 생성한다.

// @FirstComponent.vue
<template>
  <h1>First Component!</h1>
</template>

2. App.vue 파일 내용 수정하기

• 프로젝트폴더> src> App.vue 파일 내용을 수정한다.

// @App.vue
<template>
  <div id="app">
     <SampleApp></SampleApp>
  </div>
</template>

<script>
<!-- App.vue의 컴포넌트 위치를 지정하는 부분만 수정한다. -->
import SampleApp from './components/FirstComponent.vue'

export default {
  name: 'App',
  components: {
    SampleApp 
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #09045f;
  margin-top: 60px;
}
</style>

3. Vue 프로젝트 실행하기

npm run serve