Sådan struktureres et Vue.js-projekt

Den perfekte Vue.js-mappestruktur og komponentarkitektur med smarte og stumme komponenter

Vue.js er mere end en hype, det er en god frontend-ramme. Det er ganske nemt at komme i gang med det og oprette en webapp. Vue.js beskrives ofte som en ramme for små apps og til tider som et alternativ til jQuery på grund af dens lille størrelse! Jeg synes personligt, at det også kan passe til større projekter, og i dette tilfælde er det vigtigt at strukturere det godt med hensyn til komponentarkitekturen.

Før jeg startede mit første store Vue.js-projekt, foretagede jeg noget for at finde den perfekte mappestruktur, komponentarkitektur og navnekonvention. Jeg gennemgik Vue.js-dokumentationen, et par artikler og mange GitHub open source-projekter.

Jeg var nødt til at finde svarene på et par spørgsmål, jeg havde. Det er, hvad du finder i dette indlæg:

  • Hvordan strukturerer du filer og mapper inde i Vue.js-projektet?
  • Hvordan skriver du smarte og stumme komponenter, og hvor lægger du dem? Det er et koncept, der kommer fra React.
  • Hvad er Vue.js kodningstil og bedste praksis?

Jeg vil også dokumentere med kilden, jeg blev inspireret af og andre links for at få en bedre forståelse.

Vue.js mappestruktur

Her er indholdet af src-mappen. Jeg anbefaler dig at starte projektet med Vue CLI. Jeg personligt brugte standard Webpack-skabelonen.

.
├── app.css
├── App.vue
├── aktiver
│ └── ...
├── komponenter
│ └── ...
├── main.js
├── mixins
│ └── ...
├── router
│ └── indeks.js
├── butik
│ ├── indeks.js
│ ├── moduler
│ │ └── ...
│ └── mutation-types.js
├── oversættelser
│ └── indeks.js
├── redskaber
│ └── ...
└── udsigt
    └── ...

Et par detaljer om hver af disse mapper:

  • aktiver - Hvor du lægger aktiver, der importeres til dine komponenter
  • komponenter - Alle komponenter i projekterne, der ikke er de vigtigste synspunkter
  • mixins - Mixins er de dele af javascript-kode, der genbruges i forskellige komponenter. I en mixin kan du placere en hvilken som helst komponents metoder fra Vue.js, de vil blive fusioneret med dem på den komponent, der bruger den.
  • router - Alle ruter for dine projekter (i mit tilfælde har jeg dem i index.js). Grundlæggende i Vue.js er alt en komponent. Men ikke alt er en side. En side har en rute som “/ dashboard”, “/ indstillinger” eller “/ search”. Hvis en komponent har en rute, dirigeres den.
  • store (valgfrit) - Vuex-konstanterne i mutation-type.js, Vuex-modulerne i undermappemodulerne (som derefter indlæses i index.js).
  • oversættelser (valgfrit) - Lokaler filer, jeg bruger Vue-i18n, og det fungerer temmelig godt.
  • redskaber (valgfrit) - Funktioner, som jeg bruger i nogle komponenter, såsom test af regex-værdi, konstanter eller filtre.
  • visninger - For at gøre projektet hurtigere at læse adskiller jeg komponenterne, der er dirigeret, og lægger dem i denne mappe. De komponenter, der dirigeres for mig, er mere end en komponent, da de repræsenterer sider, og de har ruter, jeg sætter dem i "visninger", når du tjekker en side, går du til denne mappe.

Du kan til sidst tilføje andre mapper afhængigt af dit behov, f.eks. Filtre eller konstanter, API.

Nogle ressourcer blev jeg inspireret af

  • 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

Smart vs dumme komponenter med Vue.js

Smarte og stumme komponenter er et koncept, jeg lærte af React. Smarte komponenter kaldes også containere, det er dem, der håndterer tilstandsændringerne, de er ansvarlige for, hvordan tingene fungerer. Tværtimod håndterer de stumme komponenter, også kaldet præsentation, kun udseendet og fornemmelsen.

Hvis du er bekendt med MVC-mønster, kan du sammenligne dump-komponenter med View og smarte komponenter med Controller!

I React placeres smarte og stumme komponenter normalt i forskellige mapper, mens du i Vue.js lægger dem alle i den samme mappe: komponenter. For at differentiere i Vue.js skal du bruge en navnekonvention. Lad os sige, at du har en dum kortkomponent, så skal du bruge et af disse navne:

  • BaseCard
  • AppCard
  • VCard

Hvis du har en smart komponent, der bruger BaseCard og tilføjer nogle metoder til det, kan du f.eks. Navngive det, afhængigt af dit projekt:

  • ProfileCard
  • ItemCard
  • NewsCard

Hvis din smarte komponent ikke kun er et "smartere" BaseCard med metoder, skal du bare bruge et hvilket som helst navn, der passer til din komponent og uden at starte med Base (eller App eller V), for eksempel:

  • DashboardStatistics
  • Søgeresultater
  • Brugerprofil

Denne navnekonvention kommer fra det officielle styrevide Vue.js, der også indeholder navnekonventioner!

At navngive konventioner

Her er et par konventioner, der kommer fra det officielle Vue.js-styleguide, som du har brug for for at strukturere dit projekt:

  • Komponentnavne skal altid være flere ord, undtagen root-app-komponenter. Brug f.eks. “UserCard” eller “ProfileCard” i stedet for “Card”.
  • Hver komponent skal være i sin egen fil.
  • Filnavne på enkeltfilkomponenter skal enten være PascalCase eller altid kebab-case. Brug "UserCard.vue" eller "user-card.vue".
  • Komponenter, der kun bruges én gang pr. Side, skal begynde med præfikset “The”, for at angive, at der kun kan være en. For eksempel til en navbar eller en sidefod skal du bruge “TheNavbar.vue” eller “TheFooter.vue”.
  • Børnekomponenter skal indeholde deres forældrenavn som præfiks. For eksempel, hvis du gerne vil have en "Foto" -komponent, der bruges i "UserCard", vil du navngive den "UserCardPhoto". Det er for bedre læsbarhed, da filer i en mappe normalt er ordnet alfabetisk.
  • Brug altid fuldt navn i stedet for forkortelse i navnet på dine komponenter. Brug f.eks. Ikke "UDSettings", brug i stedet "UserDashboardSettings".

Vue.js officielle styleguide

Uanset om du er en avanceret eller begynder med Vue.js, bør du læse denne Vue.js styleguide, den indeholder en masse tip og også navnekonventioner. Det indeholder en masse eksempler på ting at gøre og ikke at gøre.

Hvis du kunne lide dette indlæg, skal du klikke på klappen -knappen nedenfor et par gange for at vise din støtte! Du er også velkommen til at kommentere og give enhver form for feedback. Glem ikke at følge mig!

Vil du se flere artikler som denne? Støtt mig på Patreon