Wéi een Vue.js Projet strukturéiert

Déi perfekt Ordner Struktur an Komponentarchitektur vu Vue.js mat intelligenten an dommen Komponenten

Méi wéi Hype, Vue.js ass e super Frontend Framework. Et ass einfach ze starten an eng Web App ze kreéieren. Vue.js gëtt dacks als e Kader fir kleng Apps beschriwwen an heiansdo och als eng Alternativ zu jQuery well et ganz kleng ass! Perséinlech denken ech datt et och fir méi grouss Projete gëeegent ass. An dësem Fall ass et wichteg et gutt ze strukturéieren a Saache Komponentarchitektur.

Ier ech mäin éischte grousse Vue.js Projet gestart hunn, hunn ech recherchéiert fir déi perfekt Ordner Struktur, Komponentarchitektur a Benennungskonventioun ze fannen. Ech hunn duerch d'Vue.js Dokumentatioun gekuckt, e puer Artikelen, a vill GitHub Open Source Projeten.

Ech hat Äntwerten op e puer vu menge Froen ze fannen. Dir fannt dat an dësem Post:

  • Wéi strukturéiert Dir d'Dateien an d'Dossieren am Vue.js Projet?
  • Wéi schreift Dir intelligent an domm Komponenten a wou placéiert Dir se? Et ass e Konzept vu React.
  • Wat sinn Vue.j's Kodéierungsstil a beschten Praktiken?

Ech wäert och dokumentéieren mat der Quell vun där ech mech inspiréiert hunn an aner Links fir e bessert Verständnis ze kréien.

Vue.js Dossier Struktur

Hei sinn d'Inhalter vum src Ordner. Ech empfeelen Iech de Projet mat Vue CLI ze starten. Perséinlech hunn ech d'Standard Webpack Template benotzt.

. ├── app.css ├── App.vue ├── Assets │ │ ... ├── Komponenten │ │ ... ├── main.js ├── mixins │ │ ... ├── Router │ └── index.js ├── späichert │ ├── index.js │ ├── Module │ │ └── ... │ │ mutation-types.js ├── Iwwersetzungen │ └── index.js ├─ ─ Geschir │ │ ... └── Meenung └── ...

E puer Detailer iwwer all eenzel vun dësen Ordner:

  • Assets - Dëst ass wou Dir all d'Verméigen setzen déi an Är Komponenten importéiert ginn
  • Komponenten - All Komponente vun de Projeten déi net d'Haaptvisiounen sinn
  • mixins - D'Mixins sinn d'Stécker vum Javascript Code déi a verschiddene Komponente weiderbenotzt ginn. An engem Mixin kënnt Dir d'Methode vun all Komponent aus Vue.js. Si gi mat deene vun der Komponent fusionéiert déi se benotzt.
  • Router - All d'Route vun Äre Projeten (a mengem Fall hunn ech se am index.js). Prinzipiell ass alles an Vue.js eng Komponent. Awer net all ass eng Säit. Eng Säit huet eng Route wéi "/ Dashboard", "/ Settings" oder "/ search". Wann e Volet e Wee huet, gëtt en weidergeleet.
  • store (optional) - D'Vuex-Konstanten an der mutation-type.js, d'Vuex-Moduler an de Sub-Ordner Moduler (déi dann an index.js gelueden ginn).
  • Iwwersetzungen (optional) - Lokal Dateien, ech benotze Vue-i18n an et funktionnéiert relativ gutt.
  • utils (optional) - Funktiounen déi ech a verschidde Komponente benotzen, z. B. Regex Wäerttester, Konstanten oder Filteren.
  • Views - Fir de Projet méi einfach ze liesen, trennen ech déi routéiert Komponenten an setzen se an dësen Dossier. Déi Komponente déi fir mech geleet gi si méi wéi nëmmen e Volet an deem se Säiten duerstellen an Weeër hunn. Ech hunn se dunn a "Views" geluecht, wann Dir eng Säit iwwerpréift, wiesselt op dësen Dossier.

Dir kënnt aner Ordner bäifüügen wéi néideg, z. B. Filter oder Konstanten, API.

