Vue入門(1)——概要とインストール

この章の大部分の内容は公式ドキュメントから抜粋されており、現在使用されているVueバージョンはv2.5.17で、公式ドキュメントを参照することをお勧めします.この文章を書くのは、「Vue入門」シリーズを完備するためだけで、また、vue-cli 3の使い方についてです.0新しいプロジェクトを構築し、vue-cli 2をどのように構築するか.0構築されたプロジェクトをvue-cli 3にアップグレードします.0、Vue-cli 3.0を参考にVueプロジェクトを構築できる
vue.jsって何?
Vue(読み方/vju)ː/,viewと同様)は、ユーザインタフェースを構築するための漸進的なフレームワークです.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、Vueは、近代的なツールチェーンやさまざまなサポートクラスライブラリと組み合わせて使用される場合、複雑な単一ページアプリケーションを駆動することができます.
互換性
Vueは、IE 8でシミュレーションできないECMAScript 5プロパティを使用するため、IE 8および以下のバージョンをサポートしません.ただし、ECMAScript 5に対応するすべてのブラウザVueの最新バージョンv2.5.17をサポートしています.更新ログはGithubを参照してください.
取付方式:直接で

なるコンストラクションバージョンを し、 したサイトで バージョンを することを し、vue.jsをvue.min.jsに してください.これは、 よりも な をもたらすより さな です.
インストール :コマンドラインツール(CLI)
Vueは、 ページアプリケーション(SPA)のために な を に する CLIを しています. のフロントエンドワークフローにbatteries-includedの を します. で でき、ホット・リロード、 lintチェック、および で な バージョンがあります. については、Vue CLIのドキュメントを してください.
な は、 のもう つの を にすることができます:Vue-cli 3.0 Vueプロジェクトを します
なるコンストラクション・バージョンの
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
-
-

:コンパイラとランタイムを に む

コンパイラ:テンプレート をJavascriptレンダリング にコンパイルするためのコード

ランタイム:Vueインスタンスの 、 DOMのレンダリング、 などに されるコード. にはコンパイラの のすべてを します.

UMD:UMDバージョンは、のラベルでブラウザに できます.jsDelivr CDNのhttps://cdn.jsdelivr.net/npm/vueデフォルトファイルは、ランタイム+コンパイラのUMDバージョン(vue.js)

です.

CommonJS:CommonJSバージョンは、Browserifyやwebpack 1などの いパッケージツールに わせて されます.これらのパッケージツールのデフォルトファイル(pkg.main)は、 のCommonJSバージョン(vue.runtime.common.js)

のみを む

ES Module:ES moduleバージョンは、Webpack 2やRollupなどの なパッケージツールに わせて されます.これらのパッケージングツールのデフォルトファイル(pkg.module)は、 のESModuleバージョンのみを む(vue.runtime.esm.js).

ランタイム+コンパイラvs.ランタイムのみを む

//      
new Vue({
  template: '
{{ hi }}
'
})

//       
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' //   webpack 1     'vue/dist/vue.common.js'
    }
  }
}

Rollup

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

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

Parcel package.jsonに

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

vs. モデル
UMDバージョンでは、 / モデルはハードコーディングされています. では されていないコードを し、 では されたコードを します.
CommonJSおよびESModuleバージョンは に されるため、 されたバージョンは されません. なパッケージを で する があります.
CommonJSとESModuleのバージョンは のプロセスを します.env.NODE_ENVは、どのモードで すべきかを するために されます. なパッケージツール を して、これらの を き えて、Vueが するモードを する があります.プロセスをenv.NODE_ENVを の に き えると、UglifyJSのような ツールは、 のみのコードブロックを に し、 なファイルサイズを らすことができます.
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')
      }
    })
  ]
}