So verwenden Sie Vue direkt nach dem Update

Vue.js ist ein beliebtes Front-End-Framework und seine neueste Version, Vue 3.0, wurde im September 2020 offiziell veröffentlicht. Die neue Version bringt einige wesentliche Änderungen mit sich, darunter eine bessere Leistung, eine bessere TypeScript-Unterstützung und eine einfachere Möglichkeit, Code zu schreiben. In diesem Artikel wird vorgestellt, wie Anfänger Vue.js 3.0 verwenden können.

1. Installieren Sie Vue.js 3.0

Bevor wir Vue 3.0 verwenden, müssen wir zuerst Vue.js installieren. Vue 3.0 kann über npm installiert werden.

Wir können ein Konsolenfenster öffnen und darin den folgenden Befehl eingeben:

npm install vue@next

Dadurch wird Vue.js 3.0 lokal installiert. Unsere installierte Vue.js-Version können wir jederzeit mit dem folgenden Befehl überprüfen:

vue --version

2. Erstellen Sie eine Vue.js-Anwendung

Wir können Vue CLI 4 verwenden, um eine neue Vue.js-Anwendung zu erstellen. Vue CLI 4 ist ein Befehlszeilenschnittstellentool, das uns dabei helfen kann, ein Projektgerüst zu erstellen, eine sofort einsatzbereite Konfiguration bereitzustellen und schnell eine Vue.js-Anwendung zu erstellen.

Wenn Sie Vue CLI 4 noch nicht installiert haben, öffnen Sie ein Konsolenfenster und geben Sie den folgenden Befehl ein:

npm install -g @vue/cli

Während des Installationsvorgangs werden Sie möglicherweise aufgefordert, Ihr Administratorkennwort einzugeben.

Nachdem die Installation abgeschlossen ist, können wir eine neue Vue.js-Anwendung erstellen. Bitte geben Sie im Konsolenfenster den folgenden Befehl ein:

vue create my-vue-app

Dieser Befehl erstellt ein neues Projekt mit dem Namen „my-vue-app“. Während der Projekterstellung können Sie wählen, ob Sie die Standardeinstellungen verwenden oder diese nach Bedarf ändern möchten.

3. Führen Sie die Vue.js-Anwendung aus.

Nach Abschluss der Erstellung der Vue.js-Anwendung können wir das Stammverzeichnis der Anwendung aufrufen und den folgenden Befehl ausführen, um den Entwicklungsserver zu starten:

cd my-vue-app
npm run serve

Dieser Befehl wird gestartet einen lokalen Webdienst, damit Sie Ihre Vue.js-Anwendung auf Ihrem lokalen Computer ausführen können.

Geben Sie http://localhost:8080/ in Ihren Browser ein, um die Anwendung zu öffnen.

4. Beginnen Sie mit dem Schreiben von Vue.js-Anwendungen

Jetzt sind wir bereit, mit dem Schreiben von Vue.js-Anwendungen zu beginnen. In Vue.js 3.0 ist die Art und Weise, wie Sie Ihre Anwendung definieren, etwas anders als zuvor.

Hier ist ein einfaches Beispiel, das eine Schaltfläche anzeigt und beim Klicken eine Meldung auf dem Bildschirm angezeigt wird:

<template>
  <div>
    <button @click="showMessage">显示消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: ''
    })

    function showMessage() {
      state.message = '欢迎来到 Vue 3.0!'
    }

    return {
      ...state,
      showMessage
    }
  }
}
</script>

Sie können diesen Code kopieren und in die Datei my-vue-app/src/App.vue einfügen und dann Speichern Sie die Datei.

Während die App läuft, sehen Sie eine Schaltfläche. Wenn Sie auf die Schaltfläche klicken, erscheint auf dem Bildschirm die Meldung „Willkommen bei Vue 3.0!“.

5. Zusammenfassung

Vue.js 3.0 bringt viele Verbesserungen und Änderungen, um das Framework benutzerfreundlicher und effizienter zu machen. In diesem Artikel haben wir beschrieben, wie Sie Vue 3.0 installieren und verwenden und wie Sie Anwendungen mit der neuen Vue.js 3.0-Syntax schreiben. Ich hoffe, dieser Artikel war hilfreich und beginnen Sie mit der Erstellung Ihrer nächsten Webanwendung mit Vue.js 3.0!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue direkt nach dem Update. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!