[Vue.js] 윈도우 10(Window 10) Vue.js 설치하기

 

이번 글에서는 윈도우 10(Window 10)에서 Vue.js 설치하는 방법에 대해 글을 기록한다.

---

목차

1. 윈도우(Window 10) Vue.js 설치 방법

---

1. 윈도우(Window 10) Vue.js 설치 방법

1) Node.js 설치

Vue 프로젝트를 설치하기 위해서는 가장 먼저 Node.js를 설치해야 한다.

https://nodejs.org/ko

Node.js

 

위의 사이트에 접속하여 18.18.1 LTS 안정적이고 신뢰도 높은 버전을 다운로드 받았다.

 

중간에 필수적인 툴 체크를 하면 아래와 같이 툴을 다운로드한다.

필수적인 툴 설치 체크

 

설치를 다 하고 나면 정상적으로 설치가 됐는지 아래의 명령어로 확인한다.

 

Node.js 커멘트 프롬프트에 들어가서 node -v 명령어를 사용한다.

 

2) Vue.js 설치

Node.js를 설치 했으면, 이제 npm을 사용하여 vue를 설치한다.

npm install vue

 

Node.js 때 설치 확인 처럼, npm vue -v를 입력하면 vue의 버전을 확인할 수 있다.

 

3) Vue Cli 설치

Vue Cli는 vue 개발 환경을 설정해주는 도구인데, build, 라이브러리, 폴더 하이라키 구조, WebPack 등을 Vue Cli가 대부분 해결을 해준다.

npm install -g @vue/cli c

 

vue Cli init도 설치를 해준다.

npm i -g @vue/cli-init

 

Vue가 정상적으로 설치 되었는지 아래의 명령어로 확인한다.

vue -V

 

4) Vue 프로젝트 생성

아래의 명령어로 Vue 프로젝트를 생성한다.

vue init webpack 프로젝트명

 

 

위와 같이, 프로젝트 이름, 설명, 저자, Vue build, vue 라우터 설치, ESLint 등의 라이브러리와 설정들을 설정해주고 기다리면 된다.

 

 

기다리면 위와 같이, 시작을 하기 위해 cd test, npm run dev를 하라고 한다.

 

 

이렇게 실행이 되면서, 마지막에는 아래와 같이 http://localhost:8080에 실행되었다고 나온다.

 

위의 해당 URL에 접속하면 아래와 같이, 프로젝트가 생성이 완료 되었다.

---

참고 URL

https://cli.vuejs.org/#getting-started

Vue CLI

https://cli.vuejs.org/guide/installation.html

Installation | Vue CLI