가이드

설치방법

호환성 정보

Vue는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다. 하지만 모든 ECMAScript 5 호환 브라우저를 지원합니다

릴리즈 노트

최신 안정 버전: 2.7.14

각 버전에 대한 자세한 릴리즈 노트는 GitHub에서 보실 수 있습니다.

Vue Devtools

Vue를 사용할 때, 브라우저에 Vue Devtools를 설치 하는것이 좋습니다. Vue 앱을 보다 사용자 친화적인 인터페이스에서 검사하고 디버깅할 수 있습니다.

직접 <script>에 추가

다운로드 받아 script 태그에 추가하기만 하면 됩니다. Vue는 전역 변수로 등록됩니다.

개발 중에는 프로덕션 버전을 사용하지 마십시오. 경고 및 일반적인 실수를 놓칠 수 있습니다!

개발 버전모든 오류 메시지 및 디버그 모드

프로덕션 버전오류 메시지 없음, 37.51kb min+gzip

CDN

프로토 타이핑또는 학습 목적이라면, 아래 코드로 최신 버전을 사용할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

프로덕션 환경인 경우 새 버전에서 예상치 못한 오류를 방지하려면 특정 버전의 빌드 파일을 추가하는것을 추천합니다.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

기본 ES 모듈을 사용하는 경우 이를 지원 하는 ES 모듈 호환 빌드 파일도 있습니다.

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.esm.browser.js'
</script>

cdn.jsdelivr.net/npm/vue에서 NPM 패키지의 소스를 둘러볼 수도 있습니다..

Vue는 unpkg 와 cdnjs에서도 사용할 수도 있습니다. (cdnjs는 동기화하는데 시간이 걸리므로 최신버전을 사용하지 못할 수 있습니다).

각 다른 빌드간 차이점에 대해 읽어보고 배포된 사이트에서는 프로덕션 버젼을 사용하여 vue.js를 vue.min.js로 대체해주세요. 이는 개발 경험보다는 속도에 최적화된 빌드입니다.

NPM

Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM를 이용한 설치를 권장하고 있습니다. NPM은 Webpack 또는 Browserify와 같은 모듈 번들러와 잘 작동합니다. Vue는 싱글 파일 컴포넌트를 만들기 위한 도구도 제공합니다.

# 최신 안정화 버전
$ npm install vue

CLI

Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 공식 CLI를 제공합니다. 최신 프론트엔드 워크 플로우를 위해 사전 구성된 빌드 설정을 제공합니다. 핫 리로드, 저장시 린트 체크 및 프로덕션 준비가 된 빌드로 시작하고 실행하는데 몇 분 밖에 걸리지 않습니다. 상세한 내용은 Vue CLI 문서에서 찾아보실 수 있습니다.

CLI는 Node.js 및 관련 빌드 도구에 대한 사전 지식을 전제로 하고 있습니다. Vue 또는 프런트엔드 빌드 도구를 처음 사용하는 경우 CLI를 사용하기 전에 빌드 도구없이 가이드를 읽어 보시기 바랍니다.

Watch a video explanation on Vue Mastery

각 다른 빌드간 차이점

NPM 패키지의 dist/ 디렉터리에는 Vue.js의 다양한 빌드가 있습니다. 다음은 그 차이점에 대한 개요입니다.

UMD CommonJS ES 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 - - -

용어

런타임 + 컴파일러와 런타임의 차이

템플릿을 실시간으로 컴파일 해야하는 경우(예 : 문자열을 template 옵션에 전달하거나 템플릿으로 in-DOM HTML을 사용하여 요소에 마운트하는 경우) 컴파일러와 전체 빌드가 필요합니다.

// 아래 내용은 컴파일러가 필요합니다
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 아래는 필요하지 않습니다
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

vue-loader 또는 vueify를 사용할 때 *.vue 파일의 템플릿은 빌드시 JavaScript로 미리 컴파일됩니다. 최종 번들에는 실제로 컴파일러가 필요하지 않으므로 런타임 전용 빌드를 사용할 수 있습니다.
런타임 전용 빌드는 전체 빌드보다 약 30% 정도 가벼우므로 언제든지 사용할 수 있습니다. 하지만 전체 빌드를 사용하려면 번들러에서 별칭을 구성해야합니다.

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js'  webpack 1용 입니다
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

프로젝트의 package.json에 추가하십시오.

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

프로젝트의 package.json에 추가하십시오.

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

개발모드와 프로덕션 모드 차이

개발/배포 모드는 UMD 빌드에 대해 하드 코딩되어 있습니다. 압축되지 않는 코드는 개발 환경에서 사용되고 압축된 코드는 파일은 프로덕션 환경에서 사용됩니다.

CommonJS 및 ES 모듈 빌드는 번들러용으로 제작되었으므로 압축된 버전을 제공하지 않습니다. 최종 번들을 직접 압축해야할 책임은 개발자에게 있습니다.

CommonJS 및 ES 모듈 빌드는 process.env.NODE_ENV에 대한 원시 검사를 유지하여 프로덕션 모드를 결정합니다. 적절한 모드를 사용하여 Vue가 실행될 모드를 제어하려면 이러한 번들 변수를 조작해야 합니다. process.env.NODE_ENV와 문자열 리터럴을 함께 사용하면 UglifyJS와 같은 minifier가 개발 전용 코드 블록을 완전히 삭제하여 최종 파일 크기를 줄일 수 있습니다.

Webpack

Webpack 4+인 경우, mode 옵션을 사용하세요:

module.exports = {
  mode: 'production'
}

하지만, Webpack 3 혹은 이전 버전이라면, DefinePlugin을 사용해야합니다.

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

rollup-plugin-replace를 이용하여 다음과 같이 사용하십시오.

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

글로벌 envify을 적용하여 번들러에 적용하십시오.

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

배포 관련 팁을 참고하세요.

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 모듈로 직접 사용할 수 있습니다.

시작하기 →
이 문서에 문제를 제보하거나 기여하고 싶은 부분이 있으십니까? Github에서 이 페이지를 수정하세요!