Kuinka rakentaa Vue.js-projekti

Täydellinen Vue.js-kansiorakenne ja komponenttiarkkitehtuuri älykkäillä ja tyhmillä komponenteilla

Vue.js on enemmän kuin hype, se on loistava käyttöliittymä. On melko helppoa aloittaa se ja rakentaa web-sovellus. Vue.js: tä kuvataan usein pienten sovellusten puitteina ja jopa joskus vaihtoehtona jQuerylle pienen koon takia! Uskon henkilökohtaisesti, että se sopii myös suurempiin hankkeisiin, ja tässä tapauksessa on tärkeää rakentaa se hyvin komponenttiarkkitehtuurin kannalta.

Ennen ensimmäisen iso Vue.js-projektini aloittamista tein tutkimusta löytääkseni täydellisen kansiorakenteen, komponenttiarkkitehtuurin ja nimeämiskäytännön. Kävin läpi Vue.js-dokumentaatio, muutama artikkeli ja monet avoimen lähdekoodin GitHub-projektit.

Minun piti löytää vastaukset joihinkin kysymyksiini. Tämän löydät tästä viestistä:

  • Kuinka jäsennät tiedostot ja kansiot Vue.js-projektin sisällä?
  • Kuinka kirjoitat Smart- ja Dumb-komponentteja ja mihin ne laitetaan? Se on Reaktin käsite.
  • Mitkä ovat Vue.js-koodaustyyli ja parhaat käytännöt?

Dokumentoin myös inspiroimani lähteen ja muut linkit ymmärtääksesi paremmin.

Vue.js-kansion rakenne

Tässä on src-kansion sisältö. Suosittelen, että aloitat projektin Vue CLI: llä. Olen henkilökohtaisesti käyttänyt Webpackin oletusmallia.

.
├── app.css
├── App.vue
├── varat
│ └── ...
├── komponentit
│ └── ...
├── main.js
├── sekoitukset
│ └── ...
├── reititin
│ └── index.js
├── myymälä
│ ├── index.js
│ ├── moduulit
│ │ └── ...
│ └── mutaatiotyypit.js
├── käännökset
│ └── index.js
├── utils
│ └── ...
└── näkymät
    └── ...

Muutama yksityiskohta jokaisesta näistä kansioista:

  • varat - mihin sijoitat kaikki komponentit, jotka tuodaan komponentteihin
  • komponentit - Kaikki projektien komponentit, jotka eivät ole päänäkymiä
  • mixins - mixins ovat javascript-koodin osia, joita käytetään uudelleen eri komponentteihin. Mixiniin voit laittaa minkä tahansa komponentin menetelmät Vue.js-sivustosta. Ne yhdistetään sitä käyttävän komponentin menetelmiin.
  • reititin - kaikki projektisi reitit (minulla on minulla ne hakemistossa index.js). Pohjimmiltaan Vue.js: ssä kaikki on osa. Mutta kaikki ei ole sivu. Sivulla on reitti, kuten “/ kojelauta”, “/ asetukset” tai “/ haku”. Jos komponentilla on reitti, se reititetään.
  • tallenna (valinnainen) - Vuex-vakiot mutaatiotyypissä.js, alikansiomoduulien Vuex-moduulit (jotka sitten ladataan hakemistoon.js).
  • käännökset (valinnainen) - Locales-tiedostot, käytän Vue-i18n: ää, ja se toimii melko hyvin.
  • utils (valinnainen) - toiminnot, joita käytän joissakin komponenteissa, kuten regex-arvotestissä, vakioissa tai suodattimissa.
  • näkymät - Jotta projekti saadaan nopeammaksi lukea, erotan reititetyt komponentit ja laitan ne tähän kansioon. Minulle reititetyt komponentit ovat enemmän kuin komponentteja, koska ne edustavat sivuja ja niillä on reitit, panen ne näkymiin, kun tarkistat tämän kansion sivun.

Voit lopulta lisätä muita kansioita tarpeen mukaan, kuten suodattimia tai vakioita, API.

Jotkut resurssit, joista sain inspiraatiota

  • 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

