Vueの関連知識ポイントレコード

1.インストール

VUE IE8は、すべての互換性のあるブラウザのECMAScript5をサポートしています（ECMAScript5特性をシミュレートしていない）以下のバージョンをサポートしていません。
ブラウザは、Vueのデベロッパーツールをインストールし、あなたはもっとフレンドリーなインターフェイスでVueのアプリケーションを確認し、デバッグすることができます。
直接ダウンロードは、スクリプトタグを導入し、Vueがグローバル変数として登録されます。
そうでなければ一般的なエラーに関する警告が存在しない、開発環境の圧縮バージョンを使用しないでください。圧縮されたバージョンを使用して、本番環境では、より小さく、より速いスピードでの経験を構築することです。
NPMは、それが良いハーモニーのWebPACKで、Vueの持つ大規模なアプリケーションを構築する際にインストールすることをお勧めし、使用してパッケージ化Browserifyモジュール、
Vueが公式のCLIは、単一ページのアプリケーション（SPA）はすぐに複雑な足場を構築しています。（熱過負荷は、可能な生産バージョンを構築し、保管中に糸くずを確認してください）。
vue.js複数（NPMパッケージの下のdistディレクトリ）を構築する
完全なバージョンを：バージョンは、コンパイラとランタイムが含ま
Bコンパイラを：テンプレート文字列は、レンダリング機能JSにコードをコンパイルするために使用されます

Cランタイム：Vueが、仮想ドムなどの場合、レンダリングおよび処理コードを作成するために使用されます
JSに事前にコンパイルを構築する場合、*内部VUEファイルテンプレートをVUE-ローダーまたはvueifyを使用している場合、クライアントは、テンプレート（+ランタイムコンパイラ）をコンパイル。

最後に、バッグは、コンパイラ、ランタイムのみのバージョンを必要とされていません横たわっていました。（約30％の少量の完全なバージョンよりも体積）

ps. 仍希望使用完整版配置,代码如下：

// webpack
module.exports = {
   //..
   resolve: {
       alias: {
           // webpack1时需用'vue/dist/vue.common.js'
           'vue$': 'vue/dist/vue.esm.js'     
       }
   }
}

// 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.comme.js"
    }
}

// parcel,添加到项目的package.json
{
    // ..
    "alias": {
        "vue": "./node_modules/vue/dist/vue.comme.js"
    }
}

2.開発環境と本番環境を設定します

開発環境は、コードを圧縮されていないと開発環境/良い生産のUMD版はハード、圧縮符号生産環境をコード化されています。

パッケージングツールのためのCommonJsとESモジュールのバージョンは、それは独自の圧縮を必要とする、圧縮されたバージョンを提供していません。

どのモードで実行することを決定するために、元process.env.NODE_ENV検出を維持しているがCommonJsとESモジュール。しかし、我々は適切なパッケージングツールが実行されているモードのVueを制御するには、この環境変数を置き換える使用する必要があります。

ps. 把process.env.NODE_ENV替换为字符串字面量可以让UglifyJS之类的压缩工具完全丢掉仅供开发环境的代码块，以减少最终文件尺寸.

// webpack4+,使用mode选项
module.exports =  {
    mode: 'production'
}

// webpack3及更低版本，使用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

3.CSP環境

Google Chromeのアプリは、（）式を評価し、新しい機能を使用することはできません、コンテンツセキュリティポリシー（CSP）を施行し、その後、CSP互換性のあるバージョンを使用することができます。この機能のフルバージョンは、コンパイル済みのテンプレートがこのような状況下で使用することはできません依存しています。
一方、実行時バージョンは、CSPと完全な互換性がありvueifyはWebPACKの+のVUE-ローダーまたはBrowserify +によって構築する場合、テンプレートは完全に実行さCSP環境機能をレンダリングするためにコンパイルされます。

4.開発版（*）
新しいバージョンがリリースされたときのGithubリポジトリ/ distのフォルダだけあなたはGitHubの上VUE最新のソースを使用する場合、それは自身の建物を必要とし、提出されます。

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_module/vue
npm install
npm run build

5.Bower

バウアーはUMD版を提供します

# 最新稳定版本
$ bower install vue

6.AMDモジュールローダ

すべてのバージョンは、UMD AMDモジュールを直接使用することができます。