vue 프로젝트 생성 및 Lint 적용하기(1) - vue 프로젝트 생성하기

1.개요

 vue-cli로 vue 프로젝트를 생성하고, eslint 적용시켜서 기본적인 vue프로젝트를 구성하는 과정을 보여준다.

 

 

2.환경

@vue/cli 4.3.1

node.js v12.16.3

비쥬얼스튜디오코드

 

3. 설치과정

위의 기본환경은 세팅되어있다고 가정한다.

•  Visual Stdio Code 실행 및 플러그인 설치
•  좌측 하단에 마켓플레이스로 들어가서 Eslint, Vetur를 설치한다(Prettier는 생략했다)

Eslint 설치

 

Vetur 설치

 

 

• vue 프로젝트 생성
• 상단 터미널 메뉴로 터미널을 실행시킨다.
• vue create front(프로젝트명)을 입력한다.

명령어 : vue create front(프로젝트이름) 

 

• vue-cli를 설치했다면 아래 그림과 같은 메뉴가 등장한다.
• Manully select feaures 선택

Manually select features 선택 후 Enter로 다음 단계로 넘어간다 

 

• Babel, Router, Vuex, Linter/ Formatter 선택

Bable, Router, Vuex, Linter / Formatter 선택(Space로 선택한다) 

 

• 그외 메뉴들은 아래와 똑같이 설정해준다.

단계가 많아서 대충 생략했다 

프로젝트 생성완료