Älykkäät ja tyhmä komponentit Vue.js: llä

Älykkäät ja tyhmä komponentit on käsite, jonka opin Reaktista. Älykkäitä komponentteja kutsutaan myös säiliöiksi, ne hoitavat tilanmuutokset, ne vastaavat asioiden toiminnasta. Tyhjät komponentit, joita kutsutaan myös esitysmuodoiksi, päinvastoin käsittelevät vain ilmettä.

Jos olet perehtynyt MVC-malliin, voit verrata tyhjentäviä komponentteja View: hen ja älykkäitä komponentteja Controlleriin!

Reaktorissa älykkäät ja tyhmä komponentit sijoitetaan yleensä eri kansioihin, kun taas Vue.js -sovelluksessa ne kaikki asetetaan samaan kansioon: komponentit. Erottelemaan Vue.js: ssä käytät nimeämiskäytäntöä. Oletetaan, että sinulla on tyhmä korttikomponentti, sinun tulee käyttää yhtä näistä nimistä:

  • Kylmäakku
  • AppCard
  • VCard

Jos sinulla on älykäs komponentti, joka käyttää BaseCardia ja lisää siihen joitain menetelmiä, voit nimetä sen esimerkiksi projektista riippuen:

  • ProfileCard
  • ItemCard
  • NewsCard

Jos älykäs komponentti ei ole vain “älykkäämpi” BaseCard-menetelmä, käytä vain mitä tahansa nimeä, joka sopii komponenttiisi, ja aloittamatta esimerkiksi Base: llä (tai Sovelluksella tai V):

  • DashboardStatistics
  • Hakutulokset
  • Käyttäjäprofiili

Tämä nimeämiskäytäntö tulee Vue.js-virallisesta tyylioppaasta, joka sisältää myös nimeämiskäytännöt!

Nimeämiskäytännöt

Tässä on muutama Vue.js-virallisesta tyylioppaasta peräisin oleva yleissopimus, jotka sinun täytyy rakentaa projektillesi hyvin:

  • Komponenttien nimien tulee aina olla monisanaisia, lukuun ottamatta juuri "App" -komponentteja. Käytä esimerkiksi “UserCard” tai “ProfileCard” kortin sijaan.
  • Jokaisen komponentin tulisi olla oma tiedosto.
  • Yksitiedostokomponenttien tiedostonimien tulee olla joko aina PascalCase tai aina kebab-case. Käytä “UserCard.vue” tai “user-card.vue”.
  • Komponenttien, joita käytetään vain kerran sivua kohden, pitäisi alkaa etuliitteellä "The", jotta voidaan merkitä, että niitä voi olla vain yksi. Esimerkiksi navigointipalkissa tai alatunnisteessa sinun tulee käyttää ”TheNavbar.vue” tai “TheFooter.vue”.
  • Lapsikomponenttien tulisi sisältää etunimesi vanhemman nimi. Jos esimerkiksi haluat “Photo” -komponentin, jota käytetään “UserCard” -kortissa, nimeät sen “UserCardPhoto”. Se on parempi luettavuus, koska kansion tiedostot järjestetään yleensä aakkosjärjestyksessä.
  • Käytä komponenttien nimissä aina koko nimeä lyhenteen sijasta. Älä esimerkiksi käytä ”UDSettings”, käytä sen sijaan “UserDashboardSettings”.

Vue.js-virallinen tyyliopas

Olitpa edistynyt tai aloittelija Vue.js: n kanssa, sinun pitäisi lukea tämä Vue.js-tyyppiopas, se sisältää paljon vinkkejä ja myös nimeämiskäytäntöjä. Se sisältää paljon esimerkkejä tekemästä ja tekemättä jättämisestä.

Jos pidit tästä viestistä, napsauta napsauttamalla alla olevaa näppäintä -painiketta muutaman kerran näyttääksesi tukesi! Voit myös kommentoida ja antaa kaikenlaista palautetta. Älä unohda seurata minua!

Haluatko nähdä lisää tämän tyyppisiä artikkeleita? Tue minua Patreonissa