Vue.js - npm & 테스트(Sample) 프로젝트 설치 및 실행 방법

Npm + Vue.js 테스트 프로젝트 설치

---

이번 포스팅에서는 node(npm)과 git 을 활용해서 Vue.js 테스트 프로젝트를 설치해보려고 합니다.

요즘 핫 이슈로 많은 장점을 가지고 있는 vue.js 프로젝트를 cli 환경에서 설치 및 실행 함으로써 여러 가지
이점을 얻으실 수 있을 거라 생각합니다.  

아래 프로젝트는 로그인 및 로그아웃, 블로그 포스팅 기능이 구현되어 있습니다. vue 소스 코드 분석에
적합한 예제라는 생각이 듭니다.

기본적으로 npm 과 git은 설치가 되어 있어야 실행가능하며, 하단 순서대로 설정하시면 윈도우 및 Mac 
환경에서 누구나 설치가 가능합니다.

Git 설치 이전 포스팅 참고 : Git 다운로드 및 설치

Npm 설치 URL : Npm 다운로드 및 설치

Vue 프로젝트 소스 다운로드

Git의 clone 명령어를 실행해서 프로젝트를 다운받습니다.

본 포스팅은 윈도우10(windows10 x64)에서 테스트 후 작성했습니다.

Github URL에서 소스코드 주소를 확인 후 복사 합니다 : Vue-realworld URL 이동

윈도우 커맨드(cmd)는  관리자 권한 으로 실행해 주시면 됩니다.

적당한 폴더에서 커맨드 실행 후 Git clone '복사한 프로젝트 주소'  명령어 실행 후 프로젝트 다운로드

Git Clone 실제 설정 화면

Vue 프로젝트 모듈(Module) 패키지 설치

Git clone이 완료되면 프로젝트 폴더가 생성 및 다운로드 되어 있습니다. 해당 프로젝트 폴더로 이동
후에 npm install 명령어를 실행해서 필요한 패키지들을 설치합니다.

부가 설명을 드리면 해당 작업은 프로젝트 폴더내에 package.json 파일에 작성된 프로젝트 관련
의존 패키지들을 설치하는 작업입니다.

Vue 프로젝트 빌드 및 실행

npm run dev 명령어를 실행하면 npm 서버가 실행됩니다. (기본 포트 : 8080)

참고로  npm run build 명령어를 통해서 빌드작업만 수행할 수 있습니다.

실제 서버 실행 화면

Vue 프로젝트 브라우저 실행

브라우저 실행 후 주소창에 localhost:8080 으로 접속하면 샘플 사이트 실행을 확인할 수 있습니다.

회원가입, 로그아웃, 포스팅 기능외 여러 기능들이 이미 구현이 되어 있습니다. 

소스 코드 분석도 해보시고 이를 응용해서 본인의 Vue 프로젝트를 만드는데 참고하시기 바래요.

실제 실행 화면

마무리

최근들어 React, Vue 등 무수히 쏟아져 나오는 Javascript 기반 프레임워크들을 사용해서 정말 쉽게 사이트를 구성할 수 있다는 생각이 듭니다.

각 프레임워크의 장단점 및 특성을 정확하게 분석해서 본인의 프로젝트에 가장 부합하는 프레임워크를 선정하는 것이 중요하다는 생각이 듭니다.

아울러, npm을 활용해서 프론트엔드 모듈관리를 체계적으로 할 수 있다는 것은 과거와 다르게 정말 프로젝트 
관리 및 구성의 편리함을 느끼게 해주는 것 같습니다.

다음 포스팅에서 뵙겠습니다. 감사합니다.