Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961
참고링크: http://wiki.x2bee.com/pages/viewpage.action?pageId=8553868
싱글 파일 컴포넌트 체계
HTML 파일에서 뷰 코드 작성 시의 한계점
아래 예시와 같이
<script>안에선 HTML 코드 구문 강조가 되지 않아 적용하기 어렵다.Vue.component('my-component', { template: `<div><h5>complex markup</h5><ul><li>hello</li></ul></div>` }
그런 문제점을 해결하는 방법이 바로 싱글 파일 컴포넌트 체계이다.
.vue파일로 프로젝트를 구성하는 방식을 말한다.
<template>
<div>
<button>{{ message }}</button>
</div>
</template>
<script>
export default {
data: {
message: 'click this button'
}
}
</script>
<style>
button {
background-color: blue;
}
</style>뷰 CLI
위의 싱글 파일 컴포넌트 체계를 사용하기 위해선 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 웹팩이나 브라우저리파이와 같은 도구가 필요하다.
웹팩이란?
웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러 입니다.
모듈 번들러란?
서로 의존 관계가 있는 모듈을 하나의 파일로 묶어주는 도구
브라우저리파이란?
웹팩과 유사한 성격의 모듈 번들러지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능이 없다.
설치방법
명령 프롬프트 창이나 터미널에 npm install vue-cli -global을 입력한다.
뷰 CLI 명령어
초기 프로젝트를 쉽게 구성해주는 명령어는 vue init이다.
1. vue init webpack: 고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원한다.
2. vue init webpack-simple: 웹팩 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용으로 사용한다.
3. vue init browserify: 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원한다.
4. vue init browserify-simple: 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원한다.
5. vue init simple: 최소 뷰 기능만 들어간 HTML 파일 1개 생성한다.
6. vue init pwa: 웹팩 기반의 프로그래시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트를 생성한다.
공통적으로...
- 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용 가능하다.
- vue 파일을 HTML, CSS, 자바스크립트 파일로 변환해주기 위한 뷰 로더(Vue Loader)를 포함하고 있다.
뷰 로더(Vue Loader)
웹팩에서 지원하는 라이브러리로, 싱글 파일 컴포넌트 체계에서 사용하는 .vue파일의 내용을 브라우저에서 실행 가능한 웹 페이지 형태로 변환해준다.
웹팩 설정 파일의 뷰 로더 속성 확인
webpack.config.js → modules
