[Vue.js 시작하기] - Vue.js 설치

Vue.js 공식 페이지에 다양한 설치 방법이 나와있지만

나는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 CLI를 사용하여 설치할 것이다.

 

다른 설치 방법에 대해 참고할 사람은 아래의 페이지를 참고하면 될것같다.

kr.vuejs.org/v2/guide/installation.html

설치방법 — Vue.js

 

CLI 이용하여 프로젝트 만들기

vue init webpack project

 

다음과 같은 명령어를 사용하면 Vue 프로젝트가 생성되게 된다.

 

이때, npm start 또는 npm run build 명령어를 사용한 이후, https://localhost:8080에 접속한다면

Vue 애플리케이션 실행화면을 볼 수 있다.

 

Vue 디렉토리 설명

• build : webpack 빌드 관련 설정이 있는 디렉토리
• config : 프로젝트에서 사용되는 설정이 있는 디렉토리
  • dev.env.js : npm start 시 적용
  • prod.env.js : npm run build로 배포때 적용
• node_moduls : npm으로 설치되는 라이브러리들이 있는 디렉토리
• src
  • assets : 이미지, 폰트 등의 파일들이 있는 디렉토리
  • components : Vue 컴포넌트들이 있는 디렉토리
  • router : vue-router 설정을 하는 디렉토리(이후에 추가 설명)
  • App.vue : 가장 최상위 컴포넌트, 가장 먼저 마운팅.
  • main.js : Vue 인스턴스를 생성
• index.html : 뼈대가 되는 html 파일

index.html

<div id="app"></div>에서 화면이 렌더링이 된다.

이는 main.js에서 알 수 있다.

 

main.js

모든 Vue 애플리케이션은 Vue 함수로 Vue 인스턴스를 만드는 것부터 시작하기에 앱의 시작점이라고 할 수 있다. 

 

인스턴스를 쉽게 레고에 비유한다면 레고를 조립하기 위한 조립판이라고 할 수 있다.

인스턴스 생성시에 options 객체를 전달해야하는데 이때 옵션들을 살펴보겠다.

 

• e1: "#app"  : 이전의 index.html 에서 id가 app인 html 태그에 마운팅되어 화면에 렌더링.
• router : vue-router (라우팅 기능을 구현할 수 있도록 하는 공식 라이브러리) 사용
• components: {App} : App 컴포넌트를 사용
• template: '<App/>' : 마운팅될 컴포넌트는 <App/> 다.

 

App.vue

결론적으로 vue 인스턴스 옵션에 정의된 바로는,

index.html <div id="app"></div> 에 App.vue의 <div id="app"></div> 가 마운팅 된다.

App.vue에서 <router-view /> 는 페이지 표시 태그로서 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 역할을 한다.

이는 router/index.js에 명시되어 있다.

router/index.js

 

라우팅은 주어진 데이터를 최적화 된 형태로 주고받을 수 있는 경로를 선택하는 것으로

서버에 요청하여 새로 갱신하는 것이 아니라 SPA(Single Page Application)가 가능해진다.

/로 접근한다면 HellowWorld 컴포넌트가 마운팅된다는 것을 알 수 있다.