[Vue.js] #1. 개발환경 구성하기

Vue.js 로 프로젝트를 진행하려 한다. 일단 가장 먼저 해야할일은 개발환경을 구성하는것이다. 

그중에서도 가장 먼저 할일은 VSCode를 설치하는 방법이다. 설치 방법은 다음 글을 참조하도록 하자. 

VSCode (Visual Studio Code) 설치 방법

간단히 설치가 끝났고 그다음은 Vue로 개발하기 위해 필요한 것들을 설치해야 한다. 

---

Node.js 설치 (npm)

Vue로 개발을 할때 수많은 라이브러리들을 가지고 와서 쓸수가 있는데 그것을 해주는게 바로 Node.js이다. 

Node.js

이곳에 들어가서 Windows용 버전으로 다운을 받았다. (필자의 환경은 Windows, 각자의 OS에 맞게 설치하면 된다.)

Node.js 설치

Recommended 버전으로 설치를 하겠다. 

Node.js 설치

건드릴게 거의 없고 Next 연타만으로 설치를 할 수 있다. 

 

설치가 다 되었으면 먼저 설치한 VSCode를 실행시켜보도록 하자. 

VSCode 터미널 열기

Node.js가 설치가 잘 되었는지 확인하기 위해 VSCode > 상단 보기 > 터미널(Ctrl+`) 을 눌러서 터미널을 열어준다. 

설치된 node.js 버전 확인

node.js와 npm이 정상적으로 설치가 된 것을 확인할 수 있다. 

---

Vue.js 플러그인 설치

플러그인을 설치할때는 VSCode 마켓플레이스에서 검색후 할수 있다. 마켓플레이스 단축키는 Ctrl + Shift + x 이다. 

Vetur 설치

Vetur 설치

Vue를 사용하려할때 가장 먼저 설치해야 하는 플러그인은 Vetur이다.  .vue 파일을 Syntax Highlighting 해주기 위한 용도이다. 

 

Prettier 설치 

Prettier 설치

그다음은 Prettier 설치이다. 이건 코드를 깔끔하게 관리하기 위해 사용이 된다.

---

Vue CLI 설치

CLI는 Command Line Interface 의 약자이다. 터미널에서 명령어로 vue를 활용하기 위해 Vue CLI를 설치한다. 

> npm install -g @vue/cli

터미널에서 위와 같은 명령어를 쳐서 Vue CLI를 설치한다. 

vue cli 설치

이런 모습으로 설치가 된다. 

 

이정도 설치를 했으면 개발환경 구성은 대략적으로 끝났다고 볼 수 있다. 

 

이제 프로젝트를 생성하고 실행을 한번 해보자. 

[Vue.js] #2. 기본 프로젝트 생성 및 실행하기

 

끝!