close

Installazione di Vue.js e creazione del tuo primo progetto

Per installare Vue.js, puoi seguire i passaggi seguenti:

Passaggio 1: crea una nuova directory per il tuo progetto e apri il terminale in quella directory.

Passaggio 2: utilizzare npm per installare Vue CLI(Command Line Interface) eseguendo il seguente comando:

npm install -g @vue/cli


Passaggio 3: dopo aver eseguito correttamente l'installazione, è possibile creare un nuovo progetto Vue utilizzando il seguente comando:

vue create my-vue-project


Passaggio 4: scegli le opzioni di configurazione per il tuo progetto, inclusa l'installazione di pre-processori Babel, ESLint e CSS(facoltativo).

Passaggio 5: una volta completato il processo di creazione del progetto, navigare nella directory del progetto utilizzando il comando:

cd my-vue-project


Passaggio 6: eseguire il seguente comando per avviare il progetto Vue:

npm run serve


Al termine del processo di avvio, vedrai un URL per accedere alla tua applicazione Vue sul browser.

Un semplice esempio di Vue.js:

Creiamo un nuovo file HTML e chiamiamolo index.html `. In questo file, aggiungi il seguente codice:

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>

In questo esempio, abbiamo creato una semplice applicazione Vue con un h1 tag e un pulsante. Quando si fa clic sul pulsante, il messaggio cambierà.

Salva il index.html  file e aprilo nel browser. Vedrai il messaggio iniziale come "Ciao Vue.js!". Quando fai clic sul pulsante, il messaggio cambierà in "Messaggio modificato con successo!".

Questo è solo un semplice esempio per iniziare con Vue.js. Puoi esplorare molte altre funzionalità e potenti capacità di Vue.js durante lo sviluppo delle tue applicazioni.