Vue.js 실습 part.2

저번 포스팅에서는 각 프론트엔드 프레임워크에 대한 설명과 vscode 설치까지 마칠수 있었다.

 

이번 포스팅에서는 이어서 설치를 해보도록 할것이다.

 

vscode에서 터미널을 열고 vue cli 를 설치해보도록 할것이다.

npm install -g @vue/cli

라고 npm global 설치를 한다.

그럼 아래 이미지와 같이 설치가 된다.

다음은 프로젝트를 생성할 디렉토리로 이동하여 프로젝트를 만들어본다.

프로젝트 생성은

vue create package명

으로 작성을 하고 나는 vue create test 라고 하였다.

 

그럼 옵션이 나온다. 

manually를 눌러보면 다른방식으로 생성도 되지만 이번엔 default로 해서 기본 설치를 해볼것이다.

메뉴얼을 눌러보고 뭐가 있는지 확인도 한번 해보면 나중에 도움은 될듯하다.

 

그러고 나서 선택을 하면 설치가 진행이 된다.

 

그리고 설치가 되고 나면 왼쪽에 파일트리를 새로고침하면 사진과 같이 vue 프로젝트 or App이 생성이 된다.

그리고 설치를 한후에 터미널 창에 보면 

cd test
npm run serve

를 하라는 명령어가 나오는데 그대로 터미널에서 실행을 해보면

test폴더로 이동후에 serve를 실행하게 된다.

 

그러고 나면 터미널에서 다음과 같이 나온다.

저 url 사이트를 들어가게 되면 아래까지 보이게 되면 프로젝트 생성은 성공적이다.

 

이어서 vue router 까지만 설치를 해볼것이다.

router / routing 이란 웹 페이지 상에서 이동하는 방법을 말하는 것으로

페이지를 누르면 서버에 요청을 하고 페이지를 받아오게 되지만 spa같은 경우은 미리 다 서버에서 받아와서 라우팅을 통해서 화면만 전환을 하게 되는 방식이다.

 

설치는 

npm install vue-router --save

를 사용한다.

 

다음 포스팅에서는 화면을 구성하거나 프로젝트 안에서 폴더와 파일을 생성하면서 진행을 해볼 예정이다.