Condividi tramite


Esercitazione: Vue.js per principianti

Se non si ha familiarità con l'uso di Vue.js, questa guida consentirà di iniziare illustrando alcuni concetti di base.

Prerequisiti

Provare NodeJS con Visual Studio Code

Se non si è già fatto, installare Visual Studio Code. È consigliabile installare VS Code in Windows, indipendentemente dal fatto che si intenda usare Vue in Windows o WSL.

  1. Aprire la riga di comando e creare una nuova directory: mkdir HelloVue, quindi immettere la directory: cd HelloVue

  2. Installare l'interfaccia della riga di comando di Vue: npm install -g @vue/cli

  3. Creare l'app Vue: vue create hello-vue-app

    È necessario scegliere se usare Vue 2 o Vue 3 Preview o selezionare manualmente le funzionalità desiderate.

    Set di impostazioni dell'interfaccia della riga di comando di Vue

  4. Aprire la directory della nuova app hello-vue-app: cd hello-vue-app

  5. Provare a eseguire la nuova app Vue nel Web browser: npm run serve

    Nel browser dovrebbe essere visualizzato il messaggio "Ti diamo il benvenuto nell'app Vue.js" in http://localhost:8080 nel browser. È possibile premere Ctrl+C per arrestare il server vue-cli-service.

    Nota

    Se si usa WSL (con Ubuntu o la distribuzione L inux preferita) per questa esercitazione, è necessario assicurarsi di installare Remote - WSL Extension per un'esperienza ottimale di esecuzione e modifica del codice con il server remoto di Visual Studio.

  6. Provare ad aggiornare il messaggio di benvenuto aprendo il codice sorgente dell'app Vue in Visual Studio Code, immettere: code .

  7. Visual Studio Code avvierà e visualizzerà l'applicazione Vue in Esplora file. Eseguire di nuovo l'app nel terminale con npm run serve e fare in modo che il Web browser sia aperto al localhost in modo da visualizzare la pagina iniziale di Vue. Trovare il file App.vue in Visual Studio Code. Provare a modificare "Ti diamo il benvenuto nell'app Vue.js" in "Ti diamo il benvenuto nella giungla". Verrà visualizzata l'app Vue in "ricaricamento rapido" non appena si salva la modifica.

    Ricaricamento rapido dell'app Vue in caso di modifica gif animata

Risorse aggiuntive