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

125

Ich habe gerade die Befehlszeile ( CLI) verwendet, um ein Vue.js-Projekt zu initialisieren. Der CLIerstellte a src/componentsund src/viewsOrdner.

Es ist ein paar 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 viewsund componentsin einem Vue-Projekt, mit dem generiert wurde vue-cli?

drsnark
quelle
4
Ich denke nicht, dass sie sich in dem Sinne unterscheiden, dass sie beide Einzeldatei-Ansichtskomponenten sind. Aber Ihre Seitenaufrufe (Home.vue, About.vue, Checkout.vue) können von Ihren Komponenten (Button.vue, LoadingSpinner.vue usw.) getrennt gehalten werden
Jeff
Dies wirft ein
connexo
10
@ Jeff bist du ein Politiker, wenn nicht, solltest du es sein. Sie haben gerade die Ops-Frage wiederholt, aber es ist Ihnen gelungen, sie wie eine Antwort aussehen zu lassen. LOL.
PrestonDocks

Antworten:

172

Zunächst enthalten beide Ordner src/componentsund src/viewsVue-Komponenten.

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

Beim Routing in Vue, normalerweise mit Vue Router , werden Routen definiert, um die aktuelle Ansicht zu wechseln, die in der <router-view>Komponente verwendet wird. Diese Routen befinden sich normalerweise an 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 src/componentsist weniger wahrscheinlich, dass die unter befindlichen Komponenten auf einer Route verwendet werden, während unter befindliche Komponenten src/viewsauf mindestens einer Route verwendet werden.


Vue CLI soll die Standardwerkzeugbasis für das Vue-Ökosystem sein. Es stellt sicher, dass die verschiedenen Build-Tools reibungslos mit sinnvollen Standardeinstellungen zusammenarbeiten, sodass Sie sich auf das Schreiben Ihrer App konzentrieren können, anstatt tagelang mit Konfigurationen zu streiten. Gleichzeitig bietet es weiterhin die Flexibilität, die Konfiguration jedes Tools zu optimieren, ohne dass ein Auswerfen erforderlich ist.

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 zu ermöglichen, ein neues Projekt einzurichten und loszulegen.

Letztendlich geht es um Bequemlichkeit und Anwendungsstruktur .

  • Einige Leute mögen ihre Ansichten haben , Ordner unter src/routerwie dieses Unternehmen vorformulierten.
  • Einige Leute nennen es Seiten statt Ansichten .
  • Einige Leute haben alle ihre Komponenten unter demselben Ordner.

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

Ricky
quelle
6
Das ist 100% richtig. Sie können Ihre App so strukturieren, wie es für Sie sinnvoll ist. Ich persönlich benutze "src / pages" für alle Routen. In diesem Ordner werde ich einen Unterordner für jeden "Bereich" der Site erstellen. Beispiel "src / pages / question" und in diesem Ordner habe ich eine index.vue, die die Liste der Fragen enthält. Ich werde eine add.vue haben, die die Seite zum Hinzufügen von Fragen usw. sein wird. Diese "Seiten" setzen normalerweise einfach die erforderlichen Komponenten zusammen, um die "Seite" zu bilden. In meinem Ordner "src / components" werde ich Unterordner für Dinge wie Navigation, Formularelemente, benutzerdefinierte freigegebene Komponenten usw. erstellen.
Tim Wickstrom
Ich gehe davon aus, dass Komponenten wie Popup- / Modal-Fenster nach src/componentsdieser Konvention verwendet werden.
Simon Thiel
@ Ricky, darf ich Sie bitten, sich eine Vue.JS-Frage anzusehen, die sich auf den Quellcode in Github des Buches 'Full-Stack Vue.js 2 und Laravel 5' von Anthone Gore bezieht : stackoverflow.com/questions/ 59245577 /… ?
Werfen
Können wir sagen, dass die Komponenten in Ansichten eine Sammlung von Komponenten sind? Zum Beispiel kann meine Listenansicht mehrere Komponenten haben und diese Komponenten sind in einer einzelnen Komponente in der Ansicht untergebracht / verpackt?
Aayush
19

Ich denke, es ist eher eine Konvention. Etwas, das wiederverwendbar ist, kann im Ordner src / components gespeichert werden. Etwas, das an den Router gebunden ist, kann in src / views gespeichert werden

Ravi
quelle
1
100% stimmen dem zu!
Timactive
5

Im Allgemeinen wird empfohlen, wiederverwendbare Ansichten im src/componentsVerzeichnis abzulegen. Beispiele wie Kopf-, Fuß-, Anzeigen-, Raster- oder benutzerdefinierte Steuerelemente wie Textfelder oder Schaltflächen mit Stil. Auf eine oder mehrere Komponenten kann innerhalb einer Ansicht zugegriffen werden.

Eine Ansicht kann Komponenten enthalten, und auf eine Ansicht soll eigentlich über die Navigations-URL zugegriffen werden. Sie werden in der Regel in platziert src/views.

Denken Sie daran, dass Sie nicht gezwungen sind, über die URL auf die Komponenten zuzugreifen. Sie können jede Komponente hinzufügen router.jsund auch darauf zugreifen. Wenn Sie dies jedoch beabsichtigen, können Sie es auf eine verschieben, src/viewsanstatt es zu platzieren src/components.

Komponenten sind Benutzersteuerelemente in Analogie zu asp.net-Webformularen.

Es geht nur darum, Ihren Code für eine bessere Wartung und Lesbarkeit zu strukturieren.

navule
quelle
0

Beide Ordner sind im Grunde genommen gleich, da sie beide Komponenten enthalten. Die Ästhetik von Vue besteht jedoch darin, dass Komponenten, die als Seiten fungieren (zur Navigation an eine ähnliche Seite weitergeleitet), im Ordner / views gespeichert werden, während wiederverwendbare Komponenten wie Formularfelder beibehalten werden den Ordner / components

Chinedu Chaz
quelle