VueJS - Umgebungs-Setup

Es gibt viele Möglichkeiten, VueJS zu installieren. Einige Möglichkeiten zur Durchführung der Installation werden im Folgenden erläutert.

Verwenden des <script> -Tags direkt in der HTML-Datei

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

Gehen Sie zur Homepage https://vuejs.org/v2/guide/installation.htmlvon VueJS und laden Sie die vue.js nach Bedarf herunter. Es stehen zwei Versionen zur Verfügung - Produktionsversion und Entwicklungsversion. Die Entwicklungsversion wird nicht minimiert, während die Produktionsversion wie im folgenden Screenshot gezeigt minimiert wird. Die Entwicklungsversion hilft bei den Warnungen und im Debug-Modus während der Entwicklung des Projekts.

CDN verwenden

Wir können auch die VueJS-Datei aus der CDN-Bibliothek verwenden. Der Linkhttps://unpkg.com/vuewird die neueste Version von VueJS geben. VueJS ist auch auf jsDelivr verfügbar (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) und cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

Bei Bedarf können wir die Dateien am Ende hosten und mit der VueJS-Entwicklung beginnen.

NPM verwenden

Für große Anwendungen mit VueJS wird empfohlen, die Installation mit dem npm-Paket durchzuführen. Es wird mit Browserify und Webpack zusammen mit anderen erforderlichen Tools geliefert, die bei der Entwicklung helfen. Es folgt der Befehl zum Installieren mit npm.

npm  install vue

Verwenden der CLI-Befehlszeile

VueJS bietet auch eine CLI, um den Vue zu installieren und mit der Serveraktivierung zu beginnen. Für die Installation mit CLI muss CLI installiert sein. Dies erfolgt mit dem folgenden Befehl.

npm install --global vue-cli

Anschließend wird die CLI-Version für VueJS angezeigt. Die Installation dauert einige Minuten.

+ [email protected]
added 965 packages in 355.414s

Im Folgenden finden Sie den Befehl zum Erstellen des Projekts mit Webpack.

vue init webpack myproject

Verwenden Sie zunächst den folgenden Befehl.

cd myproject
npm install
npm run dev

Sobald wir npm run dev ausführen, wird der Server gestartet und die URL für die Anzeige im Browser angezeigt, wie im folgenden Screenshot gezeigt.

Die Projektstruktur mit CLI sieht folgendermaßen aus.