[Vue] 2-2. 프로젝트 생성 (Manually select features)

 

[Vue] 2-1. 프로젝트 생성

위글에서 셋팅한 방법은 Java 에서 Legacy Project 처럼 하나하나 직접 셋팅해줘야하는 불편함이 있었다.

spring boot 처럼 자동으로 설치하기 위해선  Manually select features 로 자동셋팅이 가능하다.

 

1. Vue 프로젝트생성

vue create study-project 

 

해당명령어 입력시 아래와 같은 옵션선택창이 노출된다.

> Defualt ([Vue2] bavel , eslint)

> Defualt (Vue3 Preview) ([Vue3]bavel , eslint)

> Manually select features

 

3번째 메뉴인 Manually select features 를 선택해준다.
그러면 아래와 같이 필요한 설정들을 체크 할수있다.

 

 

2. 프로젝트에 포함할 설정 선택

? please pick a preset: Manually select features
? Check the features needed for your project: 
 (*) Choose Vue Version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) Css Pre-processors
 (*) Linter / Formmater
 ( ) Unit Testing
 ( ) E2E Testing

 

• Router는 Vue.js SPA(Single Page Application) 방식에서 페이지를 라우팅을 이용하여 화면을 갱신하는 기능을 구현할수있는 라이브러리
• Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리

아직 기본적인부분을 배우는 단계이므로 Router 와 Vuex 만 Space Bar로 선택후 다음으로 넘아간다.

 

? please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue Version, Babel, Router, VueX, Linter
? Choose a version Of Vue.js that you want to start the Project with
>2.X
 3.X (Preview)

 

Vue 버전을 선택하는 설정으로 2.X 버전으로 선택한다.

 

? please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue Version, Babel, Router, VueX, Linter
? Choose a version Of Vue.js that you want to start the Project with 2.X
? Use history mode for router? (Requires proper server setup for inex fallback in production) (y/n)

 

router 에서 history 모드를 사용할지 선택하는 단계이며  router 의설정값으로 history mode 와 hash mode가 존재한다.

• history mode : URL이 변경될 때 페이지를 다시 로드하기에 URL에 대해서 index.html로 전달해주는 서버 설정이 필요하다.
• hash mode : URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다.

Y를 입력하여 history 모드로 선택한다.

 

? please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue Version, Babel, Router, VueX, Linter
? Choose a version Of Vue.js that you want to start the Project with 2.X
? Use history mode for router? (Requires proper server setup for inex fallback in production) Yes
? Pick a linter / formatter config :
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

 

 

코드 정리 방식을 선택하는 설정으로 

ESLint란 프로그래밍에서는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다. 즉 ESLint는 JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다.

 

ESLint + Prettier 로 선택한다.

 

? please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue Version, Babel, Router, VueX, Linter
? Choose a version Of Vue.js that you want to start the Project with 2.X
? Use history mode for router? (Requires proper server setup for inex fallback in production) Yes
? Pick a linter / formatter config : Prettier
? Pick additional lint features :
(*) Lint on save
( ) Lint and fix on commit

• Lint on save는 저장시 lint 검사를 제공한다.
• Lint and fix on commit는 저장시 자동으로 fix가 가능한 것은 Fix까지 해준다.

두가지 모두 선택한다.

 

? please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue Version, Babel, Router, VueX, Linter
? Choose a version Of Vue.js that you want to start the Project with 2.X
? Use history mode for router? (Requires proper server setup for inex fallback in production) Yes
? Pick a linter / formatter config : Prettier
? Pick additional lint features : Lint on save , Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files
  In package.json

 

설정 값들을 config 파일로 보관할것인지 package.json 으로 관리할지를 선택하는 메뉴로 

package.json 을 선택한다.

 

? please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue Version, Babel, Router, VueX, Linter
? Choose a version Of Vue.js that you want to start the Project with 2.X
? Use history mode for router? (Requires proper server setup for inex fallback in production) Yes
? Pick a linter / formatter config : Prettier
? Pick additional lint features : Lint on save , Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/n)

 

이설정을 다음번 프로젝트 생성시에도 사용할지 묻는 메뉴로 N 을 선택하면 프로젝트가 생성된다.

 

3. 실행

VS Code 에서 해당 프로젝트를 열어보면 [Vue] 2-1. 프로젝트 생성 에서 생성했던것과 다르게 Router 폴더와 Store 폴더 Views 폴더가  추가로 있는 걸 확인할수 있다.

 

 npm run serve 

터미널에서 위의 명령어 실행시 페이지 이동 버튼이 생성되고 페이지가 이동되는 것을 확인할수있다.