Vue/Basic
기본 라이프 싸이클
by BAYABA
2021. 9. 18.
- 개인 공부 목적으로 작성한 글입니다.
- 아래 출처를 참고하여 작성하였습니다.
Intro
- Vue가 실행되고 우리가 화면을 보는데까지 관여하는 컴포넌트들에 대해 알아보겠습니다.
- index.html
- main.js
- App.vue
1. index.html
- 실제 화면을 그리는 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.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>
2. main.js
- Vue 프로젝트를 실행하면 가장 먼저 실행됩니다.
- 가장 먼저 실행되는 자바스크립트 파일로써, Vue 인스턴스를 생성하는 역할을 담당합니다.
- 결국은 index.html을 통해 우리가 만든 뷰 컴포넌트들이 사용자들에게 제공이 됩니다.
- 실제 index.html 내 div id="app" 이 부분으로 우리가 개발한 뷰 컴포넌트들이 실행이 됩니다.
- mount('app')에서 'app'이 index,html의 div id 이름을 의미합니다.
- "App을 가지고 와서 div id="app"인 곳에 mount(load) 시켜라."라는 뜻입니다.
- 실제 index.html에 그리는 화면은 App.vue에서 제어합니다.
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
3. App.vue
- 최상위(Root) 컴포넌트
- App.vue 안으로 우리가 개발한 컴포넌트들이 들어갑니다. (라우팅 처리 등)
- 기본적으로 아래와 같은 구조로 작성하게 됩니다.
<template>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
출처
- Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
