Vue 어플리케이션 구성요소

instance

• 모든 Vue 어플리케이션은 createApp 함수를 사용해서 intance를 만드는 것부터 시작이다.

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

root component

• instance를 생성하기 위해 사용하는 createApp 함수에는 실제 컴포넌트를 넘겨야하고 모든 어플리케이션은 자식으로 다른 컴포넌트를 가질 수 있는 "root component"가 존재해야 한다!
• 아래처럼 root component로 사용할 컴포넌트를 임포트해서 createApp 함수에 넣어주면 된다!

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

const app = createApp(App)

mounting

• createApp 함수를 이용해 instance를 생성하기만 하고 .mount()함수를 이용해서 mounting을 하지 않으면 화면에 아무것도 보이지 않을 것이다. 
• react처럼 빈 껍데기 index.html 파일에서 id가 app인 div 태그를 마운팅해서 화면을 그려나갈 수 있다.

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

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

• 아래와 같은 실제 html에 App 컴포넌트로 인스턴스를 생성하고 id가 app인 태그에 컴포넌트를 마운팅해서 화면을 그려나간다!

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

실제 예시 보기

 

• Vue-CLI를 통해 프로젝트를 하나 세팅하고 src 폴더 아래에 있는 main.js 파일을 열어보면 아래와 같이 구성되어있다!

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

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