Impostazione del primo progetto Vue.js

Vue.js è un framework JavaScript progressivo per la creazione di interfacce utente e applicazioni a pagina singola. È altamente flessibile e facile da integrare con altre librerie o progetti esistenti. Questa guida ti guiderà attraverso i passaggi per impostare il tuo primo progetto Vue.js utilizzando Vue CLI, un potente strumento per l'impalcatura e la gestione delle applicazioni Vue.

Prerequisiti

Prima di impostare un progetto Vue.js, assicurati di aver installato sul tuo sistema quanto segue:

• Node.js e npm: Vue.js richiede che Node.js e npm (Node Package Manager) siano installati. Puoi scaricarli dal sito web ufficiale di Node.js.

Passaggio 1: installare Vue CLI

Vue CLI (Command Line Interface) è uno strumento che ti aiuta a creare e gestire progetti Vue.js con facilità. Per installare Vue CLI globalmente sul tuo sistema, apri il tuo terminale o prompt dei comandi ed esegui il seguente comando:

npm install -g @vue/cli

Questo comando installa la CLI di Vue a livello globale, consentendo di accedere al comando vue da qualsiasi punto del terminale.

Passaggio 2: creare un nuovo progetto Vue

Una volta installato Vue CLI, puoi creare un nuovo progetto Vue.js eseguendo il seguente comando:

vue create my-vue-app

Ti verrà chiesto di scegliere un preset per il tuo progetto. Puoi selezionare il preset predefinito, che include Babel ed ESLint, oppure selezionare manualmente funzionalità come Vue Router, Vuex, TypeScript e altro. Per i principianti, si consiglia di scegliere il preset predefinito premendo Invio.

Vue CLI creerà quindi una nuova cartella denominata my-vue-app e imposterà la struttura del progetto con tutti i file e le configurazioni necessarie.

Passaggio 3: vai alla cartella del progetto

Una volta creato il progetto, accedi alla cartella del progetto utilizzando il seguente comando:

cd my-vue-app

Questo cambierà la directory di lavoro del tuo terminale nella cartella del progetto Vue.js appena creata.

Passaggio 4: eseguire il server di sviluppo

Per vedere la tua nuova applicazione Vue.js in azione, avvia il server di sviluppo locale eseguendo:

npm run serve

Questo comando avvierà un server di sviluppo su http://localhost:8080 (o ​​un'altra porta disponibile). Apri il tuo browser web e vai a questo URL per visualizzare la tua nuova applicazione Vue.js.

Comprendere la struttura del progetto

Dopo aver creato un nuovo progetto Vue.js, vedrai una struttura di progetto ben organizzata. Ecco i file e le cartelle chiave:

• src: Questa cartella contiene il codice sorgente per la tua applicazione Vue.js. Tutti i componenti, le viste e gli stili si trovano qui.
• public: Questa cartella contiene risorse statiche quali immagini, caratteri e il file index.html, che funge da punto di ingresso per l'applicazione.
• src/main.js: Il punto di ingresso principale per la tua applicazione Vue.js. Questo file inizializza l'istanza Vue e la monta sul DOM.
• src/App.vue: Il componente radice della tua applicazione. Puoi modificare questo file per cambiare il layout principale della tua app.
• src/components: Questa cartella contiene componenti Vue di esempio come HelloWorld.vue. Puoi aggiungere nuovi componenti qui e importarli nella tua applicazione.

Passaggio 5: personalizza la tua applicazione

Puoi iniziare a personalizzare la tua applicazione Vue.js modificando il file App.vue e creando nuovi componenti. Ecco un esempio di un semplice componente Vue:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Salva le modifiche e visualizza immediatamente i risultati nel tuo browser, grazie alla funzione di ricaricamento a caldo di Vue.

Conclusione

Congratulazioni! Hai configurato con successo il tuo primo progetto Vue.js e hai imparato le basi su come creare ed eseguire un'applicazione Vue. Con Vue CLI, hai a disposizione un potente strumento per aiutarti a creare scaffold, sviluppare e gestire i tuoi progetti Vue.js. Da qui, puoi esplorare funzionalità più avanzate come Vue Router per il routing, Vuex per la gestione dello stato e Composition API per uno sviluppo più potente e flessibile.