Vue.js란?
1. 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
2. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계됨
3. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉬움
4. 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원가능
2. Vue.js 시작
# CDN
최신 버전 사용할 때
|
1
2
|
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
cs |
안정적인 버전이 필요할 때
|
1
2
|
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
cs |
ES (ECMA Script5) 모듈을 사용하는 경우 ES 모듈 호환 빌드
|
1
2
3
|
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>
|
cs |
배포된 사이트에서는 프로덕션 버젼을 사용하여 vue.js를 vue.min.js로 사용
#NPM
1. Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM을 이용한 설치 권장
#최신 안정화버전
$ npm install vue
#CLI
각 다른 빌드간 차이점
NPM 패키지의dist/디렉터리에는 Vue.js의 다양한 빌드가 있습니다. 다음은 그 차이점에 대한 개요입니다.
UMDCommonJSES Module (for bundlers)ES Module (for browsers)
| Full | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| Full (production) | vue.min.js | - | - | vue.esm.browser.min.js |
| Runtime-only (production) | vue.runtime.min.js | - | - | - |
용어
- Full: 컴파일러 및 런타임 버전을 모두 포함합니다.
- Compiler: 템플릿 문자열을 JavaScript 렌더링 함수로 컴파일하는 코드입니다.
- Runtime: Vue 인스턴스 생성, 가상 DOM 렌더링 및 업데이트 등을 담당하는 코드. 기본적으로 모든 컴파일러를 제외한 것입니다.
- UMD: UMD 빌드는 <script>태그를 통해 브라우저에서 직접 사용할 수 있습니다. https://unpkg.com/vue의 Unpkg CDN의 기본 파일은 Runtime + Compiler UMD 빌드 (vue.js)입니다.
- CommonJS: CommonJS 빌드는 browserify 또는 webpack 1와 같은 이전 번들과 함께 사용하기 위한 것입니다. 이러한 번들(pkg.main)의 기본 파일은 런타임 전용 CommonJS 빌드(vue.runtime.common.js)입니다.
- ES Module: ES 모듈 빌드는 webpack 2 또는 rollup과 같은 최신 번들과 함께 사용하기 위한 것입니다. 이러한 번들(pkg.module)의 기본 파일은 런타임 전용 ES 모듈 빌드(vue.runtime.esm.js)입니다.
- 번들러용 ESM: webpack 2 또는 Rollup과 같은 최신 번들러와 함께 사용하도록 설계되었습니다. ESM 형식은 정적으로 구문 분석이 가능하도록 설계되었으므로 번들러을 활용하여 트리 쉐이킹을 실행하여 사용하지 않는 코드를 최종 패키지에서 제거할 수 있습니다. 이러한 번들러의 제공되는 기본 파일(pkg.module)은 ES 모듈 빌드의 런타임(vue.runtime.esm.js) 전용입니다.
- 브라우저 ESM (2.6+ 만 해당): 최신 브라우저에서는 <script type="module">를 이용하여 직접 가져올 수 있습니다.
런타임 + 컴파일러와 런타임의 차이
템플릿을 실시간으로 컴파일 해야하는 경우(예 : 문자열을 template 옵션에 전달하거나 템플릿으로 in-DOM HTML을 사용하여 요소에 마운트하는 경우) 컴파일러와 전체 빌드가 필요합니다.
vue-loader 또는 vueify를 사용할 때 *.vue 파일의 템플릿은 빌드시 JavaScript로 미리 컴파일됩니다. 최종 번들에는 실제로 컴파일러가 필요하지 않으므로 런타임 전용 빌드를 사용할 수 있습니다.
런타임 전용 빌드는 전체 빌드보다 약 30% 정도 가벼우므로 언제든지 사용할 수 있습니다. 하지만 전체 빌드를 사용하려면 번들러에서 별칭을 구성해야합니다.
개발모드와 프로덕션 모드 차이
개발/배포 모드는 UMD 빌드에 대해 하드 코딩되어 있습니다. 압축되지 않는 코드는 개발 환경에서 사용되고 압축된 코드는 파일은 프로덕션 환경에서 사용됩니다.
CommonJS 및 ES 모듈 빌드는 번들러용으로 제작되었으므로 압축된 버전을 제공하지 않습니다. 최종 번들을 직접 압축해야할 책임은 개발자에게 있습니다.
CommonJS 및 ES 모듈 빌드는 process.env.NODE_ENV에 대한 원시 검사를 유지하여 프로덕션 모드를 결정합니다. 적절한 모드를 사용하여 Vue가 실행될 모드를 제어하려면 이러한 번들 변수를 조작해야 합니다. process.env.NODE_ENV와 문자열 리터럴을 함께 사용하면 UglifyJS와 같은 minifier가 개발 전용 코드 블록을 완전히 삭제하여 최종 파일 크기를 줄일 수 있습니다.
CSP 환경
Chrome 앱과 같은 일부 환경에서는 CSP(컨텐츠 보안 정책)를 적용하여 식을 평가하므로 new Function()을 사용할 수 없습니다. 템플릿의 컴파일은 전체 빌드에 의존하기 때문에 이러한 환경에서는 사용할 수 없습니다.
반면 런타임 전용 빌드는 CSP와 완전히 호환됩니다. Webpack + vue-loader 또는 Browserify + vueify로 런타임 전용 빌드를 사용하는 경우 템플릿은 CSP 환경에서 완벽하게 작동하는 render 함수로 미리 컴파일됩니다.
개발용 빌드
중요합니다 : Github의 /dist 폴더에 있는 빌드된 파일은 릴리즈 중에만 체크인 됩니다. Github의 최신 코드에서 Vue를 사용하려면 직접 빌드해야 합니다.
| git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run build |
Bower
Bower는 UMD 빌드에서만 사용 가능합니다.
| # 최신 안정판 $ bower install vue |
AMD 모듈 로더
모든 UMD 빌드는 AMD 모듈로 직접 사용할 수 있습니다.