So strukturieren Sie ein Vue.js-Projekt

Die perfekte Ordnerstruktur und Komponentenarchitektur von Vue.js mit intelligenten und dummen Komponenten

Vue.js ist mehr als ein Hype, es ist ein großartiges Frontend-Framework. Es ist ganz einfach, damit zu beginnen und eine Web-App zu erstellen. Vue.js wird oft als Framework für kleine Apps und manchmal sogar als Alternative zu jQuery beschrieben, da es sehr klein ist! Ich persönlich denke, dass es auch für größere Projekte geeignet ist. In diesem Fall ist es wichtig, es in Bezug auf die Komponentenarchitektur gut zu strukturieren.

Bevor ich mein erstes großes Vue.js-Projekt startete, habe ich einige Nachforschungen angestellt, um die perfekte Ordnerstruktur, Komponentenarchitektur und Namenskonvention zu finden. Ich habe die Vue.js-Dokumentation, einige Artikel und viele GitHub-Open-Source-Projekte durchgesehen.

Ich musste Antworten auf einige meiner Fragen finden. Das finden Sie in diesem Beitrag:

  • Wie strukturieren Sie die Dateien und Ordner im Projekt Vue.js?
  • Wie schreibst du Smart and Dumb-Komponenten und wo platzierst du sie? Es ist ein Konzept von React.
  • Was sind der Codierungsstil und die Best Practices von Vue.j?

Ich werde auch mit der Quelle, von der ich mich inspirieren ließ, und anderen Links dokumentieren, um ein besseres Verständnis zu erlangen.

Vue.js Ordnerstruktur

Hier ist der Inhalt des src-Ordners. Ich empfehle Ihnen, das Projekt mit Vue CLI zu starten. Ich persönlich habe die Standard-Webpack-Vorlage verwendet.

.
├── app.css
├── App.vue
├── Vermögenswerte
│ │ ...
├── Komponenten
│ │ ...
├── main.js
├── mixins
│ │ ...
├── Router
│ └── index.js
├── speichern
│ ├── index.js
│ ├── Module
│ │ └── ...
│ │ mutation-types.js
├── Übersetzungen
│ └── index.js
├── Utensilien
│ │ ...
└── Ansichten
    └── ...

Einige Details zu jedem dieser Ordner:

  • Assets - Hier legen Sie alle Assets ab, die in Ihre Komponenten importiert werden
  • Komponenten - Alle Komponenten der Projekte, bei denen es sich nicht um die Hauptansichten handelt
  • mixins - Die Mixins sind die Teile des Javascript-Codes, die in verschiedenen Komponenten wiederverwendet werden. In einem Mixin können Sie die Methoden jeder Komponente aus Vue.js einfügen. Sie werden mit denen der Komponente zusammengeführt, die sie verwendet.
  • router - Alle Routen Ihrer Projekte (in meinem Fall habe ich sie in der index.js). Grundsätzlich ist in Vue.js alles eine Komponente. Aber nicht alles ist eine Seite. Eine Seite hat eine Route wie "/ dashboard", "/ settings" oder "/ search". Wenn eine Komponente eine Route hat, wird sie weitergeleitet.
  • store (optional) - Die Vuex-Konstanten in mutation-type.js, die Vuex-Module in den Unterordnermodulen (die dann in index.js geladen werden).
  • Übersetzungen (optional) - Locales-Dateien, ich verwende Vue-i18n, und es funktioniert ziemlich gut.
  • utils (optional) - Funktionen, die ich in einigen Komponenten verwende, z. B. Regex-Wertetests, Konstanten oder Filter.
  • Ansichten - Um das Projekt schneller lesbar zu machen, trenne ich die gerouteten Komponenten und füge sie in diesen Ordner ein. Die Komponenten, die für mich weitergeleitet werden, sind mehr als nur eine Komponente, da sie Seiten darstellen und über Routen verfügen. Ich habe sie dann in „Ansichten“ platziert, wenn Sie eine Seite überprüfen, wechseln Sie in diesen Ordner.

Sie können je nach Bedarf weitere Ordner hinzufügen, z. B. Filter oder Konstanten, API.

Einige Ressourcen, von denen ich inspiriert wurde

  • 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

