[Vue] Vue-CLI로 프로젝트 생성하기

* Vue-CLI란? Vue-Command Line Interface의 약자로 터미널 창에 명령어를 입력해 작업을 수행하게 해주는 도구.


다음과 같은 순서에 따라 Vue 프로젝트를 생성합니다.

• node.js 설치
• vue-workspace 생성
• vue-cli 설치
• vue 프로젝트 생성
• axios & vue-router 설치
  
  
  

1. node.js 설치

https://nodejs.org/ko/

Node.js

node.js 홈페이지에서 12.13.1 LTS 버전(2019.11.24 기준)을 다운로드하고 설치합니다.
최신 버전보다는 안정적이고 신뢰도가 높은 버전으로 다운 받습니다.

 

 

2. vue-workspace 생성

이클립스의 workspace처럼 vue 프로젝트들을 모아 둘 디렉터리를 생성합니다.
이 디렉터리에서 vue-cli를 사용할 수 있도록 vue-cli를 설치하고, vue 프로젝트들을 생성할 예정입니다.
경로는 본인이 원하는 곳이면 어디든 OK!
저는 기존에 workspace들을 관리하고 있던 디렉터리가 있어서, 그곳에 vue-workspce를 생성했습니다.

 

3. vue-cli 설치

터미널에서 /vue-workspace로 이동 후, 다음 명령어를 입력합니다.
npm install -g @vue/cli
어느 정도 시간이 흐른 뒤에 다음 화면과 같이 설치가 완료된 것을 확인할 수 있습니다.

 

4. vue 프로젝트 생성

앞에서 설치한 vue-cli를 이용해 vue 프로젝트를 생성합니다.
vue create project_name
위 명령어로 간단하게 프로젝트 생성이 가능합니다. project_name에는 본인이 원하는 프로젝트명을 입력하면 됩니다.
명령어를 입력하면 다음과 같은 터미널 창이 바뀌게 됩니다.

 

default(bable, eslint) 상태 그대로 엔터를 눌러 프로젝트 생성을 시작합니다.
프로젝트 생성이 완료되면 다음과 같은 화면이 보입니다.

빨간 줄로 가려진 부분에는 본인이 설정한 프로젝트 이름이 보입니다.

 

4. axios & vue-router 설치

• axios란? vue에서 ajax 요청을 할 수 있도록 돕는 라이브러리.
  • ajax는 서버에서 받은 데이터를 화면에 표시할 때, 화면 전체를 갱신(동기)하는 것이 아니라 갱신이 필요한 일부분만 갱신(비동기)하게 해주는 자바스크립트 기법
• vue-router란? SPA(Single Page Application)을 구현할 때 사용하는 패키지. 동작에 따른 템플릿을 라우터에 등록하고, 해당 동작이 발생했을 때 미리 지정해 둔 템플릿을 웹 화면에 출력해 페이지가 이동한 것과 같은 효과를 줄 수 있음

 

생성한 vue 프로젝트 위치로 이동 후, 다음 명령어로 axios와 vue-router를 설치합니다.

npm install axios --save*

npm install vue-router --save*
* --save는 npm을 사용해 설치한 패키지를 vue 프로젝트 dependency에 추가하기 위해 사용하는 옵션. (package.json에서 추가된 dependency를 확인할 수 있습니다.)
위 과정이 모두 완료된 후, 지정한 디렉터리에 vue 프로젝트가 생성된 것을 확인할 수 있습니다.

 

VS code vs code에서 **_File-Open-project\_name 선택_**해서 생성한 vue 프로젝트를 열어볼 수 있습니다.