Nuxt.js

Allikas: Vikipeedia
Nuxt.js
Autor Alexandre Chopin, Sebastien Chopin, Pooya Parsa, Clark Du, Alexander Lichter, Jonas Galvez, Dmitry Molotkov, Kevin Marrec, Pim
Viimane väljalase 3.11.2 / 4.04.2024 Muuda Vikiandmetes
Kirjutatud keeles JavaScript
Litsents https://github.com/nuxt/nuxt.js/blob/dev/LICENSE
Veebisait https://nuxt.com/

Nuxt.js on võimas ja kergekaaluline Vue.js raamistik, millega saab luua universaalseid ja serveri poolt visualiseeritud veebirakendusi. Nuxt.js-i lõid Alex Chopin ja Sébastien Chopin tuginedes Next-ile, mis on React-i SSR (Server Side Rendering) raamistik.[1] Nuxt.js esimene versioon(1.0) tehti avalikuks jaanuaris 2018. Kuigi Nuxt.js on peamiselt mõeldud universaalsete ja serveri poolt visualiseeritud veebirakenduste loomiseks, saab sellega ka luua staatilisi veebilehti, kasutades sama koodibaasi.[2]

Funktsioonid[muuda | muuda lähteteksti]

Visualiseerimine[muuda | muuda lähteteksti]

Nuxt.js võimaldab luua nii serveri poolt visualiseeritud veebilehti kui ka staatilisi veebilehti, mis visualiseeritakse veebilehe loomisel. Serveri poolne visualiseerimine eeldab serveri olemasolu ja visualiseerib iga kasutaja uue alamlehe päringu peale alamlehe uuesti. Staatilised veebilehed on väga sarnased serveri poolt visualiseeritud veebilehtedega, kuid suureks erinevuseks on fakt, et staatiliste veebilehtede puhul toimub visualiseerimine veebilehe loomise käigus ning serveri olemasolu ei ole vajalik, et navigeerida ühelt alamlehelt teisele. Vaikeseadetes on serveri poolne visualiseerimine aktiveeritud ning seda saab muuta seades muutuja “ssr” vääraks.[3]

Marsruutimine[muuda | muuda lähteteksti]

Nuxt.js genereerib automaatselt vue-router konfiguratsiooni lähtudes .vue failidest, mis on loodud pages kataloogi. Et liikuda erinevate alamlehtede vahel, mis on pages kataloogis ei ole vaja luua mingeid konfiguratsioone (need genereeritakse automaatselt) ning tuleb kasutada Nuxt-link komponenti. Nuxt.js võimaldab luua ka dünaamilisi ja pesastatud marsruute.[4]

Andmete pärimine[muuda | muuda lähteteksti]

Nuxt.js võimaldab laadida andmeid ka 'mounted' haagiga, mis on omapärane Vue-le. Kuid et laadida universaalse veebirakenduse andmed serveri poolse visualiseerimise käigus tuleb kasutada Nuxt.js-ile omaseid haake nagu 'fetch' või 'asyncData'.[5]

Metasildid ja SEO[6][muuda | muuda lähteteksti]

Nuxt.js võimaldab metasilte veebilehele lisada kolmel viisil.

  1. Globaalselt kasutades faili nuxt.config.js. See on kasulik, et lisada vaikimisi metaandmed veebilehe kõikidele alamlehtedele. Näiteks veebilehe pealkiri ja kirjeldus.
  2. Lokaalselt kasutades <head> silti. Kasutades <head> silti saab lisada metaandmeid konkreetsele alamlehele
  3. Lokaalselt kasutades <head> silti funktsioonina. See variant võimaldab lisada metaandmeid konkreetsele alamlehele ja kasutatavad on ka Nuxt.js objektid “data” ja “computed”.

Konfiguratsioon[muuda | muuda lähteteksti]

Konfiguratsioonifailis (nuxt.config.js) saab muuta Nuxt.js vaikeseadeid.[7]

Laadimine[muuda | muuda lähteteksti]

Nuxt.js annab võimaluse kasutada laadimisnäidikut, mida kuvatakse kasutajale marsruutimise ajal ehk ühelt alamlehelt teisele minnes. Laadimisnäidikut saab muuta ja selle saab ka vajadusel ka eemaldada. Laadimisnäidikul saab muuta värvi, ebaõnnestumisvärvi, kõrgust, kestvust, css-i, suunda, püsivust ja viivutus aega. Kuna uue alamlehe laadimisaega ei ole võimalik ette teada ei ole ka võimalik täpselt animeerida laadimisnäidikut. Selle vastu aitab kohandatud laadimisaja määramine, kuna laadimisnäidik liigub alati 0%-st kuni 100%-ni määratud ajaga.[8]

Nuxt komponendid[muuda | muuda lähteteksti]

