web-dev-qa-db-de.com

Was ist der Unterschied zwischen den Ansichten und den Komponentenordnern in einem Vue Projekt?

Ich habe gerade die Befehlszeile (CLI) verwendet, um ein Vue.js-Projekt zu initialisieren. Das CLI hat einen Ordner src/components Und src/views Erstellt.

Es ist einige Monate her, seit ich mit einem Vue Projekt gearbeitet habe und die Ordnerstruktur scheint mir neu zu sein.

Was ist der Unterschied zwischen den Ordnern views und components in einem Vue - Projekt, das mit vue-cli generiert wurde?

58
drsnark

Zunächst enthalten beide Ordner src/components Und src/views Vue) - Komponenten.

Der Hauptunterschied besteht darin, dass einige Vue Komponenten als Views für das Routing fungieren.

Beim Routing in Vue, normalerweise mit Vue Router , werden Routen definiert, um das Routing zu wechseln current view wird in der Komponente <router-view> verwendet. Diese Routen befinden sich normalerweise bei src/router/routes.js, Wo wir so etwas sehen können:

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,
  },
]

Es ist weniger wahrscheinlich, dass die unter src/components Befindlichen Komponenten in einer Route verwendet werden, während unter src/views Befindliche Komponenten von mindestens einer Route verwendet werden.


Vue CLI soll die Standardwerkzeugbasis für das Vue=) - Ökosystem sein. Es stellt sicher, dass die verschiedenen Build-Werkzeuge reibungslos mit vernünftigen Standardeinstellungen zusammenarbeiten, sodass Sie sich darauf konzentrieren können, Ihre App zu schreiben, anstatt Tage mit Konfigurationen zu verbringen Gleichzeitig bietet es weiterhin die Flexibilität, die Konfiguration der einzelnen Tools zu optimieren, ohne sie auswerfen zu müssen.

Vue CLI zielt auf eine schnelle Entwicklung von Vue.j ab, hält die Dinge einfach und bietet Flexibilität. Ziel ist es, Teams mit unterschiedlichen Fähigkeiten die Möglichkeit zu geben, ein neues Projekt einzurichten und loszulegen.

Am Ende des Tages ist es eine Frage der Bequemlichkeit und der Anwendungsstruktur .

  • Einige Leute möchten ihren Views-Ordner unter src/router Haben, wie dieses Enterprise-Boilerplate.
  • Einige Leute nennen es Pages anstelle von Views.
  • Einige Benutzer haben alle ihre Komponenten im selben Ordner.

Wählen Sie die Anwendungsstruktur, die am besten zu dem Projekt passt, an dem Sie arbeiten.


Bonus: Dan Abramov empfiehlt diesen Dateistruktur für React and Vue projects.

91
Ricky

Ich denke, es ist eher eine Konvention. Etwas, das wiederverwendbar ist, kann im Ordner src/components aufbewahrt werden. Etwas, das mit dem Router verbunden ist, kann im Ordner src/views aufbewahrt werden

7
Ravi