インストール

#用語

• ##フルバージョン

  : コンパイラとランタイムバージョン。

• コンパイラ

  : テンプレート文字列を JavaScript レンダリング関数にコンパイルするために使用されるコード。

• ランタイム

  : Vue インスタンスの作成、仮想 DOM のレンダリングと処理などに使用されるコード。基本的にはコンパイラ以外のすべてです。

• UMD: UMD バージョンは、<script> タグを使用してブラウザで直接使用できます。 jsDelivr CDN の https://cdn.jsdelivr.net/npm/vue のデフォルト ファイルは、UMD バージョンのランタイム コンパイラー (vue.js) です。

• CommonJS: CommonJS バージョンは、Browserify や webpack 1# などの古いパッケージ化ツールで使用されます。 ##。これらのパッケージ化ツールのデフォルト ファイル (pkg.main) は、ランタイム (vue.runtime.common.js) のみを含む CommonJS バージョンです。

• ES モジュール

  #: 2.6 以降、Vue は 2 つの ES モジュール (ESM) ビルド ファイルを提供します:

  バンドル ツール用の ESM:
  webpack 2
  • や

    Rollup などの最新のバンドル ツール用に提供されます。 ESM 形式は静的に分析されるように設計されているため、パッケージ化ツールはこれを利用して「ツリーシェイキング」を実行し、最終パッケージから未使用のコードを除外できます。これらのパッケージ化ツールで提供されるデフォルトのファイル (pkg.module) は、ランタイム専用の ES モジュール ビルド (vue.runtime.esm.js) です。

    ブラウザ用 ESM (2.6):
  <script type="module">

  • 経由で最新のブラウザに直接インポート

#テンプレートをコンパイルする必要がある場合クライアント側 (文字列を template

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

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': 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 バージョンの場合、開発環境/本番環境モードはハードコーディングされています。開発環境では非圧縮コードを使用し、本番環境では圧縮コードを使用します。

process.env.NODE_ENV

process.env.NODE_ENV を文字列リテラルに置き換えると、UglifyJS などの圧縮ツールが開発環境のみのコード ブロックを完全に破棄して、最終的なファイル サイズを削減することもできます。 webpack

webpack 4 では、mode

module.exports = {
  mode: 'production'
}

var webpack = require('webpack')

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

Use 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 環境

Google Chrome アプリなどの一部の環境では、コンテンツの適用が強制されます。セキュリティ ポリシー (CSP)、new Function() を使用して式を評価できません。この場合、CSP 互換バージョンを使用できます。フルバージョンはこの機能に依存してテンプレートをコンパイルするため、これらの環境では使用できません。

一方、ランタイム バージョンは CSP と完全に互換性があります。 webpack vue-loader または

を介してビルドすると、テンプレートは 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モジュールとして。

翻訳者注記
[1] 中国本土のユーザーの場合、NPM ソースを に設定することをお勧めします。国産ミラー を使用すると、取り付け速度が大幅に向上します。

PHP中国語ウェブサイト

ホームページコース記事に質問辞書マニュアルダウンロード検索 APPダウンロード