Vue와 초기세팅(CLI의 경우)

Vue란?

컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며, 재사용이 가능한 UI들을 묶어서 사용할수있다. 기존 웹 개발자뿐만 아니라 HTML, CSS, Javascript 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어진 Front-end Framework다. React와 동일하게 컴포넌트 기반 프레임워크다. Vue는 공식문서가 아주 친절하니 개발 중 궁금한 점을 바로 공식문서에서 찾아 볼 수 있다.

 

※ Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴(UI 화면단 라이브러리)

 

 

---

 

 Cli로 초기세팅을 해보자! 

 

 

Cli는 전역적으로 설치된 vue전용 npm 패키지다. react appr과 비슷한 초기세팅을 도와주는 패키지로, 공식사이트에서 배포중이며 사용법도 굉장히 친절하게 설명되어 있다. 기본적으로 다양한 빌드 도구들이 세팅되어 있으며,  Vue을 처음 접하는 입문 개발자가 webpack을 이용하여 초기세팅을 하게되면 시간이 상당히 소요될 수 있기 때문에 앱 작성에 집중할 수 있는 cli를 사용하는 것도 좋다고 생각한다.

 

 

1. Node.js가 설치되어 있는지 확인하자!

Vue CLI는  버전 8.9 이상이 필요하니 꼭 Node, npm이 설치되어 있는지 확인하자!(v10 이상 권장)

공식문서에서 발췌한 이미지(cli.vuejs.org/guide/installation.html)

 

 

 

 

2. 터미널을 열어 Vue CLI를 설치하자!
아래 명령어로 실행하여 설치를 진행하고, 설치가 완료되었다면 vue --version으로 제대로 설치되어 있는지 버전을 확인하자!

npm install -g @vue/cli //npm의 경우
yarn global add @vue/cli //yarn의 경우

 

 

 

 

3. 새로운 프로젝트를 설치하자!
CLI가 정상적으로 확인이 되었다면 아래 명령어를 입력하여 새로운 프로젝트를 설치하자! vue cli는 초기세팅 과정에서 여러가지를 스스로 세팅할 수 있다. 이부분이 헷갈릴 수 있으니 주의하자!

vue create 프로젝트명

 

vue create를 누르면 가장 먼저 나오는 부분은 설정을 스스로 변경할껀지, 아니면 디폴트값을 설정할껀지를 물어보는 내용이다. 가장 마지가에 있는 [Manually select features] 을 선택하다.

 

프로젝트에 필요한 부분을 모두 체크한다. 체크는 스페이스바를로 선택하며, 전부 완료되면 그때 엔터를 눌른다. 필수기능인 [Bable, Router, Vuex, Linter / Formatter] 을 선택한 후 다음으로 넘어간다.

 

라우터에 히스토리모드를 적용하는지 물어보는 단계이다. vue는 기본적으로 해쉬뱅(#)모드라서 주소에 #가 적용되어 있다. 이부분을 해결하기 위해 사용하는것이 히스토리모드. 주소에 #이 들어가는것이 싫다면 [y]를 선택하자

 

ESLint + Prettier 을 사용하고 싶다면 마지막을 선택하자!

 

ESLint를 언제 사용할지 정하는 부분이다. 저장할때마다 lint를 적용할껀지 commit을 할때 적용할것인지다. 해당부분은 원하는대로 설정하자, 보통 save할때마다 적용하는게 편하니 첫번째를 선택하자.

 

기본적인 패키지를 어떻게 설정할지를 정한다. 편하게 package.json으로 적용하자!

 

앞에서 지정했던 내용을 계속 저장해서 사용할껀지, 아닐껀지 설정한다. 굳이 사용할 필욘없으니 [n]로 설정한다.

 

여기까지 설정이 되면 이제 CLI가 깔리기 시작할것이다. 다 설치가되면 작업폴더를 생성해서 작업을 시작하면 된다! CLI를 사용하지 않고 Vue webpack으로 설정하는 방법은 다음에 블로깅하도록 하겠다!