Nuxt.js sisaldab järgevaid komponente, mida saab veebilehel kasutada: Nuxt, Nuxt-child, Nuxt-link ja Client-only. Nuxt komponenti saab kasutada vaid paigutus komponendis ja seda kasutatakse, et kuvada alamlehe komponendid, sõltuvalt sellest, millist alamlehte kuvatakse. Nuxt-child komponent on vajalik, et kuvada ühte alamlehte teises alamlehes. Liikumaks ühelt alamlehelt teisele on vaja kasutada Nuxt-link komponenti. Nuxt-link komponent töötab sarnaselt HTML-st tuntud <a> sildile, kuid et liikuda alamlehele “/meist” tuleb argumendiks anda “to=’/meist” mitte “href=’/meist’”. Kõik veebilehesisesed lingid ühelt alamlehelt teisele liikumiseks peaksid kasutama Nuxt-link komponenti ja lingid teistele veebilehtedele peaksid kasutama <a> silti. Client-side komponenti kasutatakse, et visualiseerida mingit osa veebilehest ainult kliendipoolselt ja mitte serveris.[9]

Üleminekud[muuda | muuda lähteteksti]

Nuxt.js võimaldab luua üleminekuid/animatsioone, mida saab kuvad liikudes ühelt alamlehelt teisele.[10]

Kataloogi struktuur[11][muuda | muuda lähteteksti]

  1. Assets kataloog sisaldab mittekompileeritud faile, nagu pildid, Sass failid ja fondid. Assets kataloogi faile saab kasutada komponentides või CSS-is kasutades faili URL-i. Nuxt.js kasutab Webpacki, et töödelda ja käsitseda assets kataloogi faile.
  2. Components sisaldab komponente, mis on iseseisvad ja taaskasutatavad koodijupid. Komponendid on .vue failid, mida saab kasutada alamlehtedes ja teistes komponentides.
  3. Layouts failid layout kataloogis võimaldavad luua erinevaid paigutusi alamlehtedele, mida saab mitmete alamlehtede puhul taaskasutada. Ühel veebilehel võib olla mitu erinevat paigutust. Näiteks mobiili ja tahvelarvuti paigutus.
  4. Middleware kaustas saab defineerida erinevaid funktsioone, mida täidetakse enne alamlehtede visualiseerimist. Näiteks saab middleware kaustas defineerida funktsiooni, mis kontrollib kas kasutaja on lubatud alamlehele või mitte, enne kui vastavat alamlehte näidatakse.
  5. Pages kataloog sisaldab kõiki veebilehe alamlehti ja marsruute.
  6. Plugins kataloog sisaldab Javascripti pistikprogramme, mida jooksutatakse enne kui luuakse Vue.js rakendus. See on kasulik, et veebilehel saaks kasutada välised JavaScripti mooduleid.
  7. Static kaust on alternatiiv Webpacki assets kaustale kuhu saab lisada faile, näiteks pilte, mida muudetakse harva (näiteks veebilehe ikoon - favicon.ico).
  8. Store kaust ei ole vaikimisi aktiveeritud. Et see aktiveerida on on vaja selle sisse luua Javascripti fail(nt index.js). Store kaust võimaldab kontrollida ja hallata veebilehe olekut.
  9. Nuxt.config.js sisaldab Nuxt.js-i seadeid ja võimaldab neid muuta.

Viited[muuda | muuda lähteteksti]

  1. ↑ "Getting Started with Server-Side Rendering Using Nuxt.js". digitalocean.com. 16. aprill 2018. Vaadatud 11.12.2020.
  2. ↑ Ben Jones. "Creating Server-side Rendered Vue.js Apps Using Nuxt.js". toptal.com. Vaadatud 11.12.2020.
  3. ↑ "Rendering". nuxtjs.org. Vaadatud 10.12.2020.
  4. ↑ "File System Routing". nuxtjs.org. Vaadatud 10.12.2020.
  5. ↑ "Data Fetching". nuxtjs.org. Vaadatud 04.01.2021.
  6. ↑ "Meta Tags and SEO". nuxtjs.org. Vaadatud 04.01.2021.
  7. ↑ "Configuration". nuxtjs.org. Vaadatud 10.12.2020.
  8. ↑ "Loading". nuxtjs.org. Vaadatud 10.12.2020.
  9. ↑ "Nuxt Components". nuxtjs.org. Vaadatud 10.12.2020.
  10. ↑ "Transitions". nuxtjs.org. Vaadatud 10.12.2020.
  11. ↑ "NuxtJs Directory Structure". nuhuibrahim.com. Originaali arhiivikoopia seisuga 8.01.2021. Vaadatud 11.12.2020.
Pärit leheküljelt "https://et.wikipedia.org/w/index.php?title=Nuxt.js&oldid=6426603"