[Vue.js] Vue CLI 설치, JavaScript 기반 Vue 프로젝트 생성 및 사용하기

 

이전의 작업들은 index.html 파일을 더블 클릭해서 Vue 애플리케이션을 테스트 한 다음 브라우저에서 확인하는 방식으로 결과물을 확인했었다. 그런데 Vue는 프레임워크이므로 사실 이렇게 작업할 필요가 없다. 이렇게 되면 http:// 나 https://프로토콜이 아닌 file://프로토콜을 사용하게 되기 때문에 파일을 오픈하는 것 밖에 안된다.

이용자들은 웹사이트로 접속하기 때문에 우리는 웹 서버를 구동할 수 있는 개발 설정으로 접근 해야 한다. 개발 웹 서버는 컴퓨터에서 로컬로 실행되는 웹 서버 구동을 컴퓨터 내 로컬로 테스트 할 수 있다. 로컬 컴퓨터에서 HTTPS 또는 HTTP 프로토콜을 통해 제공한다.

 

1. Node js 설치

먼저 Node.js를 설치한다. Vue CLI는 내부적으로 Node.js 를 사용하므로 반드시 설치해야 한다. nodejs.org 에 들어가서 최신 버전을 설치하자. 특별한 설정은 필요없다.

https://nodejs.org/ko/

Node.js

 

2. Vue CLI 설치

운영체제의 터미널(Mac) 이나 명령프롬프트(Window)를 연다.

그다음 아래에 있는 명령어를 실행한다. npm 과 yarn 중 하나만 하면 된다.  이때, mac 환경에서는 sudo를 붙여야 한다. Window 에선 sudo가 없어도 된다.

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

sudo npm install -g @vue/cli

비밀번호를 입력 받는다면 컴퓨터 내 비밀번호를 입력하면 된다.

3. 프로젝트 생성

설치가 끝나면 프로젝트를 생성해보자. 나는 여기서부터 VS code의 터미널을 활용하였다.

vue create {프로젝트이름} # 소문자로 써야 함

프로젝트 이름은 소문자로 쓰지 않으면 에러가 발생한다. 안내문구가 나오면 계속 엔터를 치면 된다.

프로젝트가 생성되면서 작업중인 폴더 아래에 위와 같은 구성의 폴더와 파일들이 자동 생성된다.

 

4. 실행

cd {프로젝트 이름}
npm run serve

정상으로 실행되었다믄 다음과 같은 화면이 보이게 된다.