Vue.js 란
- 사용자 인터페이스를 만들기 위한 프로그레시브 프레임 워크
- MVVM (Model-View-ViewModel) 패턴의 뷰 모델 레이어에 해당하는 화면단 라이브러리
화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고 추후 유지 보수가 편해진다.
| View | 사용자에게 보여지는 화면 |
| DOM | HTML 문서에 들어가는 요소(태그, 클래스,속성 등)의 정보를 담고있는 데이터 트리 |
| DOM Listener | DOM의 변경 내용에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| Model | 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
| Data Binding | View에 표시되는 내용과 모델의 데이터를 동기화 |
| ViewModel | View와 Model의 중간영역, DOM Listener, Data Binding 제공 |
컴포넌트 기반 프레임워크
컴포넌트(Component) : 화면에 비치는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것
.vue인 단일 파일에 HTML, 자바스크립트, CSS 코드로 구성하여 사용
Node.js
- JavaScript 엔진을 기반으로 하는 JavaScript 런타임 입니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
설치 및 버전 확인
- cmd 창에서 노드 버전 확인 명령어 실행
node -v
VUE-CLI
- vue로 빠르게 프로젝트를 구성하고 프로토 타이핑을 하고 싶을 때 사용하는 도구
CLI 2.x
- 명령어 : npm install -g vue-cli
- 프로젝트 생성 : vue init '프로젝트 템플릿 이름' '파일 위치'
- 웹팩 설정 파일 : 노출
- 깃헙의 템플릿 다운로드
- ES6 이해도 필요 X
CLI 3.x
- 명령어 : npm install -g @vue/cli
- 프로젝트 생성 : vue create '프로젝트 이름'
- 웹팩 설정 파일 : 노출 X
- 플로그인 기반으로 기능 추가
- ES6 이해도 필요
프로젝트 실행
- 프로젝트 폴더 이동
- npm run serve
cd 프로젝트폴더
npm run serve
참고
- https://kr.vuejs.org/v2/guide/index.html