Ch.03 Vue 프로젝트 생성 - 사용자 옵션으로 생성하기

2. 사용자 선택(Manually select features) 옵션으로 Vue 프로젝트 생성하기

 

vue create vue-manually

새 프로젝트를 생성한다.

맨 아래의 Manually select features를 선택하고 엔터.

 

 

 

이렇게 선택창이 뜨면 위의 네 가지를 스페이스로 체크하도록 한다

 

• Babel : Es6 버전이나 TypeScript로 코딩할 경우에 브라우저 버전에 상관 없이 범용적인 Es 파일으로 자동전환 지원을 해줌
• TypeScript : Vue에서 TypeScript로 코딩을 하는 경우 지원해주는 기능
• Progressive Web App : Web App 개발을 지원해주는 기능
• Router : (다음 강의에서 자세히 설명을 할 예정) Vue Router 를 위한 기능
• Vuex : Vue 상태관리를 위한 페키지인 Vuex를 설치하는 기능
• CSS Pre-processors : CSS 작성을 위한 기능을 위한 CSS전처리기
• Linter / Formatter : 자바 스크립트 코딩 컨벤션 (팀 작업을 위한 표준 가이드)
• Unit Testing : 단위테스트를 위한 플러그인들을 설치해주는 기능
• E2E Testing : 통합테스트를 위한 플러그인들을 설치하는 기능

 

우리는 3 버전을 쓰도록 한다

 

 

Router는 다음 강의에서 자세히 설명할 것이기 때문에 이번강의에선 패스하도록 한다.

우선 Y를 눌러준다.

 

 

 

• Airbnb config : Airbnb에서 만든 표준 가이드
• Standard config : 
• Prettier : 

우리는 Standard config를 선택하고 넘어간다.

 

 

코딩 컨벤션이 잘 지켜졌는지 체크하는 시점을 정하는 것으로

우선 Lint on save로 정하고 넘어가도록 한다.

 

Babel이나 ESLint 설정 파일들을 각각의 파일로 만들 것인지 package.json 안에 넣을 것인지 정하는 것

 

 

앞서서 우리가 선택한 사용자 옵션을 저장해서 다음 플젝에도 쓸 수 있도록 프리셋으로 만들 것인지 물어보는 것으로

Y를 누르고 나면

이렇게 프리셋 이름을 정할 수 있도록 되어있다 (vue-basic으로 이름을 붙여보았다)

 

 

(나중에 새 프로젝트를 만들 때 확인해보면 새 옵션을 확인할 수 있게된다)

 

 

 

 

 

 

엔터를 치면 설치가 시작되는데

 

이렇게 완료되었다면 저 두 명령어를 입력해서 확인해보자

 

http://localhost:8080/ 로 들어가보면

성공적으로 실행 된 모습을 확인할 수 있다.