티스토리 뷰

Vue.JS

[Vue.JS] Vue.JS 설치방법

버미노트 2018. 2. 13. 00:42

Vue.JS는 ECMAScript5 기능을 사용하기 때문에 IE8 이하 버전을 지원하지 않습니다. 전 주로 크롬 브라우저에서 개발을 합니다. 크롬 브라우저에서 Vue.JS를 개발 할 때, 크롬 확장 프로그램인 Vue.js devtools를 사용하면, 더 편리하게 Vue.JS를 디버깅 할 수 있습니다.

Vue.JS를 사용하는 3가지 방법에 대해 이야기 하도록 하겠습니다,

1. `<script>`에 추가

script 태그에 Vue.JS 코드를 추가하는 방법이 있습니다.

Vue.JS 소스코드

개발용 버전 을 다운 받으시거나, 배포용 버전 을 다운 받으셔서 script 태그에 추가하면 됩니다. (걸어둔 링크들은 공식문서에서 제공하는 링크로, 링크를 클릭하시면 공식문서에서 제공하는 최신 버전의 Vue.JS를 다운 받을 수 있습니다.

참고 - 최소화 버전(vue.min.js) 사용시 유의사항

개발 중에는 최소화 버전을 사용하지 않는 것이 좋습니다. 최소화 버전에는 개발에 도움이 되는 Warning들을 출력해 주기 때문에, 개발 중에는 개발용 버전을 사용하시다가 실제 서비스에는 배포용 버전으로 배포하는 것을 추천드립니다.

CDN

Vue.JS 소스코드를 직접 script 태그에 추가하기 않고, https://unpkg.com/vue 를 script 태그에 추가하는 방법도 있습니다. (해당 링크는 npm에 올라간 최신 버전입니다.) https://unpkg.com/vue/ 에서 npm 패키지 원본을 확인 할 수 있습니다.

두 방법의 차이는 Vue.JS 소스코드를 직접 script 태그에 추가를 할지, CDN으로 웹 주소를 script 태그에 추가할지 정도 밖에 없습니다.

<html>
    <head>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script>
        var app = new Vue({
        el: '#app',
        data: {
            message: '안녕하세요 Vue!'
        }
        });
    </script>
</html>

CDN으로 Vue.JS 사용하기

위의 코드와 같이 작성하면 Vue.JS를 사용할 수 있습니다.

index.html

다운로드

CodePen으로도 Vue.JS를 CDN으로 javascript 설정에 추가해 주기만 하면, Vue.JS를 사용할 수 있습니다.

CodePen 에서 Create -> New Pen 을 클릭하여(혹은 CodePen 링크에서..) 새로운 소스코드 페이지를 생성한 후, Settings에 위의 그림과 같이 Add External Scripts/Pens에 https://unpkg.com/vue 만 추가하면 CodePen에서도 Vue.JS를 사용할 수 있게 됩니다. CodePen으로 예제 확인하기

2. NPM

Vue로 대규모 서비스를 만들때 NPM을 사용하는 것이 좋습니다. Webpack과 Browserify와 같은 번들러와 함께 사용할 수 있습니다.

npm install vue

위의 쉘 명령어로 vue를 설치할 수 있습니다. vue가 설치된 프로젝트의 node_modules/vue/dist 디렉터리를 보면

dist/
    README.md 
    vue.common.js
    vue.esm.browser.js
    vue.esm.ks
    vue.js
    vue.min.js
    vue.runtime.common.js
    vue.runtime.esm.js
    vue.runtime.js
    vue.runtime.min.js

다양한 빌드 버전의 파일들이 있습니다. README.md 파일을 읽어 보면, 각각의 파일들에 대한 설명을 확인 할 수 있습니다.

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

위의 표를 이해하면 vue의 빌드 버전들을 이해하기 쉽습니다.

모듈별 구분

UMD (Universal Module Definition), CommonJS, ES Module 모듈별 구분을 살펴보도록 하겠습니다.

UMD (Universal Module Definition)

UMD 빌드 버전은 script 태그를 통해 브라우저에서 직접 사용할 수 있는 버전입니다. https://unpkg.com/vue 버전이 위의 표의 vue.js 버전과 동일합니다.

CommonJS

CommonJS 빌드 버전은 browserify 또는 webpack 1과 같은 이전 버전의 번들러와 함께 사용하기 위한 버전입니다. CommonJS 빌드 버전의 파일에는 common이라는 이름이 붙어있습니다. 이러한 번들러의 기본 파일은 런타임 전용 CommonJS 빌드(vue.runtime.common.js) 입니다. node_modules/vue/package.json에 "main": "dist/vue.runtime.common.js"와 같이 정의되어 있는 것을 확인 할 수 있습니다.

ES Module

ES Module 빌드 버전은 webpack 2 또는 rollup과 같은 최신 버전의 번들러와 함께 사용하기 위한 버전입니다. ES Module 빌드 버전의 파일에는 esm이라는 이름이 붙어있습니다. 이러한 번들러의 기본 파일은 런타임 전용 ES Module 빌드 (vue.runtime.esm.js) 입니다. node_modules/vue/package.json에 "module": "dist/vue.runtime.esm.js"와 같이 정의되어 있는 것을 확인 할 수 있습니다.

포함된 코드별 구분

어플리케이션에 적용될 Vue.js 코드에 Runtime만 포함 할 것인지, Compiler까지 포함할 것인지에 대한 구분을 살펴보도록 하겠습니다.

Full (Runtime + Compiler)

Full 버전 빌드는 컴파일러(Compiler)와 런타임(Runtime)이 포함된 빌드 버전입니다.
Compiler는 템플릿 문자열을 JavaScript 렌더링 함수로 컴파일 하는 코드입니다. Runtime에 대해서는 바로 밑에서 이야기 하도록 하겠습니다.

new Vue({
  template: '<div>{{  hi }}</div>'
})

위의 코드와 같이 template 옵션을 사용하여, 템플릿을 컴파일 해야 하는 경우 컴파일러가 필요하기 때문에 전체 빌드(Full 버전 빌드)를 사용해야 합니다.
vue-loader 또는 vueify를 사용하는 경우, *.vue 파일의 템플릿은 JavaScript로 미리 컴파일 됩니다. 그렇기 때문에 최종 번들에는 컴파일러가 필요하지 않아, Runtime 전용 빌드를 사용 할 수 있습니다. (CommonJS 빌드 버전과, MS Module 빌드 버전의 기본 파일이 Runtime 전용 빌드 버전입니다.) 번들러에서 Full 빌드 버전을 사용하려면 번들러에 몇가지 설정을 해줘야 합니다.

Webpack

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

webpack 번들러를 사용할 때, webpack config 파일에 위의 코드와 같이 vue.esm.js의 경로를 추가하면 됩니다.

Rollup

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

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

Rollup 번들러를 사용할 때, 위의 코드와 같이 vue.esm.js 경로를 추가하면 됩니다.

Browserify
```
  {
    // ...
    "browser": {
      "vue": "vue/dist/vue.common.js"
    }
  }
```
browserify 번들러를 사용할 때, 프로젝트의 package.json의 browerify 설정에 위의 코드와 같이 vue.common.js의 경로를 추가하면 됩니다.

Runtime-only

런타임이란 프로그래밍 언어가 구동되는 환경 입니다. 즉, Vue 런타임이란 Vue가 구동되는 환경을 말합니다.
Runtime 버전 빌드는, Vue 인스턴스 생성, 가상 DOM 렌더링 및 패치 등을 담당하는 코드로 모든 컴파일러를 제외한 버전입니다. Full 빌드보다 약 30% 정도 작습니다.

모드별 구분

개발 모드인지 배포모드인지 구분을 살펴보도록 하겠습니다.

개발 모드

개발 모드 버전은 vue.js, vue.runtime.js와 같이 파일명에 min 문자열이 포함되어 있지 않습니다.

배포모드

UMD 빌드 버전에서 배포모드는 파일명에 min이 포함되어 있습니다. vue.min.js와 vue.runtime.min.js 파일은 배포 버전으로 최소화된 파일 입니다. CommonJS와 ES Module 빌드 파일은 번들용으로 만들어졌기 때문에 최소화 버전을 제공하지 않습니다.

3. CLI

Vue.JS는 빠른 Vue.JS 프로젝트 생성을 지원하기 위해 공식 CLI(Command Line Interface)를 제공합니다.

# vue-cli 설치
npm install -g vue-cli

# "webpack" 템플릿을 이용해서 새 프로젝트 생성
vue init webpack my-project

위의 두줄의 명령어만 실행하면 Vue.JS 프로젝트가 생성됩니다. 위의 명령어를 실행하면 webpack을 사용한 Vue.JS 프로젝트가 생성됩니다. vue-cli에 대해 좀더 자세히 이야기 하도록 하겠습니다.

vue-cli 설치하기

npm install --global vue-cli

위의 쉘 명령어로 Vue CLI를 설치 할 수 있습니다. CLI를 설치 후, CLI를 사용하여 Vue.JS 프로젝트를 생성 할 수 있게 됩니다.

Vue.JS 프로젝트 생성하기

Vue.JS 프로젝트를 생성할 때, CLI 명령어의 형태는 아래와 같습니다.

vue init <template-name> [project-name]

예를 들면,

vue init webpack my-project

위의 명령어로 my-project 디렉토리에 webpack 번들러를 사용한 Vue.JS 프로젝트를 생성 할 수 있습니다.

vue-cli 템플릿

vue-cli는 미리 몇 가지 세팅된 템플릿을 제공합니다. (<template-name> 이부분에 정의된 템플릿 이름이 들어갑니다.)

vue list

위의 명령어로 템플릿 리스트를 확인 할 수 있습니다.

Vue.JS 프로젝트를 생성할 템플릿을 선택하여 vue init 명령어로 선택한 템플릿으로 간편하게 Vue.JS 프로젝트를 생성 할 수 있습니다.

각 템플릿마다 제공하는 테스트 모듈이나 그 밖에 서드파트 모듈들이 있습니다. 자세한 내용은 Vue-CLI 로 Vue.js 시작하기 (browserify / webpack) 참고 바랍니다.

4. 정리

Vue.JS를 사용하는 방법은 크게 script 태그에 추가하는 방법과 NPM을 통해 Vue.JS를 설치하는 방법, vue-cli를 사용하여 Vue.JS 프로젝트를 생성하는 방법이 있습니다.

기존의 프로젝트에 Vue.JS를 쓰는 방법으로는 가장 간단하게 script 태그에 추가하는 방법이 좋습니다.

새로운 Vue.JS 프로젝트를 생성할 때, NPM을 통해 Vue.JS를 설치하고, 번들러(Webpack과 같은..)와 컴파일러(babel과 같은..)를 각각 설치하여 Vue.JS 프로젝트를 생성하는 방법이 있습니다만, Vue.JS에서 공식적으로 제공하는 vue-cli를 사용하여 Vue.JS 프로젝트를 생성하는 것이 정신 건강에 좋을 것 같습니다.

저작자표시

'Vue.JS' 카테고리의 다른 글

[Vue.JS] 템플릿 문법 (0)	2018.10.23
[Vue.JS] 라이프 사이클 (4)	2018.10.21
[Vue.JS] Vue 인스턴스 (0)	2018.10.11
[Vue.JS] Vue.JS 시작하기 (2)	2018.05.16
[Vue.JS] Vue.JS 소개 (0)	2018.01.20

공지사항

최근에 올라온 글

beomy

티스토리 뷰

[Vue.JS] Vue.JS 설치방법

1. `<script>`에 추가

Vue.JS 소스코드

참고 - 최소화 버전(vue.min.js) 사용시 유의사항

CDN

2. NPM

모듈별 구분

UMD (Universal Module Definition)

CommonJS

ES Module

포함된 코드별 구분

Full (Runtime + Compiler)

Runtime-only

모드별 구분

개발 모드

배포모드

3. CLI

vue-cli 설치하기

Vue.JS 프로젝트 생성하기

vue-cli 템플릿

4. 정리

'Vue.JS' 카테고리의 다른 글

티스토리툴바

티스토리 뷰

[Vue.JS] Vue.JS 설치방법

1. <script>에 추가

Vue.JS 소스코드

참고 - 최소화 버전(vue.min.js) 사용시 유의사항

CDN

2. NPM

모듈별 구분

UMD (Universal Module Definition)

CommonJS

ES Module

포함된 코드별 구분

Full (Runtime + Compiler)

Runtime-only

모드별 구분

개발 모드

배포모드

3. CLI

vue-cli 설치하기

Vue.JS 프로젝트 생성하기

vue-cli 템플릿

4. 정리

'Vue.JS' 카테고리의 다른 글

티스토리툴바

1. `<script>`에 추가