[설치] Vue.js 설치 및 프로젝트 생성

Vue 설치

• 기존 React를 간단히 공부하면서 Node.js를 이미 설치하였었음
• Node.js가 설치되어 있지 않다면 설치 후 cmd창을 열고 순차적으로 진행

vue 설치

npm install vue

vue cli 설치

 

npm install -g @vue/cli

• npm install : Node.js의 패키지 매니저(NPM)를 사용하여 패키지를 설치하라는 명령
• -g : 글로벌 설치 옵션 (이걸 붙이면 시스템 전체에서 사용 가능하게 설치됨)
• @vue/cli : Vue.js 프로젝트를 생성하고 관리하는 Vue CLI 패키지

Vue CLI 설치 확인

# Vue CLI 버전이 출력되면 정상
vue --version

글로벌 설치 이유 및 설치하지 않았을 경우 프로젝트 생성

• 글로벌 설치(-g)를 통해 어디서든 다음과 같이 vue 명령어 사용하여 Vue 프로젝트를 생성하거나 설정 관리 가능

vue create my-project

• 이는 자바에서 환경 변수를 설정하고 어디서든 cmd로 'javac, java'를 사용하는 것과 비슷한 개념으로 글로벌 설치를 하지 않을 경우 다음 2가지 방법으로 설치를 해야 함
• npx를 사용하는 방법

npx @vue/cli create my-project

 

• 로컬 설치 후 실행하는 방법

# Vue CLI를 현재 프로젝트에 설치
npm install @vue/cli # node_modules/.bin 안에 Vue CLI가 설치

# 프로젝트 생성 명령 2가지 중 하나 사용
npx vue create my-project
./node_modules/.bin/vue create my-project

---

Vue 프로젝트 생성

# cd 폴더명
cd D:\BigData\Vue
vue create hello_vue

 

경고 문구

• Vue CLI가 Yarn 패키지 매니저를 사용해서 패키지를 설치하는데 네트워크 속도가 느려서 패키지 다운로드가 오래 걸릴 수도 있다는 경고
• 중국에서 Vue CLI를 사용할 때 빠른 설치를 위해 npm mirror(중국 npm 미러 서버) 사용을 추천하는 메시지로 만약 설치 속도가 너무 느리다면 y(Yes)를 입력하면 npm 미러 서버에서 빠르게 다운로드할 수 있다고 함
• 하지만, 중국을 믿지 않기 때문에 n(No) 눌러서 기본 설정을 유지하도록 함

Vue 버전 선택

 

• Vue 3를 배우거나 최신 프로젝트를 만든다면?
  → Default ([Vue 3] babel, eslint) → Vue 3로 공부 예정
• Vue 2가 꼭 필요하다면?
  → Default ([Vue 2] babel, eslint)
• 프로젝트에 맞게 직접 기능을 설정하고 싶다면?
  → Manually select features

설치 방법 선택

 

• 간단하게 빠르게 설치하고 싶다면?
  → NPM 사용 (Use NPM)
• 속도와 패키지 관리 기능이 중요한 경우?
  → Yarn 사용 (Use Yarn)
  → React 하면서 Yarn을 설치했었기 때문에 Yarn을 사용
• 기존에는 Yarn이 더 빠르지만 Yarn을 추가 설치하는 번거로움이 있었는데 최신 npm 버전에서는 속도 차이가 거의 없다고 함
• 따라서, Yarn이 있으면 Yarn으로 설치 / 없으면 npm으로 설치하면 될 것 같음

설치 완료

 

프로젝트 실행

# cd '생성된프로젝트 폴더'
cd hello_vue

# 서버 실행
npm run serve

 

 

localhost:8080 접속

• 다음과 같은 결과가 나오면 성공

---

참고 자료

https://urame.tistory.com/entry/Windows%EC%97%90%EC%84%9C-Vuejs-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

Windows에서 Vue.js 설치하기 ( Vue3 버전 )