close

Installieren Sie Vue.js und erstellen Sie Ihr erstes Projekt

Um Vue.js zu installieren, können Sie die folgenden Schritte ausführen:

Schritt 1: Erstellen Sie ein neues Verzeichnis für Ihr Projekt und öffnen Sie das Terminal in diesem Verzeichnis.

Schritt 2: Verwenden Sie npm, um Vue CLI(Command Line Interface) zu installieren, indem Sie den folgenden Befehl ausführen:

npm install -g @vue/cli


Schritt 3: Nach erfolgreicher Installation können Sie mit dem folgenden Befehl ein neues Vue-Projekt erstellen:

vue create my-vue-project


Schritt 4: Wählen Sie Konfigurationsoptionen für Ihr Projekt, einschließlich der Installation von Babel, ESLint und CSS-Präprozessoren(optional).

Schritt 5: Sobald der Projekterstellungsprozess abgeschlossen ist, navigieren Sie mit dem folgenden Befehl in das Projektverzeichnis:

cd my-vue-project


Schritt 6: Führen Sie den folgenden Befehl aus, um das Vue-Projekt zu starten:

npm run serve


Nachdem der Startvorgang abgeschlossen ist, wird im Browser eine URL für den Zugriff auf Ihre Vue-Anwendung angezeigt.

Ein einfaches Beispiel für Vue.js:

Erstellen wir eine neue HTML-Datei und nennen sie index.html „. Fügen Sie in dieser Datei den folgenden Code hinzu:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

In diesem Beispiel haben wir eine einfache Vue-Anwendung mit einem h1 Tag und einer Schaltfläche erstellt. Wenn Sie auf die Schaltfläche klicken, ändert sich die Meldung.

Speichern Sie die index.html  Datei und öffnen Sie sie im Browser. Die erste Nachricht wird als „Hallo Vue.js!“ angezeigt. Wenn Sie auf die Schaltfläche klicken, ändert sich die Meldung in „Nachricht erfolgreich geändert!“.

Dies ist nur ein einfaches Beispiel, um Ihnen den Einstieg in Vue.js zu erleichtern. Sie können bei der Entwicklung Ihrer Anwendungen viele weitere Funktionen und leistungsstarke Funktionen von Vue.js erkunden.