VSCODE에 웹 개발 환경 구축하기

안녕하세요 HiCreate입니다. 오늘은 VSCODE에 웹 개발 환경, 그 중에서도 Vue.js 사용을 위한 개발 환경을 구축해 보겠습니다.

 

우선 JAVA와 npm 이용을 위해서 openjdk와 npm을 설치하겠습니다.

1. openjdk설치하기

https://github.com/ojdkbuild/ojdkbuild 이 링크로 들어가 

위의 부분을 찾읍시다.

저는 저 빨간색 원 안의 1.8.0버전을 선택했습니다. 여러분은 원하는 버전으로 해주세요.

다운로드를 받고 설치를 누르면 체크박스에 동의 부분을 하고 '계속' 버튼을 눌러서 설치를 완료하시면 됩니다.

Status가 가득차면 완료(중간에 허용할 것인지 경고가 뜨면 무조건 허용하세요)

 

2. NPM 설치

https://www.npmjs.com/get-npm 이번엔 여기로 들어가서 조금만 밑으로 내리면 'Download Node.js and npm'이라는 버튼이 있습니다.

이걸 클릭하면 

이런 화면이 나오는데 저는 왼쪽 것을 선택했습니다.(LTS가 좀 더 안정적이고 최신 버전인 current는 좀 더 새로운 기능들이 추가되어 있습니다.)

다운로드가 완료되면 설치하기

설치가 완료되었으면 다음으로 가봅시다.

 

3. VSCODE 설치

https://code.visualstudio.com/download 에서 자신에게 맞는 OS버전을 골라 다운로드해주세요

그 뒤에 설치하면 끝입니다.

 

자, 이제 마지막으로 Vue.js를 설치해볼까요?

 

4. Vue.js 개발환경 만들기

 

VSCODE를 켜면

이런 화면이 나오는데 저 빨간색 부분을 클릭해봅시다.

여기서 Vetur를 검색해서 다운로드합시다.

다운로드가 완료되셨으면 이제 명령프롬포트를 켭니다.

명령프롬포트에서 드라이브로 가서 workspace폴더를 만들고 npm을 이용해 vue/cli-init 을 설치합니다. (npm i -g @vue/cli-init)

이렇게 설정해주세요

설치가 완료되면 npm run dev를 입력하고 브라우저에서 localhost:8080으로 가봅시다.

이런 화면이 나오면 다 된 겁니다.

 

그럼 VSCODE에 Vue.js 개발환경 구축하기 여기서 마치겠습니다.

감사합니다.