インストール

最終更新日: 2017年12月3日

互換性の注意

Vue.js は IE8 でシム化できない ECMAScript 5 の機能を使用するため、IE8 とそれ以下のバージョンをサポートしていません。しかしながら、ECMAScript 5 準拠のブラウザ は全てサポートしています。

リリースノート

最新の安定バージョン: 2.5.9

各バージョンの詳細なリリースノートは、GitHub で入手できます。

Vue Devtools

Vue を使用する場合は、ブラウザに Vue Devtools をインストールすることをお勧めします。これにより、 Vue アプリケーションをよりユーザーフレンドリーなインターフェースで調査、デバッグすることが可能になります。

<script> 直接組み込み

ダウンロードし script タグで読み込んでください。Vue はグローバル変数として登録されます。

開発中は本番バージョンを使用しないでください。 警告や一般的な間違いを見逃す可能性があります!


開発バージョン警告出力とデバッグモードあり

本番バージョン警告出力なし、 30.95 KB min+gzip

CDN

推奨: https://cdn.jsdelivr.net/npm/vue は、npm に公開されるとすぐに最新バージョンが反映されます。https://cdn.jsdelivr.net/npm/vue/ では npm パッケージのソースも確認することができます。

unpkg または cdnjs 上でも利用可能です。(cdnjs は同期に少し時間がかかるため、最新版ではない可能性があります)。

NPM

Vue.js による大規模アプリケーションを構築するときには、NPM を利用したインストールを推奨しています。 Webpack または Browserify のようモジュールハンドラとうまく組み合わせられます。 Vue は単一ファイルコンポーネントを作成するための、付随するツールも提供しています。

# 最新の安定版
$ npm install vue

CLI

大規模なシングルページアプリケーション開発のための足場を素早く組むために、Vue.js ではオフィシャル CLI を提供します。この CLI にはモダンなフロントエンドワークフローのための、すぐに使えるビルド設定を用意しています。ホットリロード、保存時のリント、製品リリース用ビルドができるようになるまでに、ほんの数分しかかかりません。

# vue-cli をインストール
$ npm install --global vue-cli
# "webpack" ボイラープレートを使用した新しいプロジェクトを作成する
$ vue init webpack my-project
# 依存関係をインストールしてgo!
$ cd my-project
$ npm install
$ npm run dev

CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしでガイドを参照することを強くお勧めします。

さまざまなビルドについて

NPM パッケージの dist/ ディレクトリ では Vue.js の多くのさまざまなビルドが見つかります。それらの違いの概要は以下の通りです:

UMD CommonJS ES Module
完全 vue.js vue.common.js vue.esm.js
ランタイム限定 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
完全 (本番用) vue.min.js - -
ランタイム限定 (本番用) vue.runtime.min.js - -

用語

ランタイム + コンパイラとランタイム限定の違い

もしクライアントでテンプレートをコンパイルする必要がある (例えば、 template オプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち完全ビルドが必要です。

// これはコンパイラが必要です
new Vue({
template: '<div>{{ hi }}</div>'
})
// これはコンパイラは必要ありません
new Vue({
render (h) {
return h('div', this.hi)
}
})

vue-loadervueify を利用する場合、 *.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': 'vue/dist/vue.esm.js'
})
]
})

Browserify

プロジェクトの package.json に追加してください:

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

開発モードと本番モードの違い

開発/本番モードは UMD ビルドではハードコードされています: 開発用では非縮小ファイルで、本番用では圧縮されたファイルになっています。

CommonJS と ES Module ビルドはバンドラでの利用を意図しているため、圧縮バージョンを提供していません。あなたの責任で最終成果物を圧縮する必要があります。

CommonJS と ES Module ビルドはまた、実行モードを決めるために process.env.NODE_ENV を直接チェックするように保持されています。 Vue が実行するモードをコントロールするために適切なバンドラ設定を利用してこれらの環境変数を置換するようにしてください。 process.env.NODE_ENV を置換することで、 UglifyJS のような圧縮ツールが開発用コードのブロックを削除し、最終ファイルのサイズを削減することができます。

Webpack

Webpack の 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 transform は以下のようにしてバンドラに適用します:

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

プロダクション環境への配信のヒント も参考にしてください。

CSP 環境

Google Chrome アプリのようなある環境では、Content Security Policy (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 モジュールとして直接利用できます。