Nástup nových rámců pro zapouzdření vizuálních komponent ve webových aplikacích upozornil na řadu dalších potřeb:směrování, zabezpečení, podporu SPA a PWA, internacionalizaci a samozřejmě uživatelské rozhraní.
To platí o Vue.js, který byl široce přijat pro vývoj webových aplikací a hybridní mobilní aplikace. I když se silně zaměřuje na logiku komponent a aplikaci jako celek, je potřeba pracovat s nějakým jiným typem knihovny uživatelského rozhraní nebo frameworku, aby se do stránek vložil styl a design.
Na druhé straně mezi četnými rámcemi uživatelského rozhraní, které se zabývají přizpůsobením a usnadněním vizuálních komponent a designu obrazovky, existují rámce, které přijaly slavný standard Material Design. Komunita tuto možnost široce přijala, protože zahrnuje jak prostředí stolních počítačů, tak mobilní prostředí s odezvou, flexibilitou a rozšiřitelností.
Protože většina vývojářů pracujících s oběma paradigmaty je již obeznámena s jejich používáním, proč tyto dva světy nespojit? Proč se tedy nepřipojit k Vue s trendem Materialise? Zde se rodí Vuetify.js.
Proč používat Vuetify?
Vuetify vyhovuje specifikaci Material Design. To znamená, že základní funkce Vue i Material budou k dispozici ve výchozím nastavení a obě komunity je mohou vylepšit. Kromě toho Vuetify nabízí:
- Kompatibilita s Vue CLI-3 a RTL
- Šablony pro různé rámce (Cordova, webpack atd.)
- Internacionalizace
- SSR a PWA
Používání Vuetify však znamená, že chcete a přijmete Material Design. Aplikace určené pro vesmír iOS například nejsou vhodnými kandidáty pro Vuetify. Podobně, pokud potřebujete vlastní design s ohledem na styl jako celek, nemusí vám Vuetify vyhovovat. Jako vždy musíte provést předchozí a hlubší analýzu potřeb vašeho projektu.
Chcete-li lépe porozumět tomu, jak Vuetify funguje, a ochutnat to, podívejte se na obrázek níže:
Vytvořme od začátku jednoduchou, responzivní a zcela materiálově založenou stránku s prvky z cenové stránky LogRocket (výběr plánů v nabídce Ceny). Všimněte si, že rozložení prvků je velmi intuitivní a šablona karty připomíná, jak Bootstrap pracuje například s mřížkami.
Instalace a nastavení
Začněme rozvržením všeho, co pro projekt potřebujeme. Nejprve musíte mít na svém počítači nainstalovanou nejnovější verzi Node.js/npm.
Chcete-li nainstalovat Vue CLI globálním způsobem, je důležité si poznamenat požadovanou verzi. V době psaní tohoto článku je nejnovější verze 3.x.x . Mnoho zdrojů uvádí, že příkaz pro toto je:
npm install -g vue-cli
Tento příkaz však ve skutečnosti nainstaluje předchozí verzi Vue CLI, takže si toho uvědomte.
Zkontrolujte také, zda již nemáte na svém počítači nainstalovanou předchozí verzi:
vue — version
Chcete-li nainstalovat správnou verzi, spusťte následující příkaz:
npm install -g @vue/cli
Dalším krokem je lešení naší aplikace. Použijeme řadu přednastavených souborů, abychom si usnadnili život – jako některé soubory šablon .vue, index.html a main.js:
vue create vuetify-logrocket
Instalační příručka se vás zeptá, které přednastavení kompilátoru JavaScript a lint chcete:
Necháme výchozí možnosti a pokračujeme klávesou Enter. Počkejte na dokončení instalace, potom nacd adresář vytvořené aplikace a spusťte příkaz pro přidání Vuetify do našeho projektu:
cd vuetify-logrocket
vue add vuetify
Počkejte, až vás instalace zavede k dalšímu výběru předvoleb, tentokrát z Vuetify:
Nechte to tak, jak je, a počkejte na dokončení instalace. Obrázek níže ukazuje základní strukturu adresářů a souborů vygenerovaných po přidání pluginu:
Pro spuštění aplikace jednoduše spusťte příkaz npm run serve. To také způsobí, že se spustí hlídač změn souborů a poslouchá naše úpravy a automaticky aktualizuje stránky.
Přizpůsobení naší stránky
Než budete pokračovat v tomto článku, doporučuji vám přečíst si o některých základních součástech Vuetify v jeho oficiální dokumentaci. Usnadní to rozpoznání toho, co uvidíme dopředu, protože se nebudeme podrobně zabývat každým z nich.
Protože v App.vue nepoužijeme žádný obsah generovaný Vuetify, můžete veškerý jeho obsah smazat. Začneme vytvořením první části obrazovky, mezi třemi dalšími:
- Navigace (panel nástrojů a nabídky)
- Tělo (kde budeme mít karty plánů pro stanovení cen)
- Zápatí
Navigace
Navigace se bude řídit vzorem podrobného zobrazení nabídky při zobrazení na ploše spolu s navigační zásuvkou společnou pro mobilní aplikace nebo webové stránky zobrazované na chytrých telefonech (se šablonou ikony hamburgeru). Níže se podívejte, jak se naše stránky budou zobrazovat na iPhonu X:
Nejprve vytvořte nový soubor s názvem navigation.vue ve složce /src/components/ a přidejte následující obsah:
https://medium.com/media/4671a98d4ddb5ff9c35a09f2cc0c7ac7/href
Všimněte si, že první značka odkazuje na definici šablony vytvořené ve Vue.js. Tato značka vyžaduje, aby byl do hierarchie přidán pouze jeden podřízený prvek; jinak se zobrazí chyba. Abychom „obešli“ tuto kontrolu, přidáme (nebo jakýkoli jiný neutrální HTML prvek, který zapouzdřuje ostatní).
Uděláme to, protože potřebujeme, aby obě komponenty (pro mobilní vizualizaci) a (vizualizace pro stolní počítače) existovaly vedle sebe.
Podívejme se na některé další důležité úvahy:
- Direktiva aplikace se používá v obou komponentách, aby Vuetify pochopilo, že patří do aplikace na globálnější úrovni – to znamená, jak změnit jejich velikost a upravit je vzhledem k nadřazenému prvku
- v-model definuje, jaký typ modelu používáme — v tomto případě zásuvku. Tento prvek je důležitý, aby se seznam nabídek nezobrazoval viset. JavaScript, který dodává vaše položky, je na konci seznamu
- Zbytek vašeho obsahu představuje smyčku, která prochází prvky nabídky předem definované v prvku nabídky. Zde komponentu používáme k iteraci a skládání dílčích prvků nadpisu () a rozdělovače ()
- V prvku vidíme použití tmavé direktivy pro výchozí import nočního stylu Vuetify
Komponenta představuje naši ikonu hamburgeru. Měl by se samozřejmě objevit pouze při prohlížení v mobilním režimu, a proto všechny prvky panelu nástrojů dostávají třídy CSS pro zarážky Material Design Viewport.
Toto je výchozí mechanismus Vuetify pro ovládání zobrazení prvků na základě aktuálního výřezu. Podívejte se na oficiální tabulku rozměrů pro každou předponu Vuetify níže:
Tyto podmínky jsou ve formátu hidden-{breakpoint}-{condition}. Například třídu hidden-md-and-up lze přeložit následovně:
Zbývající prvky panelu nástrojů jsou opačné:budou skryty, když je výřez zařízení malý (sm) nebo nižší (dolů).
Pokud jde o barvy, Vuetify nabízí předdefinovanou paletu barev, kterou můžete použít prostřednictvím tříd CSS.
A konečně, vlastnost @click definuje, že kliknutí na ikonu hamburgeru spustí aktivaci navigačního šuplíku; jinak se kliknutí neprojeví. Je třeba si uvědomit, že efektem je přepínač.
Tělo (cenové plány)
Nyní vytvoříme naši druhou šablonu:cenové plány. Chcete-li to provést, vytvořte ve stejném adresáři nový soubor s názvem Plans.vue a přidejte následující obsah:
https://medium.com/media/31d61283bc07e5b14c6335f18624391f/href
Následující je z dokumentace Vuetify o systému grids:
Náš kontejner je mřížka CSS — jednoduchá a vodorovně zarovnaná. První položkou v kontejneru je sloupec:. Zde jsem rychle zarovnal dva texty na střed stránky s následujícími rekvizitami:
- text-cs-center:zarovná text vodorovně (osa x) na střed
- displej-1:Výchozí typografie Vuetify
velikost prvku. Další informace naleznete v dokumentaci k typografii
- my-5:nastavení mezer pro okraje Vuetify. Zde m pochází z okraje a y pochází z vertikální (osa y). Stupnice se pohybuje od 0 do 5, podle specifikace Material Design
- font-weight-black:tloušťka písma pro typografii Vuetify. Nastaví tloušťku písma na 900
Další rozložení je řada sestávající ze tří karet. Každá karta (reprezentovaná a) se skládá ze dvou hlavních prvků:
- Obrázek: komponenty ve Vuetify pracují s src a ukazují přímo na obrázek, který může být hostován externě. Pokud chcete k souborům přistupovat lokálně (jako v našem případě), musíte každý z nich vystavit jako datové atributy s jejich příslušnými cestami vzhledem ke složce aktiv (viz skript na konci výpisu). K souborům obrázků se dostanete v odkazu projektu GitHub na konci tohoto článku
- V rámci každého obrázku , vytváříme další nádobu s rekvizitní kapalinou, která slouží k prodloužení šířky nádoby na stejnou, jako je mateřská nádoba. Každý kontejner bude obsahovat text s názvem každé karty a tlačítko s výzvou k akci. Všimněte si, že zde využíváme více rekvizit pro podnadpis a zarovnání (px-1 znamená horizontální odsazení s hodnotou 1 z 5)
- Název: Komponenta definuje obsah karty — obvykle název a popis, ale může obsahovat další prvky, jako jsou tlačítka
Vuetify také změní uspořádání karet vertikálně při zobrazení v mobilním režimu.
Zápatí
Pro vytvoření zápatí přejděte do adresáře komponent našeho projektu a vytvořte soubor footer.vue. Přidejte následující obsah:
https://medium.com/media/3c576ea1c5d8c5e5e733b10aa15f156c/href
Jedná se o jednoduchou zápatí složenou z položek, o kterých jsme hovořili dříve.
Všimněte si, že pro každý ze souborů .vue musíme definovat názvy každé šablony, tj. jak budou externě rozpoznány jinými soubory .vue.
Hlavní stránka
Pro hlavní stránku použijeme již vytvořený soubor:App.vue. Přidejte do něj následující obsah:
https://medium.com/media/f1d757e997a20ec3e7f234bfb9d900df/href
Značka je vyžadována společností Vue. Centralizuje ostatní prvky, které tvoří jeho aplikaci.
Zbytek implementace je poměrně jednoduchý. Jediné, co musíme udělat, je naimportovat soubory ostatních komponent pomocí importu x od y a exportujte je jako obvykle. Všimněte si, že každá značka musí být před použitím v šabloně rozdělena. Tímto způsobem Vuetify rozpozná, jak byl každý případ velblouda přeložen do oddělených pomlček.
Závěr
K úplnému zdrojovému kódu máte přístup z mého úložiště GitHub. Pokud se vám to líbilo, zanechte prosím hodnocení hvězdičkami.
Když začínáte s novým rámcem, je třeba vzít v úvahu mnoho faktorů. Výhodou Vuetify.js je, že mnoho kladů a záporů již bylo absorbováno samotným Vue.js:veškerá síla Vue je ve vašich rukou. Období.
Kromě toho musíte analyzovat skutečné potřeby vašeho projektu. Jak jsme již zmínili, Vuetify nemusí vyhovovat vašemu projektu, pokud se spoléháte na samotný design. Ale pokud ano, budete mít po ruce produktivní a extrémně výkonný nástroj k vytváření úžasných webových stránek.
Použili jste Vuetify? Pokud ano, jaká to byla zkušenost? Zanechte podrobnosti v komentářích — můžete pomoci někomu, kdo chce vysledovat stejnou cestu. :)
Plug:LogRocket, DVR pro webové aplikace
LogRocket je frontendový protokolovací nástroj, který vám umožní přehrát problémy, jako by se staly ve vašem vlastním prohlížeči. Namísto hádání, proč k chybám dochází, nebo žádostí uživatelů o snímky obrazovky a výpisy protokolů, vám LogRocket umožňuje přehrát relaci, abyste rychle pochopili, co se pokazilo. Funguje perfektně s jakoukoli aplikací bez ohledu na rámec a má pluginy pro přihlášení dalšího kontextu z Redux, Vuex a @ngrx/store.
Kromě protokolování akcí a stavu Redux zaznamenává LogRocket protokoly konzoly, chyby JavaScriptu, stacktrace, síťové požadavky/odpovědi s hlavičkami + těly, metadata prohlížeče a vlastní protokoly. Nástroj DOM také zaznamenává HTML a CSS na stránku a vytváří videa v pixelech i těch nejsložitějších jednostránkových aplikací.
Vyzkoušejte to zdarma.