Installieren


Verzeichnis


Kompatibilität

Vue unterstützt nicht IE8 und darunter, da Vue ECMAScript 5-Funktionen verwendet, die IE8 nicht emulieren kann. Aber es unterstützt alle ECMAScript 5-kompatiblen Browser.


Änderungsprotokoll

Neueste stabile Version: 2.6.10

jeweils Die Das Versionsaktualisierungsprotokoll finden Sie auf GitHub.


Vue Devtools

Bei Verwendung von Vue empfehlen wir die Installation von Vue Devtools drauf. Es ermöglicht Ihnen, Vue-Anwendungen in einer benutzerfreundlicheren Oberfläche zu überprüfen und zu debuggen.


Direkt verwenden <script>Importieren

Direkt herunterladen und verwenden <script> Tag wird eingeführt, Vue wird als globale Variable registriert.

Verwenden Sie die komprimierte Version nicht in einer Entwicklungsumgebung, sonst verlieren Sie alle Warnungen zu häufigen Fehlern!

Entwicklungsversion Enthält den vollständigen Warn- und Debugmodus

ProduktionsversionWarnung entfernt, 33,30 KB min gzip


CDN

Für Prototyping oder Lernen können Sie die neueste Version verwenden : 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Für Produktionsumgebungen empfehlen wir die Verknüpfung mit einer eindeutigen Versionsnummer und Build-Datei, um unerwartete Schäden durch neue Versionen zu vermeiden: 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Wenn Sie native verwenden ES Modules gibt es auch eine Build-Datei, die mit ES Modules kompatibel ist: 

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

Sie können den Quellcode des NPM-Pakets unter cdn.jsdelivr.net/npm/vue durchsuchen.

Vue ist auch auf unpkg und cdnjs verfügbar (das Versionsupdate von cdnjs liegt möglicherweise etwas zurück).

Bitte stellen Sie sicher, dass Sie die verschiedenen Build-Versionen verstehen und verwenden Sie die Produktionsversion auf Ihrer veröffentlichten Website. Ersetzen Sie dabei vue.js durch vue.min.js. Dies ist ein kleinerer Build, der ein viel schnelleres Geschwindigkeitserlebnis als die Entwicklungsumgebung ermöglicht.


NPM

Es wird empfohlen, die NPM-Installation zu verwenden, wenn Sie große Anwendungen mit Vue erstellen [1]. NPM funktioniert gut mit Modul-Bundlern wie webpack oder Browserify. Gleichzeitig stellt Vue auch unterstützende Tools zur Entwicklung einzelner Dateikomponenten bereit. Vue bietet ein Befehlszeilentool (CLI)
Offizielle CLI

, eine Single-Page-Anwendung (SPA) Bauen Sie schnell komplexe Gerüste. Es bietet batteriebetriebene Build-Einstellungen für moderne Front-End-Workflows. Die Inbetriebnahme dauert nur wenige Minuten und umfasst Hot-Reload, Lint-Check beim Speichern und einen produktionsbereiten Build. Weitere Details finden Sie in der

Vue CLI-Dokumentation
.

CLI-Tools gehen davon aus, dass Benutzer über ein gewisses Maß an Verständnis für Node.js und verwandte Build-Tools verfügen. Wenn Sie neu bei Vue sind, empfehlen wir dringend, den Leitfaden zunächst ohne Build-Tool durchzulesen und sich dann mit Vue selbst vertraut zu machen, bevor Sie die CLI verwenden.


Erklärung verschiedener Builds

im NPM-Paket dist/ Verzeichnis Hier finden Sie viele verschiedene Vue.js-Build. Hier ist eine Liste ihrer Unterschiede:


UMDCommonJSES Module (基于构建工具使用)ES Module (直接用于浏览器)
完整版vue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
只包含运行时版vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js-
完整版 (生产环境)vue.min.js--vue.esm.browser.min.js
只包含运行时版 (生产环境)vue.runtime.min.js---
UMDCommonJS< /th >ES-Modul (basierend auf der Build-Tool-Nutzung)ES-Modul (direkt im Browser verwendet). )
<🎜>Vollversion<🎜>vue.jsvue.common.jsvue. esm.jsvue.esm.browser.js
<🎜>Enthält nur die Laufzeitversion<🎜>vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js-
<🎜>Vollversion (Produktionsumgebung)<🎜>vue.min.js- -vue.esm.browser.min.js
<🎜>Enthält nur die Laufzeitversion (Produktionsumgebung). )<🎜>vue.runtime.min.js- --


