Avvio rapido ​

Prova Vue Online ​

• Per avere un rapido assaggio di Vue, puoi provarlo direttamente nel nostro Playground.

• Se preferisci un'installazione HTML semplice senza dover effettuare prima una build, puoi utilizzare questo JSFiddle come punto di partenza.

• Se hai già familiarità con Node.js e conosci gli strumenti di build (building tools), puoi anche provare una configurazione completa direttamente nel tuo browser su StackBlitz.

Creare un'applicazione Vue ​

In questa sezione vedremo come creare una Vue Single Page Application in locale, sulla tua macchina. Il progetto creato utilizzerà una configurazione di build basata su Vite e ci permetterà di usare i Single-File Components (SFCs, componenti a Singolo File) di Vue.

Assicurati di avere installato una versione aggiornata di Node.js e che la tua cartella di lavoro corrente sia quella in cui intendi creare un progetto. Esegui il seguente comando nella tua linea di comando (senza il simbolo >):

> npm create vue@latest

Questo comando installerà ed eseguirà create-vue, lo strumento ufficiale per la creazione di un progetto Vue (Scaffolding). Ti verranno presentate delle richieste per diverse funzionalità opzionali come il supporto a TypeScript e ai test:

✔ Project name: … <il-nome-del-tuo-progetto>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<il-nome-del-tuo-progetto>...
Done.

Se non sei sicuro di un'opzione, per ora scegli semplicemente No premendo invio. Una volta creato il progetto, segui le istruzioni per installare le dipendenze e avviare il server di sviluppo:

> cd <il-nome-del-tuo-progetto>
> npm install
> npm run dev

Adesso dovresti avere il tuo primo progetto Vue in esecuzione! Nota che i componenti di esempio nel progetto generato sono scritti utilizzando la Composition API e <script setup>, al posto della Options API. Ecco alcuni consigli aggiuntivi:

• La configurazione IDE consigliata è Visual Studio Code + estensione Volar. Se utilizzi altri editor consulta la sezione supporto IDE.
• Altri dettagli sugli strumenti, compresa l'integrazione con i framework di backend, sono discussi nella Guida agli strumenti.
• Per saperne di più su Vite, lo strumento di build, consulta la documentazione di Vite.
• Se scegli di usare TypeScript consulta la Guida all'uso di TypeScript.

Quando sei pronto per rilasciare la tua app in produzione, esegui il seguente comando:

> npm run build

Questo creerà una versione dell'app pronta per la produzione nella cartella ./dist del progetto. Consulta la Guida al Rilascio in Produzione per saperne di più su come rilasciare la tua app in produzione.

Prossimi Passi >

Utilizzo di Vue da CDN ​

Puoi utilizzare Vue direttamente da una CDN tramite un tag script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Qui stiamo utilizzando unpkg, ma puoi utilizzare qualsiasi CDN che serve pacchetti npm, per esempio jsdelivr o cdnjs. E naturalmente, puoi anche scaricare questo file e "servirlo" tu stesso.

Quando si utilizza Vue da una CDN, non c'è un "passaggio di build". Questo rende tutto più semplice ed è un buon modo per migliorare l'HTML statico o l'integrazione con un framework di backend. Tuttavia, non sarai in grado di utilizzare la sintassi dei Single-File Component (SFC).

Utilizzo della Build Globale ​

Il link sopra carica la global build di Vue, dove tutte le API di livello superiore sono esposte come proprietà sull'oggetto Vue globale. Ecco un esempio completo che utilizza la build globale:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Utilizzo di Build ES Module ​

Nel resto della documentazione utilizzeremo principalmente la sintassi dei moduli ES. La maggior parte dei moderni browser ora supporta nativamente i moduli ES, così possiamo utilizzare Vue tramite moduli ES nativi serviti da una CDN, in questo modo:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Nota che stiamo utilizzando <script type="module"> e l'URL della CDN punta alla build del modulo ES di Vue.

Abilitare le Import maps ​

Nell'esempio sopra importiamo dall'intera URL della CDN, ma nel resto della documentazione vedrai codice come questo:

import { createApp } from 'vue'

Possiamo indicare al browser dove trovare l'import di vue usando le Import Maps:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Puoi aggiungere alla import map anche voci per altre dipendenze, ma assicurati che puntino alla versione dei moduli ES della libreria che intendi utilizzare.

Suddividere i moduli ​

Man mano che procediamo nella guida, potrebbe essere necessario dividere il nostro codice in file JavaScript separati per renderne la gestione più semplice. Ad esempio:

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>count is {{ count }}</div>`
}

Se apri direttamente nel tuo browser il file index.html indicato qui sopra, noterai che restituisce un errore perché i moduli ES non possono funzionare sul protocollo file://, che è il protocollo che il browser utilizza quando chiedi di aprire un file locale.

Per motivi di sicurezza i moduli ES possono funzionare solo sul protocollo http://, che è quello che i browser utilizzano quando aprono pagine web. Affinché i moduli ES funzionino sul nostro computer locale, dobbiamo servire la index.html sul protocollo http:// tramite un server HTTP locale.

Per avviare un server HTTP locale, assicurati di avere installato Node.js, poi, nella stessa cartella dove si trova il tuo file HTML, esegui npx serve dalla linea di comando. Puoi usare anche qualsiasi altro server HTTP in grado di servire i file statico con i tipi MIME corretti.

Potresti aver notato che il template del componente importato è inserito come stringa JavaScript. Se stai utilizzando VSCode puoi installare l'estensione es6-string-html e, in questo caso, usare come prefisso per la stringa il commento /*html*/ per evidenziare la sintassi.

Prossimi passi ​

Se hai saltato l'Introduzione, ti consigliamo vivamente di leggerla prima di passare al resto della documentazione.