[Vue] [Vue3] Vue 앱 만들기

앱 인스턴스 

• 모든 Vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작합니다.

최상위 컴포넌트

• 싱글 파일 컴포넌트를 사용하는 경우 일반적으로 다른 파일에서 루트 컴포넌트를 가져옵니다.

앱 마운트 하기

• 앱 인스턴스는 .mount() 메서드가 호출될떄까지 아무 것도 렌더링하지 않습니다.
  컨테이너가 될 실제 Dom 엘리먼트 또는 셀렉트 문자열을 인자로 필요합니다.
• .mount() 메서드는 반드시 앱의 환경설정 및 에셋이 모두 등록 완료된 후에 호출되어야 합니다.

 

DOM 내부의 최상의 컴포넌트 템플릿

• 빌드 과정 없이 Vue를 사용할 때, 마운트 컨테이너 내부에 직접 최상위 컴포넌트의 템플릿을 작성할 수 있습니다.

 

앱 환경설정

• 앱 인스턴스는 몇 가지 앱 레벨의 옵션을 구성할 수 있는 .config 객체를 노출합니다.
  다음 예는 모든 자식 컴포넌트에서 에러를 캡처하는 앱 레벨의 에러 핸들러를 정의합니다.
  
•  

• app.config.errorHandler = (err) => {   /* 에러 처리 */ }

• 앱 인스턴스는 앱 범위의 에셋을 등록하기 위한 몇 가지 방법도 제공합니다. (다음은 컴포넌트 등록의 예시)이렇게 하면 TodoDeleteButton을 앱 어디에서나 사용할 수 있습니다.

• app.component('TodoDeleteButton', TodoDeleteButton)

 

멀티 앱 인스턴스

• 앱 인스턴스는 동일한 페이지 내 하나로 제한되지 않습니다. createApp API를 사용하면 여러 Vue 앱이 동일한 페이지에 공존할 수 있으며, 각각은 구성 및 전역 자산에 대한 고유한 범위를 갖습니다.

• const app1 = createApp({   /* ... */ }) app1.mount('#container-1')   const app2 = createApp({   /* ... */ }) app2.mount('#container-2')