[Vue CLI] Vue CLI 설치 및 사용방법

참조 문서)

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

Overview | Vue CLI

 

CLI

• CLI(@vue/cli)는 전역적으로 설치된 npm 패키지이며, 터미널에서 vue명령을 제공한다.
• vue create를 통해 새 프로젝트 생성이 가능한 기능을 제공한다.
• vue ui를 통해 그래픽 사용자 인터페이스를 사용하여 프로젝트를 관리할 수 있다.

 

CLI Plugins

• CLI 플러그인은 Babel/TypeScript, transpliation, ESLint 통합, 단위 테스트와 같은 Vue CLI프로젝트에 선택적인 기능을 제공하는 npm 패키지이다.
• Vue CLI 플러그인은 이름이 @vue/cli-plugin-(내장 플러그인), @vue-cli-plugin-(커뮤니티 플러그인)으로 시작하기 때문에 쉽게 찾을 수 있다.
• 플러그인은 프로젝트의 생성 프로세스에 포함해도 되고, 나중에 프로젝트에 추가도 가능하다.

 

Vue CLI 설치 방법

• Command창에 입력

npm i -g @vue/cli

• version 확인

vue --version

• Upgrade 방법

npm update -g @vue/cli

 

Vue 프로젝트 생성

• vue 프로젝트를 생성할 위치까지 이동한 후 아래 command 입력

//vue create <vue project name>
vue create vue
//or
vue create vue --no-git

• Please pick a preset 선택
  1) Default ([Vue 2/3]Babel, eslint)
  
  Default에서 Vue3과 Vue2가 나뉘는 이유는,
  Vue3이 나온지 꽤 지났음에도 아직 실무에서는 Vue2를 사용하거나 지원하는 프로젝트 및 오픈소스 모듈이 많기 때문이다.
  
  2) Manully select features
  
  Manully select features를 선택하면 Router, Vuex, CSS pre-processors 등  원하는 기본옵션이 아닌 사용자가 옵션을 지정하여 설치할 수 있다.
• 생성 완료
  
  완료 후 프로젝트에 들어가보면 아래의 그림처럼 vue 프로젝트가 생성되어 있다.
  

 

Vue 프로젝트 실행

• 생성한 vue 프로젝트로 이동해서 (cd [project name]), 실행 (npm run serve)

cd [project-name]
npm run serve

 

• http://localhost:8080/ 으로 접속하면 확인 가능하다.