Primi passi con Vue.js

Facciamo i primi passi con Vue.js, dopo la sua installazione e aver creato un nuovo progetto utilizzando Vue CLI, come spiegato nella lezione precedente: installare Vue.js.

Aprendo dunqur la cartella del progetto o esaminandola in VSCode si nota la struttura di base che include diversi file e cartelle che costituiscono l’infrastruttura di base per lo sviluppo del progetto con Vue.js.

Contenuto della cartella del progetto

La cartella principale che rappresenta il progetto Vue, con il nome specificato durante la creazione del progetto stesso, ha all’interno alcuni file e cartelle. Ecco cosa si troverà di solito:

1. File package.json: Questo file contiene le informazioni relative al progetto, come il nome, la versione, le dipendenze e gli script npm per eseguire operazioni come l’avvio del server di sviluppo.
2. Cartella node_modules: Questa cartella contiene tutte le dipendenze del progetto Vue.js, inclusi Vue.js stesso e altri pacchetti utilizzati nel progetto. Questi pacchetti sono installati automaticamente tramite npm durante la creazione del progetto.
3. Cartella public: Una cartella contenente file statici che saranno accessibili pubblicamente, come HTML, immagini e altri asset.
4. Cartella src: La cartella principale del codice sorgente del nostro progetto Vue.js. Contiene file come componenti Vue, file di stile, immagini e altri asset.
5. File App.vue: Questo file rappresenta il componente radice dell’applicazione Vue.js. Qui viene definita la struttura principale dell’applicazione e possono essere inclusi altri componenti Vue.
6. File main.js: Questo è il file di entry point dell’applicazione Vue.js. Viene utilizzato per inizializzare e montare l’istanza principale dell’applicazione Vue.
7. .gitignore: è un file di configurazione utilizzato da Git per specificare i file e le cartelle che devono essere ignorati durante il processo di versionamento del codice. Questo significa che i file elencati nel file .gitignore non verranno tracciati da Git e non verranno inclusi nei commit. Ad esempio, il file .gitignore può essere utilizzato per ignorare la cartella node_modules e altri file associati alle dipendenze del progetto.
8. Altri file di configurazione: Altri file di configurazione come .babelrc, .eslintrc, ecc., che sono utilizzati per configurare il progetto Vue.js secondo le esigenze specifiche del progetto.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Primi passi con Vue.js – dipendenze

Con il termine di dipendenze ci riferiamo ai componenti, ai moduli o alle librerie esterne su cui il progetto software si basa per funzionare correttamente. Le dipendenze possono includere codice di terze parti, librerie esterne, plugin o moduli personalizzati che il tuo progetto utilizza per aggiungere funzionalità, risolvere problemi o integrarsi con altri sistemi. Al nostro progetto Vue.js ad esempio potremmo inserire dipendenze da altre librerie JavaScript o CSS esterne, come jQuery, Bootstrap, Axios per le chiamate API, ecc.

Gestiremo le dipendenze attraverso gestori di pacchetti come npm (Node Package Manager) o yarn. Questi strumenti, infatti, consentono di installare, aggiornare e rimuovere facilmente le dipendenze del progetto, garantendo che il nostro progetto abbia accesso alle librerie e ai moduli necessari per funzionare correttamente.

Primi passi con Vue.js – Babel

Babel è uno strumento di compilazione JavaScript utilizzato nella comunità di sviluppo web. Il suo scopo principale è quello di convertire il codice JavaScript che utilizza le ultime specifiche ECMAScript in una versione compatibile con i browser più vecchi, in modo che gli sviluppatori possano utilizzare le ultime caratteristiche del linguaggio senza preoccuparsi della compatibilità dei browser.

In definitiva Babel consente agli sviluppatori di utilizzare le ultime caratteristiche di JavaScript, anche se non sono completamente supportate da tutti i browser. Come ad esempio l’utilizzo di sintassi più recenti come arrow function, template literals, spread operator e altro ancora.

Primi passi con Vue.js – Eslint

ESLint è uno strumento di linting. Il linting è un processo di analisi statica del codice sorgente e serve ad individuare potenziali errori, problemi di sintassi, e violazioni delle regole di stile definite.

Quindi ESLint analizza il codice JavaScript per individuare potenziali errori, bug, e problemi di sintassi, segnalando gli errori direttamente nell’editor di codice o nella console durante il processo di sviluppo. È estremamente flessibile e può essere configurato per adattarsi alle esigenze specifiche di un progetto o di un team di sviluppo.

Conclusione

Dopo aver mosso i primi passi con Vue.js, creato il progetto ed esaminato la struttura di base, saremo in grado di provare a sviluppare la nostra applicazione Vue.js, scrivendo codice nei file del progetto e utilizzando gli strumenti e le librerie disponibili nell’ecosistema di Vue.

Alcuni link utili

Corso linguaggio JavaScript

Libro JavaScript

Tutorial JavaScript

Versione rivisitata del gioco dell’impiccato: divertiti ad indovinare le parole ed impara a sviluppare uno dei giochi più famosi.

Slot Machine: segui una guida passo passo per imparare a svilupparne una semplicissima slot machine da zero.

Quiz interattivo: un quiz che permette di testare le conoscenze su determinati argomenti.

Memoria del colore: una sfida divertente che mette alla prova la memoria visiva e la capacità di ricordare sequenze di colori sempre più complesse.

Memory Game: Un’avvincente sfida di concentrazione e memoria!