Ho appena usato la riga di comando ( CLI) per inizializzare un progetto Vue.js. La cartella e CLIcreata .src/componentssrc/views

Sono passati alcuni mesi da quando ho lavorato con un progetto Vue e la struttura delle cartelle mi sembra nuova.

Qual è la differenza tra le cartelle viewse componentsin un progetto Vue generato con vue-cli?

Prima di tutto, entrambe le cartelle src/componentse src/viewscontengono i componenti Vue.

La differenza fondamentale è che alcuni componenti di Vue agiscono come viste per il routing.

Quando si ha a che fare con il routing in Vue, di solito con Vue Router , i percorsi vengono definiti per cambiare la vista corrente utilizzata nel <router-view>componente. Questi percorsi si trovano in genere in src/router/routes.js, dove possiamo vedere qualcosa di simile a questo:

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

I componenti situati sotto src/componentshanno meno probabilità di essere utilizzati in un percorso, mentre i componenti situati sotto src/viewssaranno utilizzati da almeno un percorso.

Vue CLI mira a essere la linea di base degli strumenti standard per l'ecosistema Vue. Assicura che i vari strumenti di compilazione funzionino senza problemi insieme a valori predefiniti ragionevoli in modo che tu possa concentrarti sulla scrittura della tua app invece di passare giorni a discutere con le configurazioni. Allo stesso tempo, offre ancora la flessibilità di modificare la configurazione di ogni strumento senza la necessità di espellerlo.

Vue CLI mira allo sviluppo rapido di Vue.js, mantiene le cose semplici e offre flessibilità. Il suo obiettivo è consentire a team di diversi livelli di abilità di impostare un nuovo progetto e iniziare.

Alla fine della giornata, è una questione di praticità e struttura dell'applicazione .

• Ad alcune persone piace avere la loro cartella Visualizzazioni sotto src/routercome questo boilerplate aziendale.
• Alcune persone lo chiamano Pagine invece di Visualizzazioni .
• Alcune persone hanno tutti i loro componenti nella stessa cartella.

Scegli la struttura dell'applicazione più adatta al progetto su cui stai lavorando.

Penso che sia più una convenzione. Qualcosa che è riutilizzabile può essere conservato nella cartella src / components qualcosa che è legato al router può essere tenuto in src / views

Generalmente si consiglia di inserire visualizzazioni riutilizzabili src/components directory. Esempi come Intestazione, Piè di pagina, Annunci, Griglie o qualsiasi altro controllo personalizzato come pulsanti o caselle di testo con stile. È possibile accedere a uno o più componenti all'interno di una vista.

Una vista può avere componenti e si intende effettivamente accedere a una vista tramite l'URL di navigazione. Generalmente vengono inseriti insrc/views .

Ricorda che non sei vincolato ad accedere ai Componenti tramite url. Sei libero di aggiungere qualsiasi componente a router.jse di accedervi. Ma se hai intenzione di farlo, puoi spostarlo in un src/viewsinvece di inserirlo src/components.

I componenti sono controlli utente in analogia ai moduli Web asp.net.

Si tratta solo di strutturare il codice per una migliore manutenzione e leggibilità.

Entrambe le cartelle sono fondamentalmente le stesse poiché contengono entrambe componenti, ma l'estetica di Vue è che i componenti che funzioneranno come pagine (indirizzate a una pagina simile per la navigazione) sono mantenuti nella /viewscartella, mentre i componenti riutilizzabili come i campi modulo sono conservati nella /componentscartella .