음악, 삶, 개발

Vue 프로젝트로 Hello World 출력하기 본문

개발 Web/Vue.js 공부방

Vue 프로젝트로 Hello World 출력하기

Lee_____ 2020. 11. 23. 05:19

Vue 프로젝트를 생성후, 기존 파일들을 지우고나면,

최종적으로 아래와 같은 구조가 된다.

 

my-vue-project 폴더속 파일들

Hello World 를 출력하기위해서는,

위에 보이는 3가지 파일에 코드를 작성해야한다.

아래와 같이 하도록 한다.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>

  <body>
    <div id="app"></div>
  </body>

</html>
<!-- App.vue -->

<template>
  Hello World!
</template>
/* main.js */

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app');

위와 같이 작성하였다면..

명령 프롬프트에 들어가 Vue 프로젝트 폴더로 이동후, npm run serve 를 실행한다.

그리고 위의 주소로 접속하면..

 

'개발 Web/Vue.js 공부방' Related Articles more