[TIL] main.js 역할 및 세팅

어플리케이션의 실행 시, 진입점인 main.js파일은 크게 3가지 역할을 수행한다.

1. vue 인스턴스 생성(초기화)

// main.js

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)

• createApp 함수를 통해 생성된 인스턴스는 어플리케이션이 실행될 때마다 앱을 초기화한다.
• createApp에 전달하는 App 객체는 (가상돔의) 루트 컴포넌트로써 최상위 컴포넌트이자 다른 하위 컴포넌트들을 포함하고 있다.

2. 실제 돔을 부착하고 있는 인스턴스의 렌더링

// index.html

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

// main.js

app.mount('#app') // id가 "app" 인 엘리먼트에 해당 인스턴스를 마운트
// <div id="app">

• 실제 돔 엘리먼트는 app인스턴스와 달리 index.html 에 명시되어 있고, 유일한 식별자로 설정한 “app” 을 mount함수의 인자로 전달하여 index.html 파일과 연결해준다.
• mount()함수가 호출되자마자 어플리케이션 인스턴스가 렌더링 되고, 이때 루트 컴포넌트인 App의 내용이 엘리먼트 안에서 렌더되어 화면에 나타난다.
• 위치에 main.js의 app ⇒ const app = createApp(App) 인스턴스가 위치하게 된다.
• 중요한 것은, mount()함수는 모든 엡 설정과 등록이 끝난 후에 호출되어야 한다는 점이다.

3. 전역 컴포넌트 설정 및 라이브러리, 플러그인 등록과 같은 환경설정

3-1) 전역 컴포넌트 등록

• app.component(’사용할 컴포넌트 이름’, 실제 컴포넌트 이름) 명시한 뒤 .vue페이지에서 컴포넌트로 사용할 수 있다.

예시>

// main.js

import { Form } from 'vee-validate'
app.component('VeeForm', Form) 

//login,vue
<VeeForm @submit="login">
<input type="text" name="id" v-model="state.id" />
<input type="number" name="age" v-model="state.age"/>
</VeeForm>

3-2) 플러그인 전역 설정

• app.use(플러그인명) 명시한 뒤, “this” 혹은 “$” 지시어로 접근할 수 있다.

예시>

//main.js
app.use(router)


//login.vue

<template>
<button @click="$router.push({name : 'ListPage'})"/>
</template>