Când dezvoltatorii web erau ocupați cu construirea de site-uri web interactive în anii 2000, au văzut o mulțime de provocări în calea lor de dezvoltare. De exemplu, una dintre cele mai mari provocări ale lor a fost modul de a reda corect paginile atât din partea serverului, cât și din partea utilizatorului (clientului). La acel moment, existau multe cadre, fiecare dintre ele rezolvand această problemă într-un fel, dar toate erau cumva incomplete. Apoi a venit Vue.js și a cucerit inimile multora prin simplitatea și flexibilitatea sa. Dar încă mai lipsea ceva; Un instrument care poate gestiona cu ușurință proiecte mari și complexe. Aici a intrat NuxtJs pe teren.
Acum imaginați-vă, dacă nu ar fi NuxtJs, ne-am lupta să construim site-uri web rapide și optimizate. Crearea de site-uri web optimizate pentru motoarele de căutare și ușor de utilizat ar fi un coșmar fără NuxtJs! Din fericire, NuxtJs a rezolvat aceste probleme și acum putem gestiona cu ușurință proiecte complexe.
Ce este NuxtJs?
NuxtJs este un cadru ușor și de nivel înalt pentru Vue.js, care ajută dezvoltatorii să construiască aplicații Vue.js cu randare pe server (SSR) și capabilități de generare statică a site-ului. Acest cadru este conceput pentru a crea aplicații universale care rulează atât pe server, cât și în browser. NuxtJs face dezvoltarea mult mai ușoară și mai rapidă și oferă diverse instrumente pentru a îmbunătăți performanța și SEO.
Istoria NuxtJs
NuxtJs a fost creat de doi Lead de e-mail pentru Grecia frați pe nume Alexandre și Sebastien Chopin cozi calde în 2016. Scopul lor a fost să creeze un instrument simplu și puternic pentru gestionarea proiectelor Vue.js. Inspirați de Next.js, care este un cadru similar pentru React, acești doi frați au dezvoltat NuxtJs. De atunci, NuxtJs a devenit unul dintre cele mai populare cadre pentru dezvoltatorii Vue.js.
Structura folderelor în NuxtJs
Când creați un nou proiect cu NuxtJs, vi se va afișa structura diferitelor fișiere și foldere generate de CLI. Aceste fișiere și foldere sunt foarte importante și unele foldere ar trebui să rămână neschimbate, cu excepția cazului în care necesită setări suplimentare.
Să aruncăm o privire asupra structurii folderelor și să examinăm fiecare fișier și folder pentru a vedea de ce sunt importante.
1. nuxt
folderul nuxt. Există un director secret care este creat atunci când rulați serverul de dezvoltare și este numit și directorul de compilare. Acest folder conține fișierele sau artefactele generate atunci când comanda npm run build este executată.
Rețineți că puteți modifica fișierele din acest folder numai pentru depanare, deoarece aceste fișiere sunt generate automat când rulați comanda dev sau build.
Active
Dosarul de active conține toate resursele necompilate, cum ar fi imagini, fonturi, fișiere SASS și Style. Webpack compilează fiecare fișier din acest folder în timpul procesului de randare.
Componente
Dosarul de componente este bz lists similar cu folderul de componente din Vue.js, unde sunt stocate toate componentele Vue. Componentele sunt fișiere care formează diferite părți ale paginilor dvs. și pot fi reutilizate și inserate în alte pagini, machete și componente.
4. Aspecte
Folderul layout-uri stochează structura aplicației și este foarte util pentru separarea diferitelor structuri ale aplicației pentru utilizatorii sau invitații autentificați. Puteți crea diferite machete pentru structura aplicației.
Uneori este posibil să doriți ca unele pagini ale site-ului dvs. să aibă o bară laterală, un antet sau un subsol diferit. Acestea sunt în cea mai mare parte organizate folosind fișiere de aspect stocate în folderul layout-uri.
5. Middleware
Mijloacele sunt funcții personalizate care pot fi executate înainte de randarea unei pagini sau a unui grup de pagini și pot fi definite și salvate în folderul intermediari din NuxtJs.
Unul dintre avantajele Middleware este că, dacă doriți să restricționați accesul la anumite pagini, puteți seta Middleware să verifice dacă utilizatorul este conectat sau nu.
În NuxtJs, middleware-ul funcționează ca middleware-ul oricărui cadru backend, cum ar fi ExpressJS, Laravel etc.
6. Pagini
Folderul pagini este baza sistemului de rutare NuxtJs deoarece citește toate fișierele .vue din acest folder și creează automat configurația de rutare.
Dosarul pagini conține vizualizări și căi de aplicație, iar fiecare componentă a paginii este o componentă standard Vue. Cu toate acestea, NuxtJs o tratează ca pe o cale adăugând caracteristici și funcții speciale pentru a simplifica dezvoltarea aplicației tale universale.