Intelligente gegen dumme Komponenten mit Vue.js

Intelligente und dumme Komponenten sind ein Konzept, das ich von React gelernt habe. Intelligente Komponenten werden auch Container genannt. Sie sind diejenigen, die mit Zustandsänderungen umgehen. Sie sind dafür verantwortlich, wie die Dinge funktionieren. Im Gegenteil, die dummen Komponenten, auch Präsentationskomponenten genannt, übernehmen nur das Erscheinungsbild.

Wenn Sie mit MVC-Mustern vertraut sind, können Sie Sicherungskomponenten mit der Ansicht und intelligente Komponenten mit dem Controller vergleichen!

In React werden intelligente und dumme Komponenten normalerweise in verschiedenen Ordnern abgelegt, während Sie sie in Vue.js alle in demselben Ordner ablegen: components. Zur Unterscheidung in Vue.js verwenden Sie eine Namenskonvention. Nehmen wir an, Sie haben eine dumme Kartenkomponente. Dann sollten Sie einen der folgenden Namen verwenden:

  • BaseCard
  • AppCard
  • VCard

Wenn Sie eine intelligente Komponente haben, die BaseCard verwendet und ihr einige Methoden hinzufügt, können Sie sie abhängig von Ihrem Projekt beispielsweise benennen:

  • ProfileCard
  • ItemCard
  • NewsCard

Wenn Ihre Smart-Komponente nicht nur eine „intelligentere“ BaseCard mit Methoden ist, verwenden Sie einfach einen beliebigen Namen, der zu Ihrer Komponente passt, ohne mit Base (oder App oder V) zu beginnen. Beispiel:

  • DashboardStatistics
  • Suchergebnisse
  • Benutzerprofil

Diese Namenskonvention stammt aus dem offiziellen Styleguide von Vue.j, der auch Namenskonventionen enthält!

Regeln der Namensgebung

Hier sind einige Konventionen aus dem offiziellen Styleguide von Vue.j, die Sie benötigen, um Ihr Projekt gut zu strukturieren:

  • Komponentennamen sollten immer aus mehreren Wörtern bestehen, mit Ausnahme der Root-App-Komponenten. Verwenden Sie beispielsweise "UserCard" oder "ProfileCard" anstelle von "Card".
  • Jede Komponente sollte sich in einer eigenen Datei befinden.
  • Dateinamen von Single-File-Komponenten sollten entweder immer PascalCase oder immer Kebab-case sein. Verwenden Sie "UserCard.vue" oder "user-card.vue".
  • Komponenten, die nur einmal pro Seite verwendet werden, sollten mit dem Präfix "The" beginnen, um anzuzeigen, dass es nur eine geben kann. Für eine Navigationsleiste oder eine Fußzeile sollten Sie beispielsweise "TheNavbar.vue" oder "TheFooter.vue" verwenden.
  • Untergeordnete Komponenten sollten ihren übergeordneten Namen als Präfix enthalten. Wenn Sie beispielsweise eine "Foto" -Komponente in der "UserCard" verwenden möchten, nennen Sie sie "UserCardPhoto". Dies dient der besseren Lesbarkeit, da die Dateien in einem Ordner normalerweise alphabetisch sortiert sind.
  • Verwenden Sie im Namen Ihrer Komponenten immer den vollständigen Namen anstelle der Abkürzung. Verwenden Sie beispielsweise nicht "UDSettings", sondern "UserDashboardSettings".

Vue.js offizieller Styleguide

Unabhängig davon, ob Sie mit Vue.js fortgeschritten oder Anfänger sind, sollten Sie diesen Vue.js-Styleguide lesen. Er enthält viele Tipps und auch Namenskonventionen. Es enthält viele Beispiele für Dinge, die zu tun und nicht zu tun sind.

Wenn dir dieser Beitrag gefallen hat, klicke bitte ein paar Mal auf den Klatsch-Button unten, um deine Unterstützung zu zeigen! Fühlen Sie sich auch frei zu kommentieren und geben Sie jede Art von Feedback. Vergiss nicht, mir zu folgen!

Möchten Sie weitere Artikel wie diesen sehen? Unterstütze mich auf Patreon