So erstellen Sie ein Projekt in Vue 3.0

Die offizielle Version von Vue3.0 wurde im September 2020 veröffentlicht und bringt viele Verbesserungen mit sich, die es Entwicklern ermöglichen, Vue-Anwendungen flexibler und effizienter zu schreiben. In diesem Artikel erfahren Sie, wie Sie Projekte in Vue 3.0 erstellen.

1. Vue CLI installieren

Zuerst müssen wir Vue CLI lokal installieren. Vue CLI ist ein offiziell von Vue bereitgestelltes Gerüsttool, mit dem schnell Vorlagen für Vue-Anwendungen generiert werden können.

Führen Sie den folgenden Befehl in der Befehlszeile aus, um Vue CLI zu installieren:

npm install -g @vue/cli

2. Vue-Projekt erstellen

Nach der Installation von Vue CLI können wir die bereitgestellten Befehle verwenden, um schnell ein Vue-Projekt zu erstellen.

Führen Sie den folgenden Befehl in der Befehlszeile aus, um ein neues Vue 3.0-Projekt zu erstellen:

vue create my-project

Wobei mein-projekt der Projektname ist.

Nachdem Sie den obigen Befehl ausgeführt haben, werden Sie von der Vue-CLI aufgefordert, die zu installierenden Funktionen auszuwählen. Sie können die Aufwärts- und Abwärtspfeiltasten verwenden, um Eigenschaften auszuwählen, und die Leertaste, um Eigenschaften auszuwählen/abzuwählen. Wir können die Standardkonfiguration wählen.

3. Ausführen des Vue-Projekts

Nachdem wir das Vue-Projekt erstellt haben, können wir den folgenden Befehl verwenden, um die Anwendung zu starten:

npm run serve

Dieser Befehl kompiliert das Projekt und startet den lokalen Server. Nachdem der Server gestartet ist, können Sie auf die Anwendung zugreifen, indem Sie http://localhost:8080 in Ihrem Browser aufrufen.

4. Vue-Komponenten schreiben

In Vue 3.0 werden Komponenten anders geschrieben als in Vue 2.x. Komponenten in Vue 3.0 bestehen aus einer einzelnen setup()-Funktion anstelle der einzelnen Dateikomponenten in Vue 2.x.

Das Folgende ist ein einfaches Beispiel für eine Vue 3.0-Komponente:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return {
      message
    }
  }
}
</script>

Wie Sie sehen können, verwenden wir die Funktion setup(), um den logischen Teil der Komponente zu erstellen, und stellen die responsive Funktion ref() von Vue 3.0 vor.

5. Interaktion mit der API

In Vue 3.0 können wir die beiden neuen APIs von Vue verwenden – Composition API und APIs, um mit der API zu interagieren. Die Composition API bietet eine bequemere Möglichkeit, den Code von Komponenten zu schreiben und zu organisieren, während die APIs die Möglichkeit bieten, direkt mit Vue-Instanzen zu interagieren.

Das Folgende ist ein Beispiel für die Verwendung der Composition-API zur Interaktion mit der API:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Axios from 'axios'

export default {
  setup() {
    const message = ref('')
    onMounted(() => {
      Axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
        message.value = response.data.title
      })
    })
    return {
      message
    }
  }
}
</script>

Im obigen Beispiel haben wir die Funktionen ref() und onMounted() verwendet, um eine reaktionsfähige Nachrichtenvariable zu erstellen und sie auf der Komponente zu mounten Axios, um API-Daten abzurufen und den zurückgegebenen Titel der Nachrichtenvariablen zuzuweisen.

6. Fazit

Vue 3.0 bringt viele Verbesserungen und neue Funktionen mit sich und macht die Vue-Anwendungsentwicklung effizienter und flexibler. In diesem Artikel haben wir gelernt, wie Sie mit Vue CLI schnell ein Vue 3.0-Projekt erstellen und eine einfache Vue-Komponente erstellt haben, um die Komponentenschreibmethode und die API-Interaktionsmethode in Vue 3.0 zu demonstrieren.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Projekt in Vue 3.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!