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

1. Vue 파일 만들기

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

// @HelloWorld.vue
<!-- 화면에 보여지는 메세지 출력을 data 함수를 통해서 구현한다. -->
<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<template>
  <h1>{{ message }}</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/HelloWorld.vue'

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

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

3. Vue 프로젝트 실행하기

npm run serve