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/
다운로드된 설치파일을 실행하여 다음과 같이 설치한다. 본 글에서는 윈도우 11 64비트를 기준으로 설치 과정을 설명한다.
'Next' 버튼을 클릭하여 설치를 진행한다.
라이센스에 동의하고 'Next' 버튼을 클릭한다.
설치 경로를 적절하게 설정하고 'Next' 버튼을 클릭한다.
설치 옵션을 적절하게 설정하고 'Next' 버튼을 클릭한다.
'Next' 버튼을 클릭한다.
'Finish' 버튼을 클릭하여 설치를 완료한다.
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 --version
4. Vue.js 프로젝트 생성
아래의 사진처럼 Vue.js 프로젝트를 생성할 폴더를 연다.
선택한 작업 폴더에 Vue CLI로 Vue.js 프로젝트를 생성하기 위해 터미널을 아래의 사진처럼 연다.
아래의 사진처럼 아래의 명령어를 터미널에 입력하여 Vue.js 프로젝트를 생성한다.
vue create {프로젝트명}
생성한 Vue 프로젝트 경로에 맞춰서 아래의 사진처럼 작업 폴더를 이동한다.
생성한 Vue.js 프로젝트가 잘 동작하는지 확인하기 위하여 아래의 사진처럼 터미널을 열고 터미널에 아래의 명령어를 입력한다.
npm run serve
터미널에 나타난 접속 주소를 웹 브라우저에 입력하여 아래의 사진처럼 Vue.js로 작성된 웹 페이지가 잘 나타나는지 확인한다.
이렇게까지 정상적으로 수행되면 Visual Studio Code 기반 Vue.js 개발 환경이 잘 구축된 것이다.
'[WEB] Front-End Framework & Library > Vue.js' 카테고리의 다른 글
| 뷰(Vue.js)란 무엇이며 누가 사용하는가? (1) | 2024.11.13 |
|---|---|
| [Vue.js] Visual Studio Code에서 NPM을 못 찾는 경우 (0) | 2024.08.11 |
| PowerShell에서 Vue CLI 'UnauthorizedAccess' 오류 해결 방법 (2) | 2023.12.26 |
댓글