Vue.js로 앱을 제작하기 위해서는 인스턴스를 가장 먼저 생성해주어야합니다.
Vue cli를 사용하는 경우 기본적으로
main.js파일 내에 이 과정이 수행되어 있는 채로 프로젝트가 생성되어있습니다.
앱 인스턴스 생성하기
앱 인스턴스는 다음과 같이 생성합니다.
import { createApp } from 'vue'
createApp({
//최상위 컴포넌트 옵션
});이때 싱글 파일 컴포넌트(SFC)를 사용할 때는 만들어 둔 SFC에서 다른 root 컴포넌트를 가져와서 사용하게 됩니다.
싱글 파일 컴포넌트 SFC
싱글 파일 컴포넌트는 컴포넌트의 템플릿, 로직(script), 스타일를 하나의 파일로 만들어낸 파일입니다. 지금까지 소개했던 .vue 파일 형식이 바로 싱글 파일 컴포넌트를 제작한 것이었죠.
싱글 파일 컴포넌트 방식은 여러 이점들 때문에 Vue 개발에 있어서 강력하게 권장되고 있는 방식입니다.
- HTML, CSS, JS 문법을 그대로 사용하여 모듈화된 컴포넌트 작성가능
- 사용 목적에 따라 구성
- 런타임 컴파일 비용이 없는 사전 컴파일된 템플릿
- 컴포넌트 스코프를 갖는 CSS
- 컴포지션 API로 작업할 때 더욱 인체공학적인 문법
- 템플릿과 스크립트를 교차 분석하여 컴파일 시간을 최적화
- 템플릿 표현식을 지원하는 IDE의 자동 완성과 유형 검사
- 즉시 사용 가능한 핫 모듈 교체 지원
현재 우리는 SFC 방식을 따르기 때문에 인스턴스를 생성할 때 root 컴포넌트를 넣어주게 됩니다. Vue cli를 사용했으면 App.vue가 그것이고, 없으면 root를 하나 만들어주세요. 여기서는 App.vue를 사용하겠습니다.
import { createApp } from 'vue';
import App from './App.vue';
createApp(App);앱 마운트
생성한 앱 인스턴스는 mount()메소드가 호출되어 마운트할 때 까지 렌더링을 수행하지 않습니다. 이때 mount() 메소드는 컨테이너가 될 DOM 요소나 셀렉터를 필요로 합니다.
<div id="app"></div>import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');Vue cli로 생성된 프로젝트에서는 public/index.html에 app을 정의한 div가 존재합니다.
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
앱 인스턴스는 여러개를 정의할 수도 있습니다. 따라서 특정 부분만을 제어하고 싶은 경우에 전체 단일이 아닌 여러 컨테이너를 통해 앱 인스턴스를 생성할 수 있습니다.
const app1 = createApp({ /* ... */ }) app1.mount('#container-1') const app2 = createApp({ /* ... */ }) app2.mount('#container-2')
