close

Instalarea Vue.js și crearea primului proiect

Pentru a instala Vue.js, puteți urma pașii de mai jos:

Pasul 1: Creați un nou director pentru proiectul dvs. și deschideți terminalul din acel director.

Pasul 2: Utilizați npm pentru a instala Vue CLI(Command Line Interface) rulând următoarea comandă:

npm install -g @vue/cli


Pasul 3: După instalarea cu succes, puteți crea un nou proiect Vue folosind următoarea comandă:

vue create my-vue-project


Pasul 4: Alegeți opțiunile de configurare pentru proiectul dvs., inclusiv instalarea preprocesoarelor Babel, ESLint și CSS(opțional).

Pasul 5: Odată ce procesul de creare a proiectului este finalizat, navigați în directorul proiectului folosind comanda:

cd my-vue-project


Pasul 6: Rulați următoarea comandă pentru a porni proiectul Vue:

npm run serve


După finalizarea procesului de pornire, veți vedea o adresă URL pentru a vă accesa aplicația Vue în browser.

Un exemplu simplu de Vue.js:

Să creăm un nou fișier HTML și să-l denumim index.html `. În acest fișier, adăugați următorul cod:

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>

În acest exemplu, am creat o aplicație Vue simplă cu o h1 etichetă și un buton. Când se face clic pe butonul, mesajul se va schimba.

Salvați index.html  fișierul și deschideți-l în browser. Veți vedea mesajul inițial ca „Bună ziua Vue.js!”. Când faceți clic pe butonul, mesajul se va schimba în „Mesajul a fost schimbat cu succes!”.

Acesta este doar un exemplu simplu pentru a începe să utilizați Vue.js. Puteți explora mai multe funcții și capabilități puternice ale Vue.js în timp ce vă dezvoltați aplicațiile.