Vue CLI란?

vue github

Vue CLI is a full system for rapid Vue.js development

It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations.
At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.

vue 프로젝트의 개발환경 설정시 개발자의 고민을 덜게 해주는 고마운 친구

---

Vue.js 개발환경 설정

1. Vue CLI 설치

# npm 설치
npm install -g @vue/cli

# yarn 설치
yarn global add @vue/cli

2. Vue 프로젝트 생성

vue create (프로젝트 이름)

위의 명령어 입력시 아래의 화면이 뜬다.

1. Vue2 버전의 기본 세팅
2. Vue3 버전의 기본 세팅
3. 사용자 입맛대로

세 개중 하나를 선택할 수 있다.

3. Options 선택

기본 babel과 eslint를 사용하는 선택지인 1번 2번이 빠르긴하지만, 3번 선택지가 더욱 구체적인 개발환경 설정이 가능하다.

key arrow와 space로 선택하고 enter키를 눌러 다음으로 넘어간다.

Choose Vue version
Vue 버전 선택 옵션 ( 2 or 3 )

Babel
Vue 코드를 javascript로 바꿔주는 컴파일러

TypeScript
확장된 javascript, 정적 타입 언어 사용

PWA Support
모바일 웹사이트에서 네이티브 앱과 같은 동작을 가능하게 하는 기술

Router
SPA인 Vue는 Router를 설치해야지 주소의 이동이 가능하다

Vuex
vue용 상태관리 라이브러리

CSS Pre-processors
확장된 css (scss)

Linter / Formatter
코딩 컨벤션을 엄격하게 지키게 해주는 도구

Unit Testing
간단한 unit testing을 도와준다

E2E Testing
종단간 testing을 도와준다

4. 개발환경 세팅 완료!!

take a while 후 환경 세팅이 끝난다 😎

5. vue 실행

cd my-project

명령어로 디렉토리 이동 후

npm run serve

명령어로 서버 실행해보면 끝!

출처

vue cli guide