Come strutturare un progetto Vue.js

La perfetta struttura di cartelle e architettura dei componenti Vue.js con componenti intelligenti e stupidi

Vue.js è più di un hype, è un ottimo framework di frontend. È abbastanza facile iniziare con esso e creare un'app Web. Vue.js è spesso descritto come un framework per piccole app e talvolta anche come alternativa a jQuery a causa delle sue piccole dimensioni! Personalmente penso che possa adattarsi anche a progetti più grandi e, in questo caso, è importante strutturarlo bene, in termini di architettura dei componenti.

Prima di iniziare il mio primo grande progetto Vue.js, ho fatto alcune ricerche per trovare la struttura delle cartelle, l'architettura dei componenti e la convenzione di denominazione perfetti. Ho esaminato la documentazione di Vue.js, alcuni articoli e molti progetti open source GitHub.

Avevo bisogno di trovare le risposte ad alcune domande che avevo. Questo è ciò che troverai in questo post:

  • Come strutturi i file e le cartelle all'interno del progetto Vue.js?
  • Come scrivi i componenti Smart e Dumb e dove li metti? È un concetto che viene da React.
  • Quali sono lo stile di codifica Vue.js e le migliori pratiche?

Documenterò anche con la fonte da cui mi sono ispirato e altri collegamenti per capire meglio.

Struttura delle cartelle Vue.js

Ecco il contenuto della cartella src. Ti consiglio di avviare il progetto con Vue CLI. Ho usato personalmente il modello Webpack predefinito.

.
├── app.css
├── App.vue
├── beni
│ └── ...
├── componenti
│ └── ...
├── main.js
├── mixins
│ └── ...
├── router
│ └── index.js
├── negozio
│ ├── index.js
│ ├── moduli
│ │ └── ...
│ └── mutation-types.js
├── traduzioni
│ └── index.js
├── utils
│ └── ...
└── opinioni
    └── ...

Alcuni dettagli su ciascuna di queste cartelle:

  • risorse: dove inserire tutte le risorse importate nei componenti
  • componenti: tutti i componenti dei progetti che non sono le viste principali
  • mixins: i mixin sono le parti del codice javascript che vengono riutilizzate in diversi componenti. In un mixin puoi inserire i metodi di qualsiasi componente da Vue.js che verranno uniti a quelli del componente che lo utilizza.
  • router - Tutti i percorsi dei tuoi progetti (nel mio caso li ho in index.js). Fondamentalmente in Vue.js tutto è un componente. Ma non tutto è una pagina. Una pagina ha un percorso come “/ dashboard”, “/ settings” o “/ search”. Se un componente ha una route, viene instradato.
  • store (opzionale) - Le costanti Vuex in mutation-type.js, i moduli Vuex nei moduli delle sottocartelle (che vengono quindi caricati in index.js).
  • traduzioni (opzionale) - File locali, io uso Vue-i18n e funziona abbastanza bene.
  • utils (opzionale) - Funzioni che utilizzo in alcuni componenti, come test del valore regex, costanti o filtri.
  • visualizzazioni: per rendere più veloce la lettura del progetto, separo i componenti che vengono instradati e li inserisco in questa cartella. I componenti che sono instradati per me sono più di un componente poiché rappresentano pagine e hanno percorsi, li metto in "viste" quindi quando controlli una pagina vai in questa cartella.

Alla fine puoi aggiungere altre cartelle a seconda delle tue necessità come filtri o costanti, API.

Alcune risorse da cui mi sono ispirato

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Componenti intelligenti e stupidi con Vue.js

Componenti intelligenti e stupidi è un concetto che ho imparato da React. I componenti intelligenti sono anche chiamati contenitori, sono quelli che gestiscono i cambiamenti di stato, sono responsabili di come funzionano le cose. Al contrario, i componenti stupidi, chiamati anche presentazioni, gestiscono solo l'aspetto.

Se hai familiarità con il modello MVC, puoi confrontare i componenti di dump con View e i componenti smart con il Controller!

In React i componenti intelligenti e stupidi vengono generalmente inseriti in cartelle diverse, mentre in Vue.js li metti tutti nella stessa cartella: componenti. Per differenziare in Vue.js utilizzerai una convenzione di denominazione. Supponiamo che tu abbia un componente carta stupida, quindi dovresti usare uno di questi nomi:

  • BaseCard
  • AppCard
  • VCard

Se si dispone di un componente intelligente che utilizza BaseCard e aggiunge alcuni metodi, ad esempio è possibile denominarlo, a seconda del progetto:

  • ProfileCard
  • ItemCard
  • NewsCard

Se il tuo componente smart non è solo una BaseCard “più intelligente” con metodi, usa semplicemente un nome adatto al tuo componente e senza iniziare con Base (o App o V), ad esempio:

  • DashboardStatistics
  • Risultati di ricerca
  • Profilo utente

Questa convenzione di denominazione proviene dalla styleguide ufficiale di Vue.js che contiene anche convenzioni di denominazione!

Convenzioni di denominazione

Ecco alcune convenzioni provenienti dalla styleguide ufficiale di Vue.js che devi strutturare bene il tuo progetto:

  • I nomi dei componenti devono sempre essere composti da più parole, ad eccezione dei componenti radice "App". Ad esempio, utilizzare "UserCard" o "ProfileCard" anziché "Card".
  • Ogni componente dovrebbe essere nel suo file.
  • I nomi dei file dei componenti a file singolo devono essere sempre PascalCase o sempre kebab-case. Utilizzare "UserCard.vue" o "user-card.vue".
  • I componenti che vengono utilizzati una sola volta per pagina dovrebbero iniziare con il prefisso "The", per indicare che può essercene solo uno. Ad esempio per una barra di navigazione o un piè di pagina è necessario utilizzare "TheNavbar.vue" o "TheFooter.vue".
  • I componenti figlio devono includere il nome principale come prefisso. Ad esempio, se si desidera utilizzare un componente "Foto" nella "UserCard", si chiamerà "UserCardPhoto". È per una migliore leggibilità poiché i file in una cartella sono in genere in ordine alfabetico.
  • Utilizzare sempre il nome completo anziché l'abbreviazione nel nome dei componenti. Ad esempio, non utilizzare "UDSettings", utilizzare invece "UserDashboardSettings".

Styleguide ufficiale di Vue.js

Che tu sia un principiante o un principiante con Vue.js, dovresti leggere questa styleguide Vue.js, che contiene molti suggerimenti e anche convenzioni di denominazione. Contiene molti esempi di cose da fare e da non fare.

Se ti è piaciuto questo post, fai clic alcune volte sul pulsante cla per mostrare il tuo supporto! Inoltre, sentiti libero di commentare e dare qualsiasi tipo di feedback. Non dimenticare di seguirmi!

Vuoi vedere altri articoli come questo? Sostienimi su Patreon