Com estructurar un projecte Vue.js

L'estructura de carpetes i l'arquitectura de components perfectes de Vue.js amb components intel·ligents i estúpids

Més que bombo, Vue.js és un excel·lent framework frontal. És fàcil començar i crear una aplicació web. Vue.js sovint es descriu com un marc per a aplicacions petites i, de vegades, fins i tot com una alternativa a jQuery perquè és molt petit. Personalment, crec que també és adequat per a projectes més grans. En aquest cas, és important estructurar-lo bé en termes d’arquitectura de components.

Abans d’iniciar el meu primer gran projecte Vue.js, vaig fer algunes investigacions per trobar l’estructura perfecta de carpetes, l’arquitectura de components i la convenció de noms. He consultat la documentació de Vue.js, alguns articles i molts projectes de codi obert de GitHub.

Vaig haver de trobar respostes a algunes de les meves preguntes. Ho podeu trobar en aquest post:

  • Com s’estructuren els fitxers i les carpetes del projecte Vue.js?
  • Com s’escriuen components intel·ligents i ximples i on se situen? És un concepte de React.
  • Quins són l'estil de codificació i les pràctiques recomanades de Vue.j?

També documentaré amb la font en què em vaig inspirar i altres enllaços per a una millor comprensió.

Estructura de carpetes Vue.js

Aquí teniu el contingut de la carpeta src. Us recomano iniciar el projecte amb Vue CLI. Personalment, he utilitzat la plantilla estàndard de webpack.

. ├── app.css ├── App.vue ├── Actius │ │ ... ├── Components │ │ ... ├── main.js ├── mixins │ │ ... ├── Encaminador │ └── index.js ├── desa │ ├── index.js │ ├── mòduls │ │ └── ... │ │ mutation-types.js ├── traduccions │ └── index.js ├─ ─ Estris │ │ ... └── Vistes └── ...

Alguns detalls sobre cadascuna d'aquestes carpetes:

  • Recursos: aquí es col·loquen tots els recursos que s’importaran als components
  • Components: tots els components dels projectes que no són les vistes principals
  • mixins: els mixins són les peces del codi Javascript que es reutilitzen en diversos components. En un mixin podeu inserir els mètodes de cada component des de Vue.js. Es combinen amb els del component que els utilitza.
  • enrutador: totes les rutes dels vostres projectes (en el meu cas, les tinc a index.js). Bàsicament tot el contingut de Vue.js és un component. Però no tot és un costat. Una pàgina té una ruta com ara "/ dashboard", "/ settings" o "/ search". Si un component té una ruta, es reenvia.
  • store (opcional): constants de Vuex a mutation-type.js, els mòduls de Vuex als mòduls de subcarpeta (que després es carreguen a index.js).
  • Traduccions (opcional): fitxers locals, estic fent servir Vue-i18n i funciona bastant bé.
  • utils (opcional): funcions que faig servir en alguns components, per exemple B. Proves, constants o filtres de valor Regex.
  • Vistes: per facilitar la lectura del projecte, separaré els components encaminats i els posaré en aquesta carpeta. Els components que s’encaminen per a mi són més que un component en què representen pàgines i tenen rutes. Aleshores els he col·locat a "Visualitzacions", quan reviseu una pàgina, canvieu a aquesta carpeta.

Podeu afegir altres carpetes segons calgui, per exemple. B. Filtres o constants, API.

Alguns recursos que em van inspirar

  • 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

Components intel·ligents versus muts amb Vue.js

Els components intel·ligents i ximples són un concepte que vaig aprendre de React. Els components intel·ligents també s’anomenen contenidors. Són els que s’ocupen dels canvis d’estat. Vostè és responsable de com funcionen les coses. Per contra, els components estúpids, també anomenats components de presentació, només prenen l’aspecte.

Un cop conegueu els patrons de MVC, podeu comparar els components de còpia de seguretat amb la vista i els components intel·ligents amb el controlador.

A React, els components intel·ligents i muts se solen col·locar en carpetes diferents, mentre que a Vue.js els poseu tots a la mateixa carpeta: components. Utilitzeu una convenció de noms per diferenciar-vos en Vue.js. Suposem que teniu un component de targeta estúpid. A continuació, heu d'utilitzar un dels noms següents:

  • BaseCard
  • AppCard
  • VCard

Si teniu un component intel·ligent que utilitza BaseCard i hi afegeix alguns mètodes, podeu anomenar-lo en funció del vostre projecte, per exemple:

  • Targeta de perfil
  • ItemCard
  • NewsCard

Si el vostre component intel·ligent no és només una BaseCard “més intel·ligent” amb mètodes, només cal que utilitzeu qualsevol nom que s’adapti al vostre component sense començar amb Base (o App o V). Exemple:

  • DashboardStatistics
  • Resultats de la cerca
  • Perfil d'usuari

Aquesta convenció de noms prové de la guia d’estil oficial de Vue.j, que també conté convencions de noms.

Regles de denominació

Aquí teniu algunes convencions de la guia d’estil oficial Vue.j que necessitareu per estructurar bé el vostre projecte:

  • Els noms dels components sempre han de constar de diverses paraules, a excepció dels components de l'aplicació arrel. Per exemple, utilitzeu "UserCard" o "ProfileCard" en lloc de "Card".
  • Cada component ha d’estar al seu propi fitxer.
  • Els noms de fitxers dels components d’un sol fitxer han de ser sempre PascalCase o sempre Kebab-case. Utilitzeu "UserCard.vue" o "user-card.vue".
  • Els components que s'utilitzen només una vegada per banda han de començar amb el prefix "El" per indicar que només n'hi pot haver un. Per exemple, per a una barra de navegació o un peu de pàgina, utilitzeu TheNavbar.vue o TheFooter.vue.
  • Els components secundaris haurien de posar el seu nom pare. Per exemple, si voleu utilitzar un component "Foto" a la "UserCard", anomeneu-lo "UserCardPhoto". Això és per millorar la llegibilitat, ja que els fitxers d’una carpeta solen ordenar-se alfabèticament.
  • Utilitzeu sempre el nom complet en lloc de l’abreviatura del nom dels components. Per exemple, no utilitzeu "UDSettings" sinó "UserDashboardSettings".

Guia d'estil oficial Vue.js

Tant si sou avançat amb Vue.js com si és principiant, s’ha de llegir aquesta guia d’estil Vue.js. Conté molts consells i també convencions de denominació. Conté molts exemples de coses que cal fer i no fer.

Si us ha agradat aquest missatge, feu clic al botó de xafarderies que hi ha a continuació diverses vegades per mostrar el vostre suport. A més, no dubteu a comentar i donar qualsevol tipus de suggeriment. No us oblideu de seguir-me!

Voleu veure més articles com aquest? Doneu-me suport a Patreon