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?

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.

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

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.

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