[Vue] 실행 흐름

1. 웹이 실행되면 public > index.html 파일 로드
   

2. main.js 로드

Vue.prototype.$axios = axios;
Vue.config.productionTip = false

new Vue({
  el : '#app', //  index.html의 id 값을 선택히여 Vue의 컴포넌트들을 마운팅
  router, 
  store,
  render: h => h(App)
}).$mount('#app')

3. App.vue

<template>
  <div id="app" :style="{height: wh + 'px'}"> // id 값 = app
  
    <template v-if="loginChk">
      <header>
        <main-header />
      </header>
    </template>
    
    // router > index.js 로 가면 마운트되는 내용 확인 가능
    <router-view :key="$route.fullPath"/
    
  </div>
</template>

4. router > index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../view/Login' // login 위한 import 설정

Vue.use(Router)

export default new Router({
  
    mode: 'history',
    routes : [
        {
           path : '/', // '/' 로 접근 할 경우 'Login.vue' 실행
           name : 'login',
           component : Login
        }
    ]
})

• path : 렌더링 되는 페이지
• component : 각각의 vue파일 이름 작성

5. Login.vue 실행