Bedingungen

  • Vollversion: Enthält auch Compiler und Laufzeitversion.

  • Compiler : Code, der zum Kompilieren von Vorlagenzeichenfolgen in JavaScript-Renderingfunktionen verwendet wird.

  • Laufzeit : Code, der zum Erstellen von Vue-Instanzen, zum Rendern und Verarbeiten von virtuellem DOM usw. verwendet wird. Im Grunde alles andere außer dem Compiler.

  • UMD: Die UMD-Version kann über den Tag <script> direkt im Browser verwendet werden. Die Standarddatei für jsDelivr CDNs https://cdn.jsdelivr.net/npm/vue ist die UMD-Version der Laufzeit Compiler (vue.js).

  • CommonJS: Die CommonJS-Version wird mit alten Verpackungstools wie Browserify oder webpack 1 verwendet . Die Standarddatei (pkg.main) für diese Bundler ist eine reine Laufzeitversion von CommonJS (vue.runtime.common.js).

  • ES-Modul: Ab 2.6 stellt Vue zwei ES-Module (ESM)-Builddateien bereit:

    • ESM für Verpackungswerkzeuge: für Dinge wie Moderne Bündelungstools, bereitgestellt von Webpack 2 oder Rollup. Das ESM-Format ist für die statische Analyse konzipiert, sodass Verpackungstools dies nutzen können, um „Tree-Shaking“ durchzuführen und nicht verwendeten Code aus dem endgültigen Paket auszuschließen. Die für diese Verpackungstools bereitgestellte Standarddatei (pkg.module) ist ein Nur-Laufzeit-ES-Modul-Build (vue.runtime.esm.js).

    • ESM für Browser (2.6 ): Wird in modernen Browsern über <script type="module"> verwendet Direkter Import


Laufzeit Compiler vs. nur Laufzeit einbeziehen

Wenn Sie die Vorlage auf der Clientseite kompilieren müssen (Wenn Sie beispielsweise eine Zeichenfolge an die Option template übergeben oder sie an ein Element anhängen und den HTML-Code in seinem DOM als Vorlage verwenden), müssen Sie einen Compiler hinzufügen, d. h. die Vollversion: 

# 最新稳定版
$ npm install vue

Bei Verwendung von vue-loader oder vueify wird die Vorlage in der *.vue-Datei zum Zeitpunkt der Erstellung in JavaScript vorkompiliert. Sie benötigen im endgültigen Paket eigentlich keinen Compiler, verwenden Sie also einfach die Laufzeitversion.

Da die Laufzeitversion etwa 30 % kleiner ist als die Vollversion, sollte nach Möglichkeit diese Version verwendet werden. Wenn Sie dennoch die Vollversion nutzen möchten, müssen Sie im Paketierungstool einen Alias ​​konfigurieren:

webpack

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

Rollup

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

Browserif y

zum package.json Ihres Projekts hinzugefügt: 

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

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

Paket

Fügen Sie die package.json Ihres Projekts hinzu: 

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


Entwicklungsumgebung vs. Produktionsumgebungsmodus

Für die UMD-Version ist der Entwicklungsumgebungs-/Produktionsumgebungsmodus hartcodiert: In der Entwicklungsumgebung wird unkomprimierter Code verwendet, in der wird komprimierter Code verwendet Produktionsumgebungscode.

CommonJS- und ES-Modulversionen dienen zum Verpacken von Tools, daher stellen wir keine minimierten Versionen zur Verfügung. Sie müssen das endgültige Paket selbst komprimieren.

CommonJS- und ES-Modulversionen behalten auch die ursprüngliche process.env.NODE_ENV Erkennung bei, um zu bestimmen, in welchem ​​Modus sie ausgeführt werden sollen. Sie sollten diese Umgebungsvariablen durch die entsprechende Konfiguration des Verpackungstools ersetzen, um den Modus zu steuern, in dem Vue ausgeführt wird. Durch das Ersetzen von process.env.NODE_ENV durch Zeichenfolgenliterale können Komprimierungstools wie UglifyJS auch Codeblöcke, die nur für die Entwicklung bestimmt sind, vollständig verwerfen und so die endgültige Dateigröße reduzieren.

Webpack

In Webpack 4 können Sie die Option mode verwenden: 

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

Aber in Webpack 3 und niedriger müssen Sie verwenden DefinePlugin: Wird von 

module.exports = {
  mode: 'production'
}

Rollup

verwendet rollup-plugin-replace: 

var webpack = require('webpack')

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

Browserify

Wenden Sie eine globale envify-Transformation auf Ihr Paket an. 

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

kann auch in einer Produktionsumgebung bereitgestellt werden.


CSP-Umgebung

Einige Umgebungen, wie z. B. Google Chrome Apps, erzwingen die Anwendung von Content Security Gemäß der Richtlinie (CSP) können Sie new Function() nicht zum Auswerten von Ausdrücken verwenden. In diesem Fall kann die CSP-kompatible Version verwendet werden. Die Vollversion nutzt diese Funktion zum Kompilieren von Vorlagen und kann daher in diesen Umgebungen nicht verwendet werden.

Die Laufzeitversion ist hingegen vollständig CSP-kompatibel. Bei der Erstellung über Webpack Vue-Loader oder Browserify Vueify werden Vorlagen in render Funktionen vorkompiliert, die perfekt in einer CSP-Umgebung ausgeführt werden können.


Entwicklungsversion

Wichtig: Der -Ordner des /dist GitHub-Repositorys wird nur aktualisiert, wenn eine neue Version verfügbar ist freigegeben einreichen. Wenn Sie den neuesten Quellcode von Vue auf GitHub verwenden möchten, müssen Sie ihn selbst erstellen! 

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


Bower

Bower ist nur in der UMD-Version verfügbar. 

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


AMD Module Loader

Alle UMD-Versionen können direkt verwendet werden Wird als AMD-Modul verwendet.


Anmerkung des Übersetzers
[1] Für Benutzer auf dem chinesischen Festland wird empfohlen, die NPM-Quelle auf festzulegen Haushaltsspiegel , der die Installationsgeschwindigkeit erheblich verbessern kann.