Anatomia di una applicazione Vue.js

Nel precedente post abbiamo creato lo scheletro della nostra applicazione utilizzando la comoda CLI a disposizione.

Ora diamo un’occhiata alla struttura del progetto.

Prima di tutto nella root troviamo il file package.json che tiene traccia di tutti i pacchetti di Node.js richiesti dall’applicazione. Quindi il file .gitignore e la cartella .git visto che è già impostato un repository locale.

La cartella node_modules contiene tutti i pacchetti installati ed occupa la maggior quantità di spazio sul disco. Ovviamente non occorre distribuirne il contenuto con il codice sorgente.

Relativamente a Vue.js la cartella public include il file index.html che viene visualizzato quando accediamo al server.

Ha una struttura ridotta all’osso: presenta solo un singolo elemento <div> con id=”app” e al suo interno verrà “iniettato” il codice prodotto da Vue.js.

Nella cartella src troviamo tutti i file sorgente ed in particolare il file main.js che inizializza l’applicazione e ne rappresenta l’entrypoint.

Vediamo le poche righe da cui è costituito

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

Dopo aver incluso il modulo Vue e il componente principale App, viene creata una istanza del framework, impostando il render  sul componente App montato nel DOM su #app a sua volta utilizzato nel file index.html che abbiamo già visto.

Ricapitolando: App.vue è il componente principale che verrà iniettato nel file index.html in corrispondenza del tag <div id=”app”></div>. Gli altri componenti sviluppati andranno opportunamente inclusi in App.vue.

Ciascun componente di Vue.js, incluso nella cartella components,  è costituito da un file con estensione .vue avente una struttura costituita da tre blocchi delimitati da altrettanti tag:

  • <template></template> contenente la parte html che verrà visualizzata
  • <script></script> contenente il codice javascript relativo alla logica del componente
  • <style></style> contenente il codice css

La scelta di includere tutto il necessario in un singolo file è criticata da alcuni perchè violerebbe il principio di “separation of concerns”. Tuttavia risulta molto comodo per includere un componente all’interno di un’applicazione.

Per convenzione i nomi dei componenti sono in PascalCase ovvero se costituiti da più parole queste ultime cominciano per maiuscola: ad esempio PlayerTable e non playerTable. Viceversa quando i componenti si utilizzano nel blocco <template> si adotta il Kebab Case ovvero <player-table></player-table>.

Lascia una risposta

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Utilizzando il sito, accetti l'invio dei cookies da parte nostra. Maggiori informazioni

Questo sito utilizza i cookies per fornire la migliore esperienza di navigazione possibile. Continuando ad utilizzarlo senza modificare le impostazioni o cliccando su "Accetta" acconsenti al loro utilizzo.

Chiudi