Hvordan strukturere et Vue.js-prosjekt

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

Vue.js er mer enn en hype, det er et flott rammeverk for frontend. Det er ganske enkelt å komme i gang med det og bygge en webapp. Vue.js blir ofte beskrevet som et rammeverk for små apper og til og med som et alternativ til jQuery på grunn av sin lille størrelse! Jeg tror personlig at det også kan passe for større prosjekter, og i dette tilfellet er det viktig å strukturere det godt, når det gjelder komponentarkitekturen.

Før jeg startet mitt første store Vue.js-prosjekt, undersøkte jeg for å finne den perfekte mappestrukturen, komponentarkitekturen og navnekonvensjonen. Jeg gikk gjennom Vue.js-dokumentasjonen, noen få artikler og mange GitHub open source-prosjekter.

Jeg trengte å finne svarene på noen få spørsmål jeg hadde. Det er det du finner i dette innlegget:

  • Hvordan strukturerer du filene og mappene i Vue.js-prosjektet?
  • Hvordan skriver du smarte og dumme komponenter, og hvor legger du dem? Det er et konsept som kommer fra React.
  • Hva er Vue.js kodingsstil og beste praksis?

Jeg vil også dokumentere med kilden jeg ble inspirert av og andre lenker for å få en bedre forståelse.

Vue.js mappestruktur

Her er innholdet i src-mappen. Jeg anbefaler deg å starte prosjektet med Vue CLI. Jeg har personlig brukt standard Webpack-malen.

.
├── app.css
├── App.vue
├── eiendeler
│ └── ...
├── komponenter
│ └── ...
├── main.js
├── blandinger
│ └── ...
├── ruter
│ └── indeks.js
├── lagre
│ ├── indeks.js
├── ├── moduler
│ │ └── ...
│ └── mutation-types.js
├── oversettelser
│ └── indeks.js
Ils redskaper
│ └── ...
└── utsikt
    └── ...

Noen få detaljer om hver av disse mappene:

  • eiendeler - der du legger eiendeler som blir importert til komponentene dine
  • komponenter - Alle komponentene i prosjektene som ikke er hovedvisningene
  • mixins - Mixinsene er delene av JavaScript-koden som brukes på nytt i forskjellige komponenter. I en mixin kan du legge til hvilken som helst komponent sine metoder fra Vue.js, de blir slått sammen med dem til komponenten som bruker den.
  • router - Alle rutene til prosjektene dine (i mitt tilfelle har jeg dem i index.js). I Vue.js er alt en komponent. Men ikke alt er en side. En side har en rute som “/ dashbord”, “/ innstillinger” eller “/ søk”. Hvis en komponent har en rute, blir den dirigert.
  • store (valgfritt) - Vuex-konstantene i mutation-type.js, Vuex-modulene i undermappemodulene (som deretter lastes i index.js).
  • oversettelser (valgfritt) - Lokaliserer filer, jeg bruker Vue-i18n, og det fungerer ganske bra.
  • utils (valgfritt) - Funksjoner som jeg bruker i noen komponenter, for eksempel test av regex-verdi, konstanter eller filtre.
  • visninger - For å gjøre prosjektet raskere å lese, skiller jeg komponentene som er rutet og legger dem i denne mappen. Komponentene som er rutet for meg er mer enn en komponent siden de representerer sider og de har ruter, jeg legger dem i “visninger”, når du sjekker en side går du til denne mappen.

Du kan til slutt legge til andre mapper avhengig av behovet ditt, for eksempel filtre, eller konstanter, API.

Noen ressurser ble jeg inspirert av

  • 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 konsept jeg lærte av React. Smarte komponenter kalles også containere, det er de som håndterer endringene i staten, de er ansvarlige for hvordan ting fungerer. Tvert imot, de stumme komponentene, også kalt presentasjon, takler bare utseendet og følelsen.

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

I React plasseres smarte og stumme komponenter vanligvis i forskjellige mapper, mens du i Vue.js legger dem alle i samme mappe: komponenter. For å differensiere i Vue.js vil du bruke en navnekonvensjon. La oss si at du har en stum kortkomponent, så bør du bruke et av disse navnene:

  • BaseCard
  • AppCard
  • VCard

Hvis du har en smart komponent som bruker BaseCard og legger til noen metoder til det, kan du for eksempel navngi den, avhengig av prosjektet ditt:

  • ProfileCard
  • ItemCard
  • NewsCard

Hvis den smarte komponenten din ikke bare er et "smartere" BaseCard med metoder, kan du bare bruke et hvilket som helst navn som passer til komponenten din og uten å starte med Base (eller App eller V), for eksempel:

  • DashboardStatistics
  • Søkeresultater
  • Brukerprofil

Denne navnekonvensjonen kommer fra den offisielle styvingiden til Vue.js som også inneholder navnekonvensjoner!

Navnekonvensjoner

Her er noen konvensjoner som kommer fra den offisielle styresiden til Vue.js som du trenger for å strukturere prosjektet ditt:

  • Komponentnavn skal alltid være flere ord, bortsett fra root-appkomponenter. Bruk "UserCard" eller "ProfileCard" i stedet for "Card" for eksempel.
  • Hver komponent skal være i sin egen fil.
  • Filnavn på enkeltfilkomponenter skal enten være PascalCase eller alltid kebab-case. Bruk “UserCard.vue” eller “user-card.vue”.
  • Komponenter som bare brukes en gang per side, bør begynne med prefikset “The”, for å betegne at det bare kan være en. For eksempel for en navla eller en bunntekst bør du bruke “TheNavbar.vue” eller “TheFooter.vue”.
  • Underkomponenter bør inneholde foreldrenavnet som et prefiks. Hvis du for eksempel vil ha en “Foto” -komponent brukt i “UserCard”, vil du kalle den “UserCardPhoto”. Det er for bedre lesbarhet siden filer i en mappe vanligvis er ordnet alfabetisk.
  • Bruk alltid fullt navn i stedet for forkortelse i navnet på komponentene dine. Bruk for eksempel ikke "UDSettings", bruk i stedet "UserDashboardSettings".

Vue.js offisielle styleguide

Enten du er en avansert eller nybegynner med Vue.js, bør du lese denne Vue.js styleguide, den inneholder mange tips og også navnekonvensjoner. Den inneholder mange eksempler på ting å gjøre og ikke å gjøre.

Hvis du likte dette innlegget, kan du klikke på klappen -knappen nedenfor et par ganger for å vise din støtte! Føl deg fri til å kommentere og gi alle slags tilbakemeldinger. Ikke glem å følge meg!

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