[Vue.js] Vue.js 설치, 프로젝트 세팅

https://kr.vuejs.org/v2/guide/installation.html

설치방법 — Vue.js

Vue.js는 JavaScript 의 프레임 워크 중에 하나로
React, Angular의 장점들을 모아서 만들었다고 한다.
React와 Angular를 아직 공부하지 못해서 Vue.js에 어떤 장점들이 모인건지 파악하기는 아직 힘들지만 앞으로 두 가지의 프레임워크를 더 공부하고 나면 판단할 수 있을 거 같다 !

Vue.js 는 도큐먼트가 쉽게 사용할 수 있도록 설명이 잘 되어있는 편이다.

[ 설치방법 ]

1. 직접 script 에 추가하는 방법(vue 참조하는 형태)
: script에 추가
2. NPM을 사용하는 방법
: npm install vue --save
3. CLI를 사용하는 방법
: npm install @vue/cli

첫번째 방법인 CDN을 통해 Vue를 직접 스크립트에 포함 시키는 것은

아무래도 Vue를 설치한다는 개념보다는 참조한다는게 맞는 것 같다.  html의 스크립트 파트에 아래의 스크립트를 넣어준 뒤 Vue를 참조하여 사용하면 된다.
(위의 스크립트는 개발버전이고 상용버전도 존재한다. - Vue도큐먼트 참고)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

두번째 방법인 NPM을 사용하는 방법은 이를 위해 node.js 가 설치되어있어야 한다.

node와 npm 설치 확인을 위해서는 콘솔창에

node -v // node.js 버전 확인 npm -v // npm 버전 확인

로 확인 할 수 있다.

세번째 방법인 CLI는 Vue설치 및 기본 프로젝트 환경 세팅을 해주는 도구로 기본적인 프로젝트 구조나 build, 라이브러리 구성 등을 처리해준다.

npm install -g @vue/cli

해당 명령어를 실행하면 vue가 설치되고
vue --version을 통해 설치된 vue의 버전을 확인할 수 있다. 이 후에는 프로젝트 생성이 가능하다.

vue create 프로젝트명

을 콘솔창에 입력하게 되면 기본적인 선택지가 주어지고

Vue2 / Vue3 / Manually select features 중에 선택을 하게 되면

(Manully select features를 클릭하면 라이브러리와 설정을 직접 추가할 수 있다.)

선택된 디폴트 값에 대한 안내가 나오면서 프로젝트 생성이 진행된다. 생성 후에는

cd front npm run serve

명령어를 실행하라고 나오는데
여기서 내가 제일 많이 하는 실수가 나온다. 프로젝트 생성 직후에도 그렇고
콘솔창을 껐다가 다시 켜게 되면 vue 프로젝트가 아닌 일반 상위 프로젝트에 위치하게 되는데
이때 vue 프로젝트로 넘어가지 않고 그대로 npm run
serve를 실행하게 되면

위의 이미지처럼 오류가 뜨게 된다.
꼭 ! vue 프로젝트로 이동한 뒤 npm run serve를 해야한다.
서버를 가동하고 localhost:8080에 접속했을 때 아래의 웹페이지가 뜨면
vue 프로젝트 생성이 성공한 것이다.

[ 프로젝트가 생성된 모습 - 프로젝트 안에 vue를 구성하면 된다.]