Vue.JS gir Vue CLI for å gi vue -kommandoen inne i terminalen for raskt stillaser et nytt prosjekt av VUE.JS og kjør Vue.JS -prosjektet ved hjelp av Vue serverer kommando. Vue.JS gir også det grafiske brukergrensesnittet for å administrere prosjektene ved å bruke vue ui kommando. Vue.JS er anerkjent som å kombinere to spektakulære rammer, kantete og reagere, ved hjelp av templeringssyntaks for vinkel- og rekvisitemetode for React. Det gir den tradisjonelle HTML- og CSS -måten å lage en komponent på, og i dette innlegget vil vi gå gjennom prosessen med å lage og forstå komponenter i Vue CLI.

Forutsetninger

Før du kommer i gang med dette, er det noen forutsetninger du må ha:

• Grunnleggende kunnskap om HTML, CSS og JavaScript.
• Node.JS installert på operativsystemet ditt.

Bekreft Vue CLI -installasjonen

Først av alt, sørg for at du har den siste Vue CLI installert på systemet ditt. Du kan bekrefte at enten Vue CLI er installert eller ikke på systemet vårt ved å skrive kommandoen gitt nedenfor:

$ VUE -Versjon

Hvis den er installert, vil du ha den siste versjonen av Vue CLI skrevet ut i terminalen. Ellers, hvis den ikke er installert, kan du enten bruke NPM Package Manager eller Yarn Package Manager for å installere Vue CLI. For å installere den ved hjelp av NPM Package Manager, må du skrive kommandoen gitt nedenfor i terminalen:

$ npm install -g @vue/cli

I kommandoen ovenfor, -g Flagg brukes til å installere Vue CLI globalt på systemet ditt.

Når Vue CLI er fullstendig installert, kan du bekrefte den ved å skrive kommandoen gitt nedenfor:

$ VUE -Versjon

Du vil ha den siste versjonen av Vue CLI i utgangen.

Prosjektoppretting

Anta at du kommer til å sette opp hele Vue -prosjektet på egen hånd. I så fall er det ikke et godt valg å finne opp hjulet på nytt; Vue -prosjektet kan opprettes ved hjelp av vue Kommando i terminalen fordi Vue CLI gir de allerede genererte malene til å starte med Vue -prosjektet.

For å opprette VUE -applikasjonen, skriver du bare kommandoen gitt nedenfor i terminalen:

$ vue lage prosjektnavn

Sørg for å erstatte prosjektnavn med ønsket prosjektnavn og treff Tast inn.

Etter et par sekunder vil det be om å velge standard forhåndsinnstilling eller velge noen funksjoner manuelt.

Hvis du vil ha noen tilpassede funksjoner, velg "Velg funksjoner manuelt," Hit Enter, så blir du bedt om med noen alternativer som å velge Vue -versjonen, legge til Vuex eller ruter. Velg ønsket alternativ og treff Tast inn.

Svar på noen nødvendige konfigurasjonsspørsmål og lagre forhåndsinnstillingen for fremtidige prosjekter.

Vue -prosjektet vil bli opprettet på en stund ved å bruke Vue CLI, og du kan starte utviklingen i Vue.JS.

Starter Vue -applikasjonen

Når Vue -prosjektet er opprettet, kan du starte prosjektet ved å først navigere til prosjektets katalog ved å bruke CD -kommandoen i terminalen:

$ CD-prosjektnavn

I prosjektets katalog, start Vue -applikasjonen ved å skrive kommandoen gitt nedenfor i terminalen:

$ npm run serverer

Etter tenningen av Vue -applikasjonen, besøk http: // localhost: 8080 i adressefeltet til din favoritt nettleser:

Du vil ha velkomstskjermen til Vue.JS -prosjekt.

Opprettelse av en komponent i vue

For å lage en komponent i Vue -prosjektet, oppretter du en .vue fil i komponenter mappe og gi den navnet du ønsker.

Nå, i denne nyopprettede .vue fil, du kan skrive HTML, JavaScript og CSS i henholdsvis, og tagger.

Åpne opp .vue fil og skriv koden du vil skrive. For eksempel:

En ny komponent

Dette er en tekst i NewComponent.

Når du er ferdig med HTML -delen, gi denne komponenten et navn i taggen som vist i kodebiten nedenfor:

Etter å ha opprettet komponenten, la oss se hvordan du importerer den og bruker den på en annen side eller komponent.

Import av en komponent i vue

Importsyntaks for import av en komponent i en hvilken som helst annen komponent av Vue er ganske enkel og enkel; Du må bare importere komponenten inne i skriptetoden ved hjelp av ES6 -syntaks som vist i kodebiten nedenfor:

Etter å ha importert komponenten vellykket, er alt du trenger å gjøre å lage et objekt med navnet på komponenter og oppgi navnet i komponenter objekt som vist nedenfor:

Nå kan du bruke den hvor som helst inne i taggen til komponenten. For eksempel, hvis vi vil importere det til App.vue, Syntaksen ville være slik:

Etter å ha fullført alt dette oppsettet, lagre hver eneste fil du har endret og gå tilbake til nettleseren

Du kan være vitne til i skjermbildet vedlagt at komponenten importeres med suksess og helt fint på websiden.

Konklusjon

Opprette, importere og bruke en komponent i en hvilken som helst annen komponent i Vue.JS er like enkelt som å si det. I dette innlegget går vi gjennom hele prosessen med skapelse, tillegg og bruk av en komponent i Vue.JS.