close

Vue.js installeren en uw eerste project maken

Om Vue.js te installeren, kunt u de onderstaande stappen volgen:

Stap 1: Maak een nieuwe map aan voor uw project en open de terminal in die map.

Stap 2: Gebruik npm om Vue CLI(Command Line Interface) te installeren door de volgende opdracht uit te voeren:

npm install -g @vue/cli


Stap 3: Na een succesvolle installatie kunt u een nieuw Vue-project maken met behulp van de volgende opdracht:

vue create my-vue-project


Stap 4: Kies configuratie-opties voor uw project, inclusief het installeren van Babel, ESLint en CSS Pre-processors(optioneel).

Stap 5: Nadat het proces voor het maken van het project is voltooid, navigeert u naar de projectdirectory met behulp van de opdracht:

cd my-vue-project


Stap 6: Voer de volgende opdracht uit om het Vue-project te starten:

npm run serve


Nadat het opstartproces is voltooid, ziet u een URL voor toegang tot uw Vue-applicatie in de browser.

Een eenvoudig voorbeeld van Vue.js:

Laten we een nieuw HTML-bestand maken en het een naam geven index.html `. Voeg in dit bestand de volgende code toe:

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 dit voorbeeld hebben we een eenvoudige Vue-applicatie gemaakt met een h1 tag en een knop. Wanneer op de knop wordt geklikt, verandert het bericht.

Sla het index.html  bestand op en open het in de browser. U ziet het eerste bericht als "Hallo Vue.js!". Wanneer u op de knop klikt, verandert het bericht in "Bericht gewijzigd!".

Dit is slechts een eenvoudig voorbeeld om u op weg te helpen met Vue.js. U kunt veel meer functies en krachtige mogelijkheden van Vue.js verkennen terwijl u uw applicaties ontwikkelt.