close

Installere Vue.js og lage ditt første prosjekt

For å installere Vue.js kan du følge trinnene nedenfor:

Trinn 1: Opprett en ny katalog for prosjektet ditt og åpne terminalen i den katalogen.

Trinn 2: Bruk npm til å installere Vue CLI(Command Line Interface) ved å kjøre følgende kommando:

npm install -g @vue/cli


Trinn 3: Etter vellykket installasjon kan du opprette et nytt Vue-prosjekt ved å bruke følgende kommando:

vue create my-vue-project


Trinn 4: Velg konfigurasjonsalternativer for prosjektet ditt, inkludert installasjon av Babel-, ESLint- og CSS-forprosessorer(valgfritt).

Trinn 5: Når prosjektopprettingsprosessen er fullført, naviger inn i prosjektkatalogen ved å bruke kommandoen:

cd my-vue-project


Trinn 6: Kjør følgende kommando for å starte Vue-prosjektet:

npm run serve


Etter at oppstartsprosessen er fullført, vil du se en URL for å få tilgang til Vue-applikasjonen din i nettleseren.

Et enkelt eksempel på Vue.js:

La oss lage en ny HTML-fil og gi den navnet index.html `. I denne filen legger du til følgende kode:

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 eksemplet har vi laget en enkel Vue-applikasjon med en h1 tag og en knapp. Når du klikker på knappen, vil meldingen endres.

Lagre index.html  filen og åpne den i nettleseren. Du vil se den første meldingen som "Hello Vue.js!". Når du klikker på knappen, endres meldingen til "Meldingen ble endret!".

Dette er bare et enkelt eksempel for å komme i gang med Vue.js. Du kan utforske mange flere funksjoner og kraftige funksjoner til Vue.js mens du utvikler applikasjonene dine.