A Vue.js projekt felépítése

A tökéletes Vue.js mappa felépítése és összetevő architektúrája intelligens és buta komponensekkel

A Vue.js több, mint egy hype, ez egy nagyszerű felhasználói felület. Elég könnyű elkezdeni vele és létrehozni egy webalkalmazást. A Vue.js-t gyakran kis alkalmazások kereteként, sőt kis méretük miatt néha a jQuery alternatívájaként is leírják! Személy szerint úgy gondolom, hogy nagyobb projektekhez is alkalmazható, és ebben az esetben fontos, hogy jól felépítsük, az összetevő architektúrája szempontjából.

Az első nagy Vue.js projekt elindítása előtt néhány kutatást végeztem annak érdekében, hogy megtaláljam a tökéletes mappastruktúrát, az összetevő architektúrát és az elnevezési módszert. Átmentem a Vue.js dokumentáción, néhány cikken és sok GitHub nyílt forráskódú projekten.

Meg kellett találnom a válaszokat néhány kérdésemre. Ezt találja meg ebben a bejegyzésben:

  • Hogyan szerkesztheti a fájlokat és mappákat a Vue.js projektben?
  • Hogyan írja az intelligens és a néma komponenseket, és hová tegye őket? Ez egy olyan koncepció, amelyet a React ad.
  • Melyek a Vue.js kódolási stílusa és a bevált gyakorlatok?

Ezenkívül dokumentálom az általam inspirált forrást és más linkeket is a jobb megértés érdekében.

A Vue.js mappa felépítése

Itt található az src mappa tartalma. Ajánlom, hogy indítsa el a projektet a Vue CLI-vel. Én személy szerint az alapértelmezett Webpack sablont használtam.

.
├── app.css
├── App.vue
├── eszközök
│ └── ...
├── alkatrészek
│ └── ...
├── main.js
├── keverékek
│ └── ...
├── útválasztó
│ └── index.js
├── tárolni
│ ├── index.js
├── ├── modulok
│ │ └── ...
│ └── mutation-tips.js
├── fordítások
│ └── index.js
├── utils
│ └── ...
└── nézetek
    └── ...

Néhány részlet a következő mappákról:

  • eszközök - Ahova bármilyen eszközt elhelyez, amelyet az összetevőkbe importál
  • összetevők - A projektek összes olyan összetevője, amely nem a fő nézet
  • mixins - A mixins a javascript kód azon részei, amelyeket a különböző összetevőkben újra felhasználnak. A mixinbe bármilyen komponens módszerét beillesztheti a Vue.js webhelyre, és ezek összevonódnak az azt használó komponens módszereivel.
  • router - A projektek összes útvonala (az én esetemben megtalálom őket az index.js-ben). Alapvetően a Vue.js-ben minden egy alkotóelem. De nem minden egy oldal. Egy oldal útvonala például: “/ műszerfal”, “/ beállítások” vagy “/ keresés”. Ha egy alkatrésznek van útvonala, akkor az útvonalra kerül.
  • tárolás (opcionális) - A Vuex állandók a mutation-type.js-ben, a Vuex-modulok az almappákban (amelyeket azután az index.js-be töltnek).
  • fordítások (opcionális) - A fájlok megkeresése, a Vue-i18n-t használom, és ez nagyon jól működik.
  • utils (opcionális) - Funkciók, amelyeket egyes komponensekben használok, például a regex érték tesztelése, állandók vagy szűrők.
  • nézetek - Ahhoz, hogy a projekt gyorsabban elolvashasson, elválasztom az irányított összetevőket, és ebbe a mappába rakom. A számomra átirányított összetevők több, mint egy összetevő, mivel az oldalak képviselői és meg vannak az útvonalak, „nézetek” közé helyezem őket, majd amikor ellenőriz egy oldalt, akkor ehhez a mappához jár.

Végül további mappákat is hozzáadhat, az igényeitől függően, például szűrőket vagy állandókat, API-kat.

