Visual Studio Code 기반 Vue.js 개발 환경 구성하기

Vue.js 를 개발하는 환경을 구축하는 방법은 여러가지가 있다. 본 글에서는 무료로 사용가능하고 충분히 높은 생산성을 낼 수 있는 Visual Studio Code 기반 Vue.js 개발 환경을 구축하는 방법을 소개한다.

1. Visual Studio Code 설치

Visual Studio Code 설치 파일을 아래의 주소로 이동하여 다운로드 받는다.

• Visual Studio Code 다운로드 주소: https://code.visualstudio.com/

다운로드 페이지가 나타난 화면

설치 파일 모습

다운로드된 설치파일을 실행하여 아래의 사진처럼 설치한다. 본 글에서는 윈도우 11 64비트를 기준으로 설명한다.

라이센스 동의 화면

라이센스에 동의하고 '다음' 버튼을 클릭한다.

설치 경로 설정 화면

설치 경로를 적절하게 설정하고 '다음' 버튼을 클릭한다.

시작 메뉴 폴더명 설정 화면

시작 메뉴 폴더명을 적절하게 설정하고 '다음' 버튼을 클릭한다.

추가 설정 화면

추가 설정을 적절하게 지정하고 '다음' 버튼을 클릭한다.

설정 요약 화면

설치를 위해 설정된 값들을 확인하고 '설치' 버튼을 클릭한다.

설치가 진행 중인 화면

몇 분을 기다리면 설치가 완료된다.

설치가 완료된 화면

 

프로그램 설치가 정상적으로 완료되면 Visual Studio Code를 실행한다.

2. Node.js 설치

Vue CLI 활용을 위해 Node.js를 설치한다.

• Node.js 다운로드 주소: https://nodejs.org/

Node.js 다운로드 페이지 화면

Node.js 설치 파일

다운로드된 설치파일을 실행하여 다음과 같이 설치한다. 본 글에서는 윈도우 11 64비트를 기준으로 설치 과정을 설명한다. 

설치 첫 화면

'Next' 버튼을 클릭하여 설치를 진행한다.

라이센스 동의 화면

라이센스에 동의하고 'Next' 버튼을 클릭한다.

설치 경로 설정 화면

설치 경로를 적절하게 설정하고 'Next' 버튼을 클릭한다.

추가 설정 화면

설치 옵션을 적절하게 설정하고 'Next' 버튼을 클릭한다.

네티이브 모듈 설정 화면

'Next' 버튼을 클릭한다.

설치가 완료된 화면

'Finish' 버튼을 클릭하여 설치를 완료한다.

Visual Studio Code에서 터미널 창을 활성화 하는 화면

Node.js 설치가 잘 되었는지 확인하기 위해 위의 사진처럼 Visual Studio Code에서 터미널을 연다. 그 후 아래의 명령어를 입력하여 아래의 사진처럼 버전 정보가 잘 나오는지 확인한다. 

npm -v

버전 정보가 나타난 화면

'UnauthorizedAccess' 오류가 발생하면 아래의 글을 참고하여 조치할 수 있다.

• "PowerShell에서 Vue CLI 'UnauthorizedAccess' 오류 해결 방법", 2023년 12월 26일. @원문보기

3. Vue CLI 설치

아래의 명령어를 입력하여 Vue CLI 패키지를 설치한다.

npm install -g @vue/cli

Vue CLI 패키지 설치 명령어를 입력한 화면

Vue CLI 패키지가 설치된 화면

아래의 명령어를 입력하여 Vue CLI가 잘 설치되었는지 확인한다.

vue --version

Vue CLI 버전이 나타난 화면

4. Vue.js 프로젝트 생성

아래의 사진처럼 Vue.js 프로젝트를 생성할 폴더를 연다.

작업 폴더를 변경하는 화면

작업 폴더를 선택하는 화면

선택한 작업 폴더에 Vue CLI로 Vue.js 프로젝트를 생성하기 위해 터미널을 아래의 사진처럼 연다.

터미널을 여는 화면

아래의 사진처럼 아래의 명령어를 터미널에 입력하여 Vue.js 프로젝트를 생성한다.

vue create {프로젝트명}

Vue.js 프로젝트를 생성하는 명령어를 입력한 화면

Vue.js 버전을 설정하는 화면

Vue.js 프로젝트가 생성되는 화면

Vue.js 프로젝트가 생성된 화면

생성한 Vue 프로젝트 경로에 맞춰서 아래의 사진처럼 작업 폴더를 이동한다.

작업 폴더를 이동하는 화면

작업 폴더를 선택하는 화면

생성한 Vue.js 프로젝트가 잘 동작하는지 확인하기 위하여 아래의 사진처럼 터미널을 열고 터미널에 아래의 명령어를 입력한다.

npm run serve

터미널을 여는 화면

Vue 프로젝트가 잘 실행된 화면

터미널에 나타난 접속 주소를 웹 브라우저에 입력하여 아래의 사진처럼 Vue.js로 작성된 웹 페이지가 잘 나타나는지 확인한다.

Vue.js 프로젝트가 잘 실행된 화면

이렇게까지 정상적으로 수행되면 Visual Studio Code 기반 Vue.js 개발 환경이 잘 구축된 것이다.