실행순서

webpack 에서 제일 중요한 두가지가 entry point라는 진입점과 컴파일된 결과물을 저장하는 output 이라고 하였다. 기본적인 entry point는 src/app.js인데 vue에서는 src/main.js가 entry point이다.

이 main.js 화일을 살펴보면 App이라는 루트 컴포넌트를 index.html의 app이라는 DOM으로 렌더링을 하고 있다는 것을 알 수 있다.

앞에서 페이지 방식에서도 Vue Instance와 2-3 가지 컴포넌트를 만들었으므로 앞에서 페이지 방식으로 만든 shop 페이지를 shop이라는 메뉴 페이지를 만들고 마이그레이션을 하도록 하겠다.

메뉴 추가

home 과 About 두개의 메뉴가 존재하는데, 여기에 shop 이라는 메뉴를 추가해보겠다. 먼저 view 폴더에 Shop.vue 를 추가한다.

router.js에 라우팅 패스를 추가한다.

루트 컴포넌트인 App.vue에 메뉴 링크를 추가한다.

이제 화면에 shop 링크가 보일것이고 클릭하면 /shop 유알엘로 이동하고 화면에 Shop이라는 글자가 보일것이다.

리팩토링

Introduction에서 작성한 Vue Instance 를 Shop.vue로 이동한다. css는 하단에 scope를 제거하고 입력한다. template에 product라는 컴포넌트는 아직 인식이 안될것이다.

앞에서는 product를 Vue.copmonent(‘id’, {}) 로
글로벌로 등록하였다. 여기서는 local로 등록한다. components에 있는 부분처럼 components에 Product.vue 를 등록하다.

마찬가지로 product-review 컴포넌트도 local로 등록한다.