Vue 시작하기

Vue 시작해보기

Vue를 현재 처음으로 배워보는 중이다. Vue를 시작하는 방법부터 차근차근 공부해보려고 한다.

 

(참고로 나는 인프런에서 Vue.js 제대로 배워볼래?강의를 통해 학습 중이다.)

 

시작하기 전에 vs코드 확장으로 Vetur를 까는 것을 추천한다. 

 

https://vuejs.github.io/vetur/

Vue CLI 설치하기

 

우선 Vue를 사용하기 위해서는 Vue CLI를 설치해야 한다.

Vue CLI는 쉽게 Vue 프로젝트를 생성하고 관리할수 있게 해주는 프로그램이다. Vue 프로젝트의 폴더구조, 필요한 파일들, 기본 설정 옵션을 명령어를 사용해 자동으로 만들 수 있게 해준다.

https://cli.vuejs.org/

아래는 Vue CLI를 설치하는 방법이다.

터미널을 열어 설치하면된다. -g/global로 add 하니 한번 설치후 다시 설치할 필요는 없다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

설치가 끝난 후에는 버전 체크 커맨드로 설치가 잘 되었는지 확인해 보자.

vue --version

참고로 나는 현재 5.0.4 버전을 사용 중이다.

 

Vue 프로젝트 생성하기

 

Vue 프로젝트를 넣을 폴더로 들어가 터미널을 열고 아래와 같이 입력하자.

(new-vue 는 임시로 적은 글이고 create 다음에 vue프로젝트 폴더명을 적으면 된다.)

vue create new-vue

그러면 preset을 설정하라는 말이 뜨면서 화살표 키를 사용해 어떤 버전과 프리셋으로 프로젝트를 생성할지 선택할 수 있다.

Default는 기본 설정으로 프로젝트를 생성하는 선택지이다.

Manually select features를 선택하면 직접 프로젝트에 필요한 구성 요소들을 선택 할 수 있는데, 스페이스 키로 선택, a키로 전부 선택, i 키로 선택 취소를 할 수 있다.

구성요소를 선택한 후에는 Vue 버전, linter, 추가 lint feature, config 위치, 그리고 preset 저장여부(y 키로 저장, n 키로 저장안함)을 선택 할 수 있다.

 

또 한가지 방법은 Vue 프로젝트 매니저를 사용 하는 것이다.

터미널에

vue ui

를 써보면 기본적으로 http://localhost:8000 에 프로젝트 매니저 창이 열린다.

이곳에서 프로젝트 만들기를 통해 새 프로젝트를 생성할 수 있다. 프로젝트 매니저 사이트는 한국어를 지원하니 시키는 대로 하면 되니 참 간편하다.

 

마지막으로 프로젝트가 설치된 디렉토리에서 npm run serve를 커맨드에 입력하고 로컬서버가 전부 구축된 후 나온 서버링크로 들어가면 Vue 페이지가 실행된다.(ctrl +클릭 으로 바로 이동 된다)