[Vue.js] 1. Vue.js 간단 소개와 설치(VSCode포함)

새롭게 Vue.js 를 공부하게 되어 하나씩 포스팅 해보려 합니다.

저는 Quick Start Vue.js 책을 갖고 있어 이 책을 바탕으로 학습 중입니다.

간단하게 Vue 에 대해 설명하면 구글에서 일하던 에반 유라는 분이 UI를 빠르게 개발하기 위해 만들기 시작했다고 하네요. 그래서인지 다른 프레임워크에 비해 가볍고 유연하다는 장점이 있습니다.

Vue.js 는 MVVM 패턴을 따르고 있다고 합니다.

이는 Model - View -ViewModel 의 줄임말로 애플리케이션 로직과 UI 를 분리하기 위해 설계되었다고 합니다.

View 는 Html&Css로 작성. ViewModel 은 View의 데이터 흐름을 담당.

View는 ViewModel만 알고 있으면 되고 그외의 요소는 신경 쓰지 않아도 됩니다.

또한 ViewModel의 상태 데이터만 변경하면 즉시 View에 반영됩니다.

​

여러 설명이 추가로 있지만 이 정도만 하고 넘어 가겠습니다.

​

Vue.js 를 시작하기 앞서 일단 설치부터 해볼게요.

​

https://nodejs.org/en/download/

일단 Node.js 를 설치해야 합니다. Node.js와 함께 설치되는 npm (node package manager) 을 이용해

Vue.js 와 관련 도구를 설치하고 관리하게 됩니다.

​

설치 완료 후 npm 최신버전으로 업그레이드 진행해주세요.

npm install -g npm (windows)

​

작업할 툴도 설치해야겠죠? Visual Studio Code (VsCode) 로 해보겠습니다. IDE는 개인 취향이므로 어느거로 해도 무방합니다.

https://code.visualstudio.com/

저는 브라우저는 크롬을 사용할 예정이고 디버깅을 편리하게 해준다는 Vue.js devtools (크롬 웹 스토어)도 설치했습니다.

설치가 완료되었다면 마지막으로 Vue-CLI 설치를 해주면됩니다.

Vue-CLI 는 프로젝트의 기본 템플릿을 설정해주는 도구라고 생각하시면 됩니다.

​

커맨드창을 여시고 npm install -g yarn @vue/cli 입력

​설치는 이걸로 끝났습니다-!!

​

그럼 다음편에는 프로젝트 생성과 간단하게 동작하는 페이지를 만들어 볼게요.

​

그럼 여기까지-!