[Vue 기초] vue-cli를 이용하여 프로젝트 생성

vue를 배우고 나서 처음으로 글을 작성합니다.

첫글을 무엇으로 작성하면 좋을지 생각을 하다..!

vue를 이용하여 프로젝트를 할때, 정말 기본이 되는 vue-cli를 사용하는 방법에 대해 적으면 좋겠다고 생각해서 

이에 대해 끄적끄적 해보려고 합니다. ㅎㅎ

앞으로 vue-cli를 기반으로 한 프로젝트를 통해, vue에 대해 알아야 하는 

부모-자식간의 통신방법, router사용 등등에 대해 적겠습니다.

 

1. VUE-CLI는 무엇인가?

vue cli는 Vue command line interface의 약자로, vue 개발 환경을 설정해주는 도구입니다.

vue cli가 알아서 기본적인, 프로젝트 환경 세팅을 완료해줍니다! (편하고, 멋지죠?)

 

 

2. VUE-CLI 설치하기

 

1) node js 설치하기

vue-cli를 사용하기 위해서는 node js 설치가 필수 입니다!!

https://nodejs.org/ko/

Node.js

홈페이지 들어가셔서 기왕이면 LTS 버전으로 다운받아주시면 될 것 같습니다.

 

 

2) 에디터에서 프로젝트를 생성할 폴더를 생성 후 터미널에 "npm install -g @vue/cli" 입력

저는 참고로, vue-basic이라는 폴더를 만들고, visualStudio에서 터미널을 킨 후 입력을 하였습니다.

이렇게 치고 나면..(처음 할 경우 시간이 좀 거릴 수도 있습니다 ^^)

 

완료했다는 멋진 문구가 나오네요.

 

 

3) vue create '프로젝트명' 입력

참고로)

vue cli 버전이 올라감(3.x 이후)에 따라 기존의 vue init ~ 명령어(2.x) 대신

vue create ~ 명령어로 사용이 바뀌었습니다.

 

저는 현재 2021년 8월 작성 기준 vue/cli 4.5.x버전대입니다.

4.5.x이후로 쓰시는 분들은 아래내용을 따라서 사용해주시면 됩니다.

 

먼저, vue create "프로젝트명" 을 입력합니다. 저는 vue-practice로 적겠습니다.

그리고 맨 처음에 있는 Default([Vue 2] babel, eslint)를 선택합니다.

 

여기서 왜 최신버전인 vue 3를 사용하지 않는가에 대해 질문이 생길 수 있습니다.

아직 vue3는 제약사항(IE 브라우저 및 몇몇 라이브러리 미지원) 이 조금 있어서 더 안정화가 되있는 vue2로 사용하시길 권장드리는 것 입니다.

 

위의 명령을 다 마치면, 아래와 같은 안내문구가 나오며 vue-practice 폴더 아래에도 기본적인 셋팅이 되어있는 것을 파악하실 수 있습니다.

 

 

4) cd "프로젝트명" -> npm run serve

위의 사진에 나와있는 cd vue-practice를 터미널에 입력하고, npm run serve를 입력시! 

" http://localhost:8080/ "

링크가 나오고,

기본 vue의 프로젝트를 웹으로 띄어서 확인하실 수 있습니다.

짜잔 ! 축하드립니다. 

vue-cli를 이용하여 하나의 vue 프로젝트를 생성하셨습니다!