Vue 시작하기 / Vue 설치하기 / 뷰 시작하기

 

이 포스팅은 Windows 유저를 대상으로 포스팅 하였습니다.

무작정 따라하기 Vue 편.

 

Vue 프로젝트를 만들 때는 Node.js와 npm을 반드시 먼저 설치해야 합니다.

 

Node.js 를 설치합니다.

Node.js 링크 : nodejs.org/ko/

Node.js

본인에게 맞는 버전을 설치하세요 : )

설치가 완료되면, 터미널 창을 열고, 아래 명령어를 입력하여 제대로 설치했는지 확인해봅니다.

$ node -v

 

그 후, npm 으로 우리의 목적인 vue 를 설치합니다.

 

$ npm install vue

 

vue 설치가 완료되었으면, vue 명령어와 빠른 프로젝트 생성 및 관리를 할 수 있도록 도와주는 vue-cli 를 설치합니다.

프로젝트 생성을 위해 도움을 주는 cli-init 기능도 별도로 설치하여줍니다.

 

$ npm install -g @vue/cli
$ npm i -g @vue/cli-init

 

 

설치가 완료되면, 터미널 창을 열고, 아래 명령어를 입력하여 제대로 설치했는지 확인해봅니다.

$ vue -V

 

 

자, 이제 프로젝트를 만들어 보겠습니다.

먼저 커맨드창에서 설치하고자 하는 위치로 이동하여 아래 명령어를 수행합니다.

(저는 D:\02_Project\vue_project> 경로로 지정하고, 프로젝트 명을 vue-test로 하였습니다.)

 

$ vue init webpack vue-test

명령어 진행 후, 프로젝트 설정에 관한 질문들이 나오는데, 저는 아래와 같이 간단하게 진행하였습니다.

프로젝트 설정 및 설치가 완료되었습니다.

친절하게도 실행방법을 안내해주네요. 저같은경우 프로젝트 명이 vue-test 이기에 저렇게 나옵니다.

$ cd vue-test
$ npm run dev

vue 가 실행되고, 우리가 실행한 프로젝트를 아래 링크에서 볼 수 있습니다.

 

http://localhost:8080

이렇게 vue 초기 설정이 완료되었습니다.

-완료.