홈페이지 유튜브

App.vue

App.vue

이 문서에서는 Vue application에서 메인 페이지를 담당하는 App.vue 파일에 대해서 살펴본다.

App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vue 파일의 구조

.vue 확장자를 가지는 파일들은 다음 구조를 가진다.

  • template : 구현될 화면의 HTML

  • script : 구현될 화면에서 사용할 Vue component instance

  • style : 구현될 화면에서 사용할 style

template 생성 시 주의사항

template을 생성할 때에는 template 안에 반드시 한 개 이상의 태그가 존재해야 한다. 즉, template 영역은 비어있으면 오류로 감지된다.

script 생성 시 주의사항

script를 생성할 때에는 반드시 export default 항목을 정의해야 한다. 또한 eslint에서 사용하지 않는 변수의 선언 등을 오류로 간주하므로 이것이 싫다면 eslint 설정을 변경해야 한다. 해당 파일에서만 사용할 요소가 있다면 import 또는 require를 이용하여 불러올 수 있다.

style 생성 시 주의사항

style 생성 시 scoped를 추가하면 자동으로 고유번호가 data로 부여되어 현재 템플릿에만 적용되는 스타일이 생성된다. 하지만 scoped를 추가하지 않으면 전체에 영향을 미치는 스타일이 생성되므로 이용에 주의해야 한다.

기본 템플릿은 다음과 같다.

<template>
    <!-- 구현 화면의 HTML -->
</template>
<script>
    //template에 연동할 Vue component instance
</script>
<style scoped>
    /*이 파일에서만 사용할 스타일*/
</style>

template

App.vue 파일의 템플릿 영역은 다음과 같이 작성되어 있다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

image

img 태그를 통해 /src/assets/ 안에 있는 logo.png를 불러와서 출력하는 코드이다.

<img alt="Vue logo" src="./assets/logo.png">

jsconfig.json 파일에서 src에 대한 경로를 지정했기 때문에 다음과 같이 작성할 수 있다.

<img alt="Vue logo" src="@/assets/logo.png">

component

HelloWorld라는 Component를 사용하여 화면을 정의하고 있다.

<HelloWorld msg="Welcome to Your Vue.js App"/>

이 태그는 HTML 표준 태그가 아니며, 내부에 정의된 Component이므로 script 영역에서 불러와서 사용하도록 설정이 되어 있어야 한다. script 영역 설명에서 다룬다.

script

App.vue의 스크립트 영역은 다음과 같이 작성되어 있다.

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

import

이 문서에서 사용할 도구들을 불러온다. 현재 파일에서는 HelloWorld.vue를 컴포넌트로 사용하기 위해 불러오도록 코드가 작성되어 있다.

import HelloWorld from './components/HelloWorld.vue'

HelloWorld.vue에 작성된 export default 항목을 불러와 HelloWorld 이름으로 사용한다. 이후 생성될 Vue 컴포넌트 모듈에서 하위 컴포넌트로 등록한다.

instance

Vue component는 export를 통해 instance를 반환하도록 설정해야 한다.

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

코드에서 사용된 속성들은 다음과 같다.

  • name - Vue에 등록될 컴포넌트의 이름. Vue Devtools 등에서 확인할 수 있다.

  • components - 현재 컴포넌트에서 사용할 하위 컴포넌트를 등록하기 위한 공간

name 설정 시 주의사항

name을 직접 설정할 경우 두 개 이상의 단어(Multi-word)를 합성하여 사용해야 한다.

components 설정 시 주의사항

components를 등록할 경우 이름을 별도로 설정할 수 있으며, 설정하지 않으면 등록한 컴포넌트의 name이 적용된다. 만약 이름을 설정하고 싶다면 다음과 같이 components 설정을 변경할 수 있다.

export default {
  name: 'App',
  components: {
    'hello-world' : HelloWorld
  }
}

위와 같이 설정할 경우 <HelloWorld> 대신 <hello-world> 형태로 사용할 수 있다.

style

App.vue에는 scoped 스타일이 정의되어 있지 않고 전역 스타일로 #app 영역에 대한 스타일만 정의되어 있다. 따라서 모든 애플리케이션 화면에서 적용된다.

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

실행 후 개발자 도구를 확인해보면 전역 스타일로 설정된 것을 확인할 수 있다.

만약 style에 scoped 키워드를 추가하여 구현한다면 data-v 접두사가 현재 컴포넌트의 화면과 스타일에 추가되어 다른 컴포넌트 화면과 구분된다.

Previousmain.jsNextHelloWorld.vue

Last updated