Skip to content

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

Prerequisiti

  • Familiarità con la linea di comando / terminale
  • Avere installato Node.js versione 16.0 o superiore

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:

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:

html
<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:

html
<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>

Demo Codepen

html
<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>

Demo Codepen

TIP

In tutta la guida molti degli esempi per la Composition API utilizzeranno la sintassi <script setup>, che richiede degli strumenti di build. Se intendi utilizzare la Composition API senza un preventivo passaggio di build consulta l'uso dell'opzione setup().

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:

html
<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>
html
<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:

js
import { createApp } from 'vue'

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

html
<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>

Demo Codepen

html
<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>

Demo Codepen

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

Supporto dei Browser per le Import Maps

Le Import Maps sono una funzionalità relativamente nuova del browser. Assicurati di utilizzare un browser che possa supportare le Import Maps. Al momento è supportata solo da Safari 16.4+.

Note sull'uso in produzione

Gli esempi visti finora usano la build di sviluppo di Vue - se intendi utilizzare Vue da una CDN in produzione, assicurati di consultare la Guida al Rilascio in Produzione.

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:

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

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

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}
js
// 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.

Avvio rapido has loaded