Vue.js - 프로젝트 수동 생성

vue create 프로젝트 이름을 입력하면 Manually 로 시작하는게 있다. 그게 수동으로 설정을 해서 프로젝트를 만드는 거다.

수동 생성을 하면 다음과 같이 어떤것들을 사용할건지 고르는게 나온다. 선택은 스페이스바를 통해 선택가능하고 한번 더 누르면 선택 해제된다.

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle 
all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Babel- 최신 자바스크립트 문법으로 작성된걸 구 브라우저에서도 작동할 수 있도록 다시한번 컴파일 해준다. 

Progressive Web App (PWA) Support- 이거는 모바일 처럼 앱을 구현할 수 있도록 해주는 것

Router- 메뉴 구성하고 화면이동 가능하게 하는것

Vuex- 모든 vue component에서 접근이 가능한 저장소

Linter/Formatter - Linter 는 자바스크립트 문법을 검사해주고 Formatter는 들여쓰기는 얼마나 하고 문자열은 ' 을 쓸지 "쓸지와 같은 공통된 문법을 format하는걸 말한다. 

Unit Testing - 모듈들을 테스트 할 수 있는 모듈

위에서 원하는 것들을 골라서 엔터를 누르면 버전 선택하는게 나온다

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x 
  2.x

엔터를 누르면 히스토리 모드 사용할건지 묻는다

? Use history mode for router? (Requires proper server setup for index fallback in 
production) (Y/n)

엔터를 누르면 linter/formatter 관련 되어서 나온다

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

ESLint는 자바스크립트 문법 관련이다. 

Airbnb cofig : 에어비앤비 개발했을 때 문법

Standard config: 표준 규칙

Prettier : VS Code에서 설치한Prettier formatter

>(*) Lint on save
 ( ) Lint and fix on commit (requires Git)

저장할때마다 문법체크를 할건지 아니면  커밋할때 문법체크를 할건지 선택한다.

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files 
  In package.json

Babel, ESLint 등등의 설정 파일을 각각별개로 관리할건지 아니면 package.json하나에서 관리할건지 선택한다.

? Save this as a preset for future projects? (y/N)

여태까지 선택했던 옵션들을 즐겨찾기 처럼 추가해서 바로바로사용할건지 물음. y누르면 나중에 프로젝트 만들때 이 설정을 바로 사용할수 있다.