[Vue JS] 윈도우에서 Vue JS 개발 환경 설정하기(node js, vscode)

1. Node.js 설치

사이트 : https://nodejs.org/ko/

Node.js

위 링크로 이동하여 원하시는 버전을 받으시면 됩니다.

LTS 버전이 일반적으로 많이 사용되는 거 같네요.

지원 일정은 이렇다고 하니 참고 정도로만 봐주세요.

 

다운받은 파일을 실행하고 쭉 다음 누르다가

요 화면에서 체크를 해 준 후 진행하면 됩니다.

윈도우 설정에 따라 실행 권한을 요구하기도 하는데 승인 후 진행하면 됩니다.

 

설치 완료 후 프로그램을 닫으면

이러한 화면이 나올텐데요 아무키나 눌러서 넘어가고 다음 화면에서도 마찬가지로 넘어가시면 됩니다.

윈도우 설정에 따라 권한 승인을 요구하는 화면이 나오는데 승인 후 진행하면 됩니다.

윈도우 파워셀 이 실행되면서 필요한 것들을 설치하게 됩니다.

 

설치 과정이 다 끝난 후 정상적으로 설치가 되었는지 확인해 보려면

명령 프롬프트를 실행 한 후

node -v 와 npm -v 를 각각 입력하면 됩니다.

이렇게 버전 확인이 되면 정상적으로 설치가 되어 있는 것입니다.

 

2. Git 설치

사이트 : https://git-scm.com

Git

위 링크로 이동하여

이 부분을 클릭한 후

그냥 다음다음 눌러서 설치하시면 됩니다.

 

3. Visual Studio Code (VSCode) 설치

사이트 : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

위 사이트로 이동 후

 

요 부분을 클릭 후 안정버전을 받아주세요.

근데 vscode 는 업데이트가 잦은 편이기도 하고 업데이트 하면서 오류가 생길 때가 간혹 있는데

구버전은 https://code.visualstudio.com/updates 이곳에서 찾아서 받을 수 있습니다.

 

VS Code 설치는 별다를 건 없고 그냥 다음 다음 누르시면 됩니다.

 

4. VS Code 설정

VS Code 를 설치 한 후 실행하고 왼쪽 바에서 확장(Extensions)을 클릭 한 후

이 3가지를 설치해 주세요.

 

5. vue-cli 설치

이제 vscode 에서 터미널을 열고

루트 디렉토리로 이동 후(cd / 입력)

npm install -g @vue/cli 를 입력합니다.

 

설치 후

 

프로젝트를 생성할 폴더로 이동한 후

vue create 프로젝트명

을 입력합니다.

파일 복사등이 완료가 되면

안내 화면이 나올텐데요

차례대로 입력하면

이런 메시지가 나올 텐데요

http://localhost:8080으로 이동하라는 말이니 그대로 하면

브라우저에

위와 같은 화면이 나오면 정상적으로 생성이 된 것입니다.

 

이제 VS Code 에서 Open Folder 메뉴를 이용해서 위에서 만들어준 폴더를 열어주고 수정등을 하시면 됩니다.