Dacă îți place să creezi aplicații în Vue.js, dar te străduiești să știi de unde să începi cu designul UI, nu căuta mai departe de Vuetify. Este o bibliotecă UI care conține componente materiale realizate manual, care oferă aplicațiilor un finisaj frumos și o senzație profesională.

De ce să înveți Vuetify?

Vuetify este cea mai populară bibliotecă de componente pentru Vue.js, permițându-vă să creați aplicații cu aspect extraordinar, accesibile chiar dacă designul interfeței nu este zona dvs.

În timp ce biblioteca are peste 80 de elemente gata de utilizare direct pe cutie, vă permite, de asemenea, să creați elemente personalizate, oferind aplicațiilor dvs. o senzație curată, dar personalizată.

Acest articol vă oferă gratuit Scrimba curs Vuetify de două ore de Gwen Faraday. Cursul vă învață toate abilitățile de bază necesare pentru a începe cu Vuetify, inclusiv:

  • Tipografie
  • Spațiere
  • Butoane
  • Navigare
  • Grilă
  • Card

În prima jumătate, Gwen introduce toate elementele Vuetify necesare pentru a construi o aplicație excelentă. Ca și în cazul tuturor cursurilor Scrimba, puteți întrerupe scrims și explora codul.

A doua jumătate vă permite să vă murdăriți mâinile construind un magazin online. Acest lucru vă folosește noile abilități și vă permite să vă folosiți noile cunoștințe.

Până la final, veți fi pe deplin versat în crearea de aplicații în stil profesional cu Vuetify.

Introducere pentru instructor

Gwen Faraday este inginer software, autor, vorbitor și creator de conținut, care conduce și un canal Youtube, Academia Faraday, unde predă o gamă largă de subiecte, inclusiv Vue.js și Vuetify. Acest lucru o face profesorul perfect pentru a vă duce în această călătorie de învățare și a vă aduce abilitățile Vuetify la nivelul următor.

Condiții prealabile

Pentru a învăța cel mai mult din acest tutorial, veți avea nevoie de o înțelegere decentă a HTML, CSS, Javascript și Vue.js. Dacă nu sunteți încă acolo, consultați cursurile gratuite gratuite ale Scrimba pentru a vă pune la curent:

Dacă sunteți gata să loviți terenul cu Vuetify, hai să intrăm!

Introducere în Vuetify

În prima distribuție, Gwen ne introduce în Vuetify și împărtășește cele două depozite Github unde a stocat tot codul, componente de bază și vuetify-responsive. Acest lucru ne permite să descărcăm codul și să-l încercăm singuri.

Ce este proiectarea materialelor?

Urmatorul, aflăm despre Material Design, un standard dezvoltat de Google pentru implementarea interfețelor accesibile, ușor de utilizat.

Standardul pentru materiale oferă un set de reguli pentru cele mai comune elemente găsite pe paginile web, inclusiv butoane, text, navigare și caracteristici mai avansate, cum ar fi mișcarea și înălțimea.

Vuetify depune eforturi importante pentru implementarea acestui standard, oferind o grămadă de elemente UI compatibile gata făcute, pe care le putem adăuga în aplicația Vue.js direct din cutie.

Mai întâi uită-te la codul Vuetify

În următoarea distribuție, Gwen ne oferă prima noastră privire asupra codului Vuetify prin crearea unei aplicații Vue, adăugarea unei proprietăți Vuetify și crearea unui nou obiect Vuetify:

new Vue({
	el: "#app",
	vuetify: new Vuetify({}),
	data: {
		message: "Using Single File Components",
	},
});

Apoi, Gwen ne arată <v-app> element, care este componenta rădăcină a tuturor elementelor Vuetify (componentele Vuetify trebuie să se încadreze în <v-app>):

<v-app>
     <v-content>
          <playground></playground>
     </v-content>
</v-app>

Tipografie

Tipografie Vuetify
Faceți clic pe imagine pentru a accesa cursul.

În următorul scrim, vedem câteva dintre opțiunile oferite de Vuetify pentru a gestiona tipografia, inclusiv titluri, titluri, subtitrări și textul corpului. De asemenea, vedem cum să schimbăm culoarea textului și culoarea de fundal.

<v-card-text>
     <h1 class="display-4 purple yellow--text">Heading 1</h1>
     <h2 class="display-3">Heading 2</h2>
     <h3 class="display-2">Heading 3</h3>
     <h4 class="title">Title</h4>
     <h5 class="subtitle-1">Subtitle</h5>
     <p class="body-1">Body</p>
</v-card-text>

În cele din urmă, vedem cum să folosim clasele Vuetify pentru a regla greutatea și stilul fontului:

<h1 class="font-italic font-weight-light">Heading 1</h1>

Notă: Clasele Vuetify înlocuiesc orice alte stiluri pe care browserul le aplică etichetelor HTML.

Spațiere

Urmatorul, explorăm câteva dintre clasele de spațiu din Vuetify, care ne permit să adăugăm margini și padding. Vedem și cum să schimbăm dimensiunea spațiului.

<h3 class="ml-5">Spacing</h3>

Cel mai bun dintre toate, Gwen ne arată, de asemenea, modul în care cursurile Vuetify vă pot ajuta cu acel graal sfânt al stilului aplicațiilor – centrarea unui element! Faceți clic pe curs pentru a afla mai multe.

Butoane

Butoane Vuetify
Faceți clic pe imagine pentru a accesa cursul.

În următorul scrim, ne uităm la unele dintre opțiunile disponibile cu componenta butonului Vuetify, inclusiv butoane cu text, pictograme sau ambele.

<v-btn large block>Submit</v-btn>

