Vue.js - (개발환경셋팅) Vue CLI 3 설치 / Vue CLI 2 삭제

OS : Window10 , Browser : Chrome

 

CLI (Command Line Interface) : cmd창에서 (맥: 터미널) 명령어를 입력해 동작을 수행하는 도구

---

Vue CLI 3 설치

 

- 새로 설치하는 경우 : npm i -g @vue/cli 입력

- 2.x 버전 삭제 후 3.x 버전 설치하는 경우 : npm r -g vue-cli 입력 후, npm i npm i -g @vue/cli 입력

vue --version // 현재 버전 확인

npm r -g vue-cli  // 2.x 버전 지우기
npm r -g @vue/cli // 3.x 버전 지우기

npm i -g @vue/cli // 3.x 버전 설치
npm i -g vue-cli  // 2.x 버전 설치

2.x 버전 지우고 확인, 3.x 버전 설치

 

3.x 버전 확인

---

Vue CLI로 프로젝트 생성

 

1. 프로젝트폴더를 생성하고 싶은 위치에서 cmd창

powershell로 바뀐 뒤로 간단하게 cmd 여는 방법

 

2. vue create '프로젝트 명' 입력, 선택 안하고 default로 하기 위해서 엔터

vue create 프로젝트명 // 3.x 버전
vue init webpack 프로젝트명 // 2.x 버전 (webpack 대신 webpack-simple, browserify 등 가능)

---

서버 실행

 

프로젝트 폴더에서 cmd -> npm run serve 입력

npm run serve // 3.x 버전
npm run dev   // 2.x 버전