[Vue CLI] 화면에 Hello Vue 출력하기

2024.05.24 - [분류 전체보기] - Vue.js 개발 환경 설정 (vs code)

Vue.js 개발 환경 설정 (vs code)

 

이전에 생성한 프로젝트에서 화면에 Hello Vue를 출력해보자.

 

현재 화면은 App.vue를 통해 출력되고 있다. App.vue에서 HelloWorld.vue를 가져와 아래와 같은 화면이 보인다.

 

App.vue를 다음과 같이 수정한다.

<template>

  <div id="app">

    <h1>Hello Vue</h1>

  </div>

</template>

<script>

export default {

  name: 'App'

}

</script>

<style>

#app {

  color: blue;

}

</style>

저장하면 아래와 같이 글자가 출력된다.

728x90

 

HelloWorld.vue를 다음과 같이 수정하고 App.vue에 연결한다.

<template>

  <div id="helloWorld">

    <h1>Hello Vue</h1>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld'

}

</script>

<style>

#helloWorld {

  color: red;

}

</style>

<template>

  <div id="app">

    <h1>Hello Vue</h1>

  </div>

  <div>

    <HelloWorld />

  </div>

</template>

<script>

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

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>