main.js

Vue application의 중심이 되는 파일이다. public 폴더에 위치하는 index.html에 있는 id가 app인 영역을 제어하도록 Vue instance를 생성하는 코드가 작성되어 있다.

main.js

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

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

제어 대상인 index.html은 다음과 같다.

index.html

<!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">
    <link rel="icon" href="/favicon.ico">
    <title>demo</title>
    <script defer="defer" src="/js/chunk-vendors.68b8cc10.js"></script>
    <script defer="defer" src="/js/app.7c122322.js"></script>
    <link href="/css/app.2cf79ad6.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
</body>

</html>

index.html 파일 중에서 다음 영역을 제어한다.

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

import 키워드를 통해 대상 외부 요소에서 export된 내용을 불러올 수 있다.

vue 모듈 불러오기

Vue application을 생성하기 위해 필요한 함수인 createApp 함수를 vue 의존성에서 불러오기 위한 코드이다.

import {createApp} from 'vue'

import 뒤에 { }를 사용하는 경우는 내보낸 요소들 중에서 원하는 항목을 선택적으로 불러오기 위해 사용한다.

App.vue 불러오기

실제 처리를 수행할 App.vue 파일을 불러와서 application에 등록한다.

import App from './App.vue'
createApp(App).mount('#app')

import 뒤에 { }를 사용하지 않으면 default로 export된 항목을 불러온다.

App.vue 파일을 열어서 export default 부분이 있는지 찾아보면 다음과 같이 존재하는 것을 확인할 수 있다.

App.vue

...
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
...

그 외에도 전체 애플리케이션에 영향을 미쳐야 하는 도구들이 있다면 main.js 파일에서 사용 설정할 수 있다.

예시 : Bootstrap 추가

npm

npm install bootstrap

main.js

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

createApp(...).mount("...");

bootstrap의 경우 별도로 Vue에 등록할 내용은 없으므로 import만 하면 배포 시 link와 script가 자동 생성된다.

Previoussrc NextApp.vue

Last updated 2 years ago