close

Installation af Vue.js og oprettelse af dit første projekt

For at installere Vue.js kan du følge nedenstående trin:

Trin 1: Opret en ny mappe til dit projekt og åbn terminalen i den mappe.

Trin 2: Brug npm til at installere Vue CLI(Command Line Interface) ved at køre følgende kommando:

npm install -g @vue/cli


Trin 3: Efter vellykket installation kan du oprette et nyt Vue-projekt ved hjælp af følgende kommando:

vue create my-vue-project


Trin 4: Vælg konfigurationsmuligheder for dit projekt, inklusive installation af Babel, ESLint og CSS Pre-processors(valgfrit).

Trin 5: Når projektoprettelsesprocessen er fuldført, skal du navigere ind i projektbiblioteket ved hjælp af kommandoen:

cd my-vue-project


Trin 6: Kør følgende kommando for at starte Vue-projektet:

npm run serve


Efter opstartsprocessen er fuldført, vil du se en URL for at få adgang til din Vue-applikation i browseren.

Et simpelt eksempel på Vue.js:

Lad os oprette en ny HTML-fil og navngive den index.html `. Tilføj følgende kode i denne fil:

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>

I dette eksempel har vi lavet en simpel Vue-applikation med et h1 tag og en knap. Når der trykkes på knappen, ændres meddelelsen.

Gem index.html  filen og åbn den i browseren. Du vil se den indledende besked som "Hej Vue.js!". Når du klikker på knappen, ændres meddelelsen til "Meddelelsen blev ændret!".

Dette er blot et simpelt eksempel for at komme i gang med Vue.js. Du kan udforske mange flere funktioner og kraftfulde muligheder i Vue.js, mens du udvikler dine applikationer.