În cele din urmă, ne uităm la cum să construim butoane personalizate folosind clase de mai devreme.

<button v-ripple class="elevation-2 py-2 px-4">
     Submit
</button>

Navigați Vuetify
Faceți clic pe imagine pentru a accesa cursul.

Urmatorul, ne uităm la cele două opțiuni de navigare principale disponibile în Vuetify,<v-app-bar> și <v-toolbar>. Ambele elemente de navigare oferă dimensiunea automată a butoanelor și a pictogramelor, pictogramele de navigare și posibilitatea de a gestiona listele derulante.

<v-toolbar color="deep-purple accent-4" dense dark>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App Title</v-toolbar-title></v-toolbar>

Faceți clic să vezi toate acestea în acțiune!

Grilă

Grila Vuetify
Faceți clic pe imagine pentru a accesa cursul.

În următorul scrim, Gwen ne conduce prin sistemul de rețea Vuetify, care este împărțit în 12 coloane, cu cinci puncte de întrerupere media încorporate pentru gestionarea diferitelor dimensiuni ale ecranului.

<v-row>
    <v-col cols="12" sm="6">
        <v-card
        class="pa-2"
        outlined
        tile
        >
        Column
        </v-card>
    </v-col>
</v-row>

Card

Card Vuetify
Faceți clic pe imagine pentru a accesa cursul.

În această distribuție, Gwen explică faptul că Vuetify folosește un <v-card> componentă ca împachetare pentru orice card UI. Această componentă poate lua accesorii, clase și sloturi și are evenimente personalizate, permițând cărți îngrijite și bine aliniate în orice caz de utilizare.

 <v-card-title>
    <v-icon
        large
        left
    >
        mdi-twitter
    </v-icon>
    </v-card-title>

    <v-card-text class="headline font-weight-bold">
    "Vue Rocks!"
    </v-card-text>

</v-card>

Gwen ne introduce, de asemenea, în <v-spacer> element, care ne permite să adăugăm cu ușurință spațiu alb între elemente.

În cele din urmă, verificăm Playground.vue fișier – un spațiu pentru noi pentru a explora caracteristicile Vuetify Gwen ne-a arătat până acum. Peste cap de la curs pentru a încerca singur și a vedea ce poate face Vuetify.

Navigare magazin

Navigați magazinul web Vuetify
Faceți clic pe imagine pentru a accesa cursul.

Următor →, este timpul să începem să construim aplicația magazinului nostru. Gwen ne pornește prin adăugarea unei bare de navigare care include receptivitatea și un meniu cu sertare. De asemenea, parcurgem câteva opțiuni pentru stil, inclusiv pictograme și un meniu dens.

Pagina principala

Urmatorul, este timpul să adăugați o pagină de pornire. Gwen adaugă antetul și un subsol și ne pune apoi provocarea de a codifica secțiunea de mijloc folosind machetele furnizate. Peste cap de la screencast pentru a vă testa noile abilități Vuetify și a vă compara munca cu soluția Gwen.

Pentru a termina, Gwen ne arată <v-snackbar> element, care poate fi folosit pentru a notifica un utilizator când un produs a fost adăugat în coș.

<v-snackbar
	v-model="$store.state.snackbar.show"
	:multi-line="true"
	:right="true"
	:top="true"
	:timeout="6000"
	:color="$store.state.snackbar.variant"
>
    {{ $store.state.snackbar.message }}
    <v-btn
    dark
    text
    @click="$store.commit('updateSnackbar', { show: false })"
    >
    Close
    </v-btn>
</v-snackbar>

Pagină magazin

Pagina magazinului web Vuetify
Faceți clic pe imagine pentru a accesa cursul.

În următorul Scrim construim pagina magazinului nostru folosind elemente de grilă Vuetify. În primul rând, adăugăm carduri de produs prin reutilizarea cardurilor pe care le-am construit pentru pagina noastră principală. Apoi, Gwen ne provoacă să construim o bară laterală cu <v-sheet> și <v-expansion-panels> elemente.

Peste cap de la distribuție pentru a încerca provocarea.

Pagina coșului

Pagina coșului Vuetify
Faceți clic pe imagine pentru a accesa cursul.

Urmatorul, adăugăm o pagină de coș la aplicația noastră. Încă o dată, Gwen ne pune provocarea de a codifica pagina conform machetelor sale, care este o practică excelentă pentru codificarea din lumea reală și flexează memoria musculară necesară pentru a deveni un vrăjitor Vuetify.

Faceți clic pentru a oferi provocării cea mai bună lovitură înainte de a compara munca dvs. cu codul final al lui Gwen. Nu uitați, puteți oricând să vă uitați înapoi la scrims-urile anterioare sau să consultați documentele Vuetify dacă aveți probleme.

Ecran Checkout

În scrimul final al codului, construim un flux simplu de verificare folosind <v-stepper> element.

<v-stepper-header>
    <v-stepper-step
        step="1"
        :complete="step > 1"
    />
    <v-divider />
    <v-stepper-step
        step="2"
        :complete="step > 2"
    />
    <v-divider />
    <v-stepper-step
        step="3"
    />
    </v-stepper-header>

Pentru a termina cursul, Gwen subliniază că există câteva caracteristici în machete pe care nu le-am acoperit și ne încurajează să încercăm singuri să le codificăm folosind interfața interactivă a Scrimba.

Concluzie

Un imens bine făcut pentru finalizarea cursului! Sper că ți s-a părut util și ai acum încrederea în a construi aplicații uimitoare folosind Vuetify. De ce să nu continuați călătoria dvs. de învățare, verificând gama imensă de alte subiecte disponibile la Scrimba?

Oriunde ai merge mai departe, codificare fericită 🙂