Néhány forrás, amiben inspiráltam

  • 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

Intelligens és buta komponensek a Vue.js segítségével

Az intelligens és buta komponensek egy olyan koncepció, amelyet a Reaktól tanultam. Az intelligens alkatrészeket konténereknek is hívják, ők azok, akik kezelik az állapotváltozásokat, felelősek a dolgok működéséért. Ellenkezőleg, a hülye alkotóelemek, más néven prezentációs jellegűek, csak a megjelenést és érzetet kezelik.

Ha ismeri az MVC mintát, összehasonlíthatja a kiürített összetevőket a Megtekintéshez, és az intelligens összetevőket a Vezérlőhöz!

A React alkalmazásban az intelligens és a buta komponenseket általában különböző mappákba helyezik, míg a Vue.js-ben mindegyiket ugyanabba a mappába helyezik: az összetevőket. A Vue.js megkülönböztetéséhez az elnevezési konvenciót kell használni. Tegyük fel, hogy van egy buta kártyája, akkor a következő nevek egyikét kell használnia:

  • BaseCard
  • AppCard
  • VCard

Ha van egy intelligens összetevő, amely BaseCard-t használ, és hozzáteszi néhány módszert, akkor a projekttől függően például megnevezheti:

  • ProfileCard
  • ItemCard
  • NewsCard

Ha az intelligens komponens nemcsak egy „okosabb” alapkártya módszerrel, akkor használjon minden nevet, amely megfelel az összetevőnek, anélkül, hogy a Base (vagy App, vagy V) szóval kezdődne, például:

  • DashboardStatistics
  • Keresési eredmények
  • Felhasználói profil

Ez az elnevezési konvenció a Vue.js hivatalos stílusszabályából származik, amely elnevezési konvenciókat is tartalmaz!

Elnevezési konvenciók

Íme néhány konvenció a Vue.js hivatalos stílusvezetőjéből, amelyeket a projekt jól strukturálásához szüksége van:

  • Az alkotóelemek nevének mindig több szavasnak kell lennie, kivéve a „gyökér” összetevőket. Használja például a „UserCard” vagy a „ProfileCard” -t, a „Card” helyett.
  • Minden összetevőnek a saját fájljában kell lennie.
  • Az egyes állományú összetevők fájlneveinek mindig PascalCase-nek vagy mindig kebab-esetnek kell lenniük. Használja a „UserCard.vue” vagy a „user-card.vue” fájlokat.
  • Azoknak az összetevőknek, amelyeket csak egyszer használnak oldalanként, a „The” előtaggal kell kezdődni, jelezve, hogy csak egy lehet. Például navigációs sáv vagy lábléc esetén használja a „TheNavbar.vue” vagy a „TheFooter.vue” fájlokat.
  • A gyermekkomponenseknek előtagként fel kell tüntetniük a szülő nevüket. Például, ha szeretne egy “Photo” összetevőt, amelyet a “UserCard” -ben használ, akkor “UserCardPhoto” -nak nevezi. A jobb olvashatóság érdekében, mivel a mappában lévő fájlok általában ábécé sorrendben vannak rendezve.
  • Az összetevőkben mindig rövidítés helyett mindig a teljes nevet használja. Például ne használja az „UDSettings”, hanem a „UserDashboardSettings” helyett.

A Vue.js hivatalos stílusszabálya

Akár haladó vagy kezdő a Vue.js oldalán, olvassa el ezt a Vue.js stílusú útmutatót, amely sok tippet és elnevezési konvenciókat tartalmaz. Sok példát tartalmaz arra, hogy mit kell tennie és mit nem.

Ha tetszett ez a bejegyzés, kérjük, kattintson néhányszor az alábbi taps gombra, és mutassa meg támogatását! Ezenkívül nyugodtan kommentálhatsz és bármilyen visszajelzést adhatsz. Ne felejts el követni engem!

További cikkeket szeretne látni, mint ez? Támozzon a Patreonon on