> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/src/main.js.md).
# main.js
## main.js
Vue application의 중심이 되는 파일이다. public 폴더에 위치하는 index.html에 있는 id가 app인 영역을 제어하도록 Vue instance를 생성하는 코드가 작성되어 있다.
main.js
```javascript
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
제어 대상인 index.html은 다음과 같다.
index.html
```html
demo
```
index.html 파일 중에서 다음 영역을 제어한다.
```markup
```
`import` 키워드를 통해 대상 외부 요소에서 `export`된 내용을 불러올 수 있다.
### vue 모듈 불러오기
Vue application을 생성하기 위해 필요한 함수인 createApp 함수를 vue 의존성에서 불러오기 위한 코드이다.
```javascript
import {createApp} from 'vue'
```
import 뒤에 `{ }`를 사용하는 경우는 내보낸 요소들 중에서 원하는 항목을 선택적으로 불러오기 위해 사용한다.
### App.vue 불러오기
실제 처리를 수행할 `App.vue` 파일을 불러와서 application에 등록한다.
```javascript
import App from './App.vue'
createApp(App).mount('#app')
```
import 뒤에 `{ }`를 사용하지 않으면 `default`로 `export`된 항목을 불러온다.
`App.vue` 파일을 열어서 export default 부분이 있는지 찾아보면 다음과 같이 존재하는 것을 확인할 수 있다.
{% code title="App.vue" %}
```javascript
...
export default {
name: 'App',
components: {
HelloWorld
}
}
...
```
{% endcode %}
그 외에도 전체 애플리케이션에 영향을 미쳐야 하는 도구들이 있다면 `main.js` 파일에서 사용 설정할 수 있다.
### 예시 : Bootstrap 추가
#### npm
```shell
npm install bootstrap
```
#### main.js
```javascript
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
createApp(...).mount("...");
```
bootstrap의 경우 별도로 Vue에 등록할 내용은 없으므로 import만 하면 배포 시 link와 script가 자동 생성된다.
