Vue

Hur man skapar komponenter i Vue CLI

Hur man skapar komponenter i Vue CLI
Vue.js tillhandahåller Vue CLI för att tillhandahålla vue-kommandot inuti terminalen för att snabbt bygga ett nytt projekt av Vue.js och kör Vue.js-projekt med hjälp av vue serve kommando. Vue.js tillhandahåller också det grafiska användargränssnittet för att hantera projekten med hjälp av vue ui kommando. Vue.js erkänns som att kombinera två spektakulära ramar, Angular och React, med hjälp av mallsyntaxen för Angular och rekvisita-metoden för React. Det ger det traditionella HTML- och CSS-sättet att skapa en komponent, och i det här inlägget kommer vi att gå igenom processen för att skapa och förstå komponenter i Vue CLI.

Förutsättningar

Innan du börjar med detta finns det några förutsättningar som du måste ha:

Verifiera Vue CLI-installationen

Först och främst, se till att du har den senaste Vue CLI installerad på ditt system. Du kan verifiera att Vue CLI är installerat eller inte på vårt system genom att skriva kommandot nedan:

$ vue --version

Om den är installerad kommer den senaste versionen av Vue CLI att skrivas ut i terminalen. Annars, om den inte är installerad, kan du antingen använda NPM-pakethanteraren eller garnpakethanteraren för att installera Vue CLI. För att installera den med NPM-pakethanteraren måste du skriva kommandot nedan i terminalen:

$ npm installera -g @ vue / cli

I ovanstående kommando är -g flagga används för att installera Vue CLI globalt på ditt system.

När Vue CLI är helt installerat kan du verifiera det genom att skriva kommandot nedan:

$ vue --version

Du kommer att ha den senaste versionen av Vue CLI i utgången.

Projektskapande

Antag nu att du kommer att ställa in hela Vue-projektet på egen hand. I så fall är det inte ett bra val att återuppfinna hjulet; Vue-projektet kan skapas med hjälp av vue kommandot i terminalen eftersom Vue CLI tillhandahåller de redan genererade mallarna för att börja med Vue-projektet.

För att skapa Vue-applikationen, skriv bara kommandot nedan i terminalen:

$ vue skapa projektnamn

Se till att byta ut Projektnamn med önskat projektnamn och träff Stiga på.

Efter några sekunder kommer det att uppmanas att välja standardinställningen eller välja vissa funktioner manuellt.

Välj om du vill ha några anpassade funktioner "Välj funktioner manuellt" tryck på Enter och du kommer att uppmanas med några alternativ som att välja Vue-version, lägga till Vuex eller router. Välj önskat alternativ och tryck Stiga på.

Svara på några nödvändiga konfigurationsfrågor och spara förinställningen för framtida projekt.

Vue-projektet kommer att skapas på ett tag med Vue CLI, och du kan starta utvecklingen i Vue.js.

Starta Vue-applikationen

När Vue-projektet har skapats kan du starta projektet genom att först navigera till projektets katalog med cd-kommandot i terminalen:

$ cd-projektnamn

I projektets katalog startar du Vue-applikationen genom att skriva kommandot nedan i terminalen:

$ npm kör servering

Efter tändningen av Vue-applikationen, besök http: // localhost: 8080 i adressfältet i din favoritwebbläsare:

Du kommer att ha välkomstskärmen i Vue.js-projektet.

Skapande av en komponent i Vue

Skapa en för att skapa en komponent i Vue-projektet .vue filen i komponenter mappen och ange namnet du väljer.

Nu, i detta nyskapade .vue fil kan du skriva HTML, Javascript och CSS i