3. Vue.js 작동 순서

 

---

Vue.js 작동 순서

---

 

 

 

 

1. package.json

 

 

 

설정들이 들어가져있다.

vue의 버전 같은데 전부 기입되어져있다.

eslintConfig 등도 포함되어져있다. 

Spring 의 pom.xml 같은 역할을 한다고 보면 될거같다.

 

 

 

2. index.html

 

 

기본적인 html 파일이다.

App.vue가 들어갈 장소를 명시해놓는 뼈대 역할을 한다.

왠만해서는 이 파일을 수정하지 않는다.

 

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

 

바로 이 부분이 App.vue 가 들어갈 장소이다. 

 

 

 

 

 

3. main.js

전역으로 파일을 연결시키려면 main에서 처리하면 된다.

이 파일에서 import한 파일들은 나머지 뷰에서 잘 동작한다.

main.js 부터 작동되므로 가장 먼저 마운트 되는 뷰는 

 

new Vue({

  router,

  store,

  render: (h) => h(App),

}).$mount('#app');

 

에 적힌 #app, 즉 App.vue의 템블릿 내의 <div id="app"> 이다.

 

 

- Vue.use( '해당 플러그인' ) 으로 플러그인 ( plugin ) 을 전역으로 넣어

   this로 접근하게 할수 있다.

*플러그인은 자주쓰는 함수나 명령어들을 모아놓은 js 같은걸 뜻한다.

 

- Vue.component 

 컴포넌트들이 들어가있다.

 

 

 

 

 

 

4. App.vue

 

 

가장 먼저 마운팅되는 vue 파일이다.

router-link 로 화면을 전부 매핑시켜줄수 있다.

<router-view/> 이 태그에서 link로 된 페이지가 펼쳐진다.

 

즉 위 App.vue 가 출력되면

<a >태그처럼 누르면 화면이 바뀐다고 보면 된다.

 

 

즉 router-view 태그에서 router index에 정의된 화면들이 전부 출력이 된다.

 

 

 

 

 

5. router / index.js

 

 

 

 

Server 나 Controller같이 주소를 할당해주는 부분이다.

 

 () => import(/* webpackChunkName: "about" */ '../views/About.vue')

 

윗줄의 의미는 

 

import Home from '../views/Home.vue';

component: Home

 

과 같다. 

 

 

 

6. Component/ About.vue, Home.vue

 

 

하위 컴포넌트를 가지고있는 Home.vue 는

script 태그 안에서

추가된 컴포넌트 HelloWorld 를 명시해준다.

 

그러나 About.vue는 그런거 없다.