[Vue] Vue 설치 및 프로젝트 생성

1. Node.js 설치

vue를 사용하려면 Node.js가 설치되어 있어야한다. 

LTS 버전이 안정화버전이기 때문에 LTS 버전을 설치한다. (필자는 예전에 설치된 Node.js가 있기 때문에 18.14버전을 설치하지 않는다.)

https://nodejs.org/en/

Node.js

 

2. Visual Studio Code 설치

vue를 사용할 에디터를 쓰기위해서 vs code를 설치한다. 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

3. Vue 설치

vue 설치할 폴더를 미리 생성한다. 필자는 E드라이브에 vue 폴더를 생성했고 이 폴더에서 진행할 예정이다.

vs code에서 상단에 터미널을 클릭하고 새 터미널을 실행하고 아래와 같이 입력한다.

Microsoft Windows [Version 10.0.19045.2486]
(c) Microsoft Corporation. All rights reserved.

E:\vue>npm install vue

설치 확인을 위해 아래와 같이 입력한다.

Microsoft Windows [Version 10.0.19045.2486]
(c) Microsoft Corporation. All rights reserved.

E:\vue>vue --version

4. Vue cli 및 Vetur 설치

cli는  vue 프로젝트를 빠르게 설정할 수 있게 도와준다.

아래와 같이 입력한다.

Microsoft Windows [Version 10.0.19045.2486]
(c) Microsoft Corporation. All rights reserved.

E:\vue>npm install -g @vue/cli

Vetur는 vue개발할때 도움을 주는 확장프로그램이다. vs code에서 마켓플레이스에서 vetur 입력시 설치할 수 있다.

 

5. Vue 프로젝트 생성

vue create [프로젝트명] 

위와 같이 입력하면 Vue의 기본 골격 구조가 자동으로 생성된다.

Microsoft Windows [Version 10.0.19045.2486]
(c) Microsoft Corporation. All rights reserved.

E:\vue>vue create project01

 

Vue 어떤 버전을 설치할건지 선택해야한다. 가장 최근에 나온것이 Vue3이고 이전 버전이 Vue2이다.

실무에서는 Vue2를 아직까지 많이 쓰고 있다. 이유는 오픈 소스 모듈들이 Vue3보다는 Vue2를 많이 지원하고 있기 때문이다. 맨 아래 Manually select features는 내가 옵션을 직접선택해서 설치할때 선택한다.

 

우리는 최신버전을할 것이기 때문에 Default Vue3를 선택한다. 엔터를 입력하면 프로젝트 생성이 된다,

정상적으로 설치되면 아래와 같이 나타나고 터미널에서 cd project01입력하면 프로젝트 생성된 폴더로 이동한다.

Microsoft Windows [Version 10.0.19045.2486]
(c) Microsoft Corporation. All rights reserved.

E:\vue>cd proejct01

npm run serve 입력하면 서버가 실행이 된다.

Microsoft Windows [Version 10.0.19045.2486]
(c) Microsoft Corporation. All rights reserved.

E:\vue>npm run serve

 

웹 브라우저에서 주소창에서  localhost:8080 입력시 아래와 같이 나타난다. 그러면 정상적으로 vue 프로젝트가 구동이 된 것이다.!!