E puer Ressourcen déi mech inspiréiert hunn

  • https://vuex.vuejs.org/de/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Smart versus domm Komponente mat Vue.js

Smart an domm Komponente sinn e Konzept dat ech vum React geléiert hunn. Intelligent Komponente ginn och Container genannt. Si sinn déi, déi sech mat Staatsännerunge beschäftegen. Dir sidd verantwortlech fir wéi d'Saachen funktionnéieren. Am Géigendeel, déi domm Komponenten, och Presentatiounskomponente genannt, iwwerhuelen nëmmen d'Erscheinung.

Wann Dir mat MVC Mustere vertraut sidd, kënnt Dir Backupkomponente mat der Sicht vergläichen a Smart Komponente mam Controller!

A Reagéiere ginn intelligent an domm Komponenten normalerweis a verschidde Classeure gesat, wärend a Vue.js se all an deeselwechten Dossier setzen: Komponenten. Benotzt eng Benennungskonventioun fir z'ënnerscheeden an Vue.js. Loosst eis soen datt Dir eng domm Kaart Komponent hutt. Da sollt Dir ee vun de folgenden Nimm benotzen:

  • BaseCard
  • AppKaart
  • VCard

Wann Dir e Smart Komponent hutt deen BaseCard benotzt an e puer Methoden derbäi bäifüügt, kënnt Dir en nennen jee no Ärem Projet zum Beispill:

  • Profilkaart
  • ArtikelKaart
  • NewsCard

Wann Äre Smart Komponent net nëmmen eng "intelligent" BaseCard mat Methoden ass, benotzt just all Numm deen Ärem Komponent passt ouni mat Base (oder App oder V) unzefänken. Beispill:

  • DashboardStatistiken
  • Sichresultater
  • Benotzer Profil

Dës Benennungskonventioun kënnt aus dem offiziellen Stylguide vu Vue.j, deen och Benennungskonventiounen enthält!

Regele vum Benennung

Hei sinn e puer Konventiounen aus dem offiziellen Vue.j Stil Guide, deen Dir braucht fir Äre Projet gutt ze strukturéieren:

  • Komponentennimm sollten ëmmer aus méi Wierder bestoen, mat Ausnam vun de Root App Komponenten. Zum Beispill benotzt "UserCard" oder "ProfileCard" amplaz "Card".
  • All Komponent soll a sengem eegene Fichier sinn.
  • Dateinumm vun eenzel Dateikomponente solle entweder ëmmer PascalCase oder ëmmer Kebab-Fall sinn. Benotzt "UserCard.vue" oder "user-card.vue".
  • Komponenten déi nëmmen eemol pro Säit benotzt ginn, solle mam Präfix "The" ufänken fir unzeginn datt et nëmmen eng ka sinn. Zum Beispill, fir eng Navigatiounsbar oder Fousszeilen, benotzt TheNavbar.vue oder TheFooter.vue.
  • Kandkomponente sollten hiren Elterennumm virginn. Zum Beispill, wann Dir eng "Foto" Komponent an der "UserCard" benotze wëllt, nennt et "UserCardPhoto". Dëst ass fir besser Liesbarkeet, well d'Fichieren an engem Dossier normalerweis alphabetesch sortéiert sinn.
  • Benotzt ëmmer de kompletten Numm amplaz vun der Ofkierzung am Numm vun Äre Komponenten. Zum Beispill benotzt net "UDSettings" awer "UserDashboardSettings".

Vue.js offiziellen Styl Guide

Egal ob Dir mat Vue.js oder engem Ufänger fortgeschratt sidd, dëse Vue.js Styl Guide sollt gelies ginn. Et enthält vill Tipps an och Nimm vu Konventiounen. Et enthält vill Beispiller vu Saachen ze maachen an net ze maachen.

Wann Dir dëse Post genoss hutt, klickt w.e.g. op e Klatsch hei ënnen e puer Mol fir Är Ënnerstëtzung ze weisen! Och fillt sech gratis ze kommentéieren an all Zort Feedback ze ginn. Vergiesst net mech ze verfollegen!

Wëllt Dir méi Saache wéi dës gesinn? Ënnerstëtz mech op Patreon