close

Instaliranje Vue.js i stvaranje vašeg prvog projekta

Da biste instalirali Vue.js, možete slijediti korake u nastavku:

Korak 1: Napravite novi direktorij za svoj projekt i otvorite terminal u tom direktoriju.

Korak 2: Koristite npm da instalirate Vue CLI(sučelje naredbenog retka) pokretanjem sljedeće naredbe:

npm install -g @vue/cli


Korak 3: Nakon uspješne instalacije, možete stvoriti novi Vue projekt pomoću sljedeće naredbe:

vue create my-vue-project


Korak 4: Odaberite opcije konfiguracije za svoj projekt, uključujući instaliranje Babel, ESLint i CSS pretprocesora(izborno).

Korak 5: Nakon što je proces stvaranja projekta dovršen, idite u direktorij projekta pomoću naredbe:

cd my-vue-project


Korak 6: Pokrenite sljedeću naredbu za pokretanje Vue projekta:

npm run serve


Nakon završetka postupka pokretanja, vidjet ćete URL za pristup vašoj Vue aplikaciji u pregledniku.

Jednostavan primjer Vue.js:

Kreirajmo novu HTML datoteku i nazovimo je index.html `. U ovu datoteku dodajte sljedeći kod:

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>

U ovom smo primjeru izradili jednostavnu Vue aplikaciju s h1 oznakom i gumbom. Kada se gumb klikne, poruka će se promijeniti.

Spremite index.html  datoteku i otvorite je u pregledniku. Vidjet ćete početnu poruku kao "Hello Vue.js!". Kada kliknete gumb, poruka će se promijeniti u "Poruka je uspješno promijenjena!".

Ovo je samo jednostavan primjer za početak rada s Vue.js. Možete istražiti mnogo više značajki i snažnih mogućnosti Vue.js dok razvijate svoje aplikacije.