close

Vue.js:n asentaminen ja ensimmäisen projektisi luominen

Voit asentaa Vue.js:n seuraavasti:

Vaihe 1: Luo uusi hakemisto projektillesi ja avaa terminaali kyseisessä hakemistossa.

Vaihe 2: Asenna Vue CLI(Command Line Interface) npm:n avulla suorittamalla seuraava komento:

npm install -g @vue/cli


Vaihe 3: Onnistuneen asennuksen jälkeen voit luoda uuden Vue-projektin seuraavalla komennolla:

vue create my-vue-project


Vaihe 4: Valitse projektillesi kokoonpanoasetukset, mukaan lukien Babelin, ESLint- ja CSS-esisuorittimien asentaminen(valinnainen).

Vaihe 5: Kun projektin luontiprosessi on valmis, siirry projektihakemistoon komennolla:

cd my-vue-project


Vaihe 6: Käynnistä Vue-projekti suorittamalla seuraava komento:

npm run serve


Kun käynnistysprosessi on valmis, näet URL-osoitteen, jolla pääset Vue-sovellukseesi selaimessa.

Yksinkertainen esimerkki Vue.js:stä:

Luodaan uusi HTML-tiedosto ja nimetään se index.html `. Lisää tähän tiedostoon seuraava koodi:

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>

Tässä esimerkissä olemme luoneet yksinkertaisen Vue-sovelluksen tunnisteella h1 ja painikkeella. Kun painiketta painetaan, viesti muuttuu.

Tallenna index.html  tiedosto ja avaa se selaimessa. Näet ensimmäisen viestin muodossa "Hei Vue.js!". Kun napsautat painiketta, viesti muuttuu viestiksi "Viesti muutettu onnistui!".

Tämä on vain yksinkertainen esimerkki, jolla pääset alkuun Vue.js:n kanssa. Voit tutkia monia muita Vue.js:n ominaisuuksia ja tehokkaita ominaisuuksia kehittäessäsi sovelluksiasi.