Creazione di una prima app in Vue 3

Esistono diverse opzioni per aggiungere un progetto Vue 3 personale.

Le due opzioni sono:

• Vue CLI
• Vite

Vue CLI

Se hai sviluppato Vue in passato, probabilmente hai utilizzato l' interfaccia a riga di comando di Vue per impostare il tuo progetto.

Vue CLI è un'interfaccia a riga di comando per lo sviluppo di Vue che funge da base dell'ecosistema Vue. Nel nostro caso, ci consente di creare un'app Vue.

Innanzitutto, dobbiamo assicurarci di disporre della versione più aggiornata della Vue CLI e possiamo farlo eseguendo  npm update -g @vue/cli sul nostro terminale.

Successivamente, per creare il nostro progetto digitiamo vue create <PROJECT-NAME>

Se abbiamo aggiornato correttamente la nostra CLI, dovremmo avere un'opzione per scegliere Vue 3.

Una volta scelta l'opzione Vue 3, la nostra app dovrebbe essere creata. Al termine, non ci resta che entrare nel nostro progetto ed eseguire la nostra app Vue! I comandi per questo sono:

 cd <PROJECT-NAME>
 npm run serve

Ora, se navighiamo nel nostro browser all'indirizzo http://localhost:8080/ dovremmo vedere la nostra app!

Vite

Vite (pronunciato come "veet") è un nuovo strumento di creazione di Vue 3 che serve il codice utilizzando le importazioni del modulo ES durante lo sviluppo invece di raggruppare utilizzando uno strumento come il webpack.

Creato dai creatori di Vue, accelera notevolmente l'overhead di sviluppo.

Vite elimina il processo di raggruppamento compilando solo il codice su richiesta, il che significa che viene compilato solo il codice che attualmente influisce sulla schermata corrente. Ciò significa che non devi aspettare che l'intero progetto venga raggruppato per iniziare a svilupparsi.

Poiché il raggruppamento di grandi progetti potrebbe richiedere molto tempo, Vite ha un alto potenziale per accelerare il processo di sviluppo.

Vediamo come iniziare un nuovo progetto con esso:

npm create vite@latest

Quindi, non ci resta che andare nella nostra cartella del progetto, installare le nostre dipendenze e quindi eseguire la nostra app con i seguenti comandi

Quindi, non ci resta che andare nella nostra cartella del progetto, installare le nostre dipendenze e quindi eseguire la nostra app con i seguenti comandi:

 cd 
 npm install
 npm run dev

Ora, se navighiamo verso http://localhost:3000, dovremmo vedere questa app seguente.