Forstå Vue.js CLI og hvordan du bruker den

Vue.js CLI (Command Line Interface) er et kraftig verktøy som forenkler prosessen med å sette opp, utvikle og administrere Vue.js-prosjekter. Det gir en standardisert og effektiv måte å lage nye prosjekter på, administrere avhengigheter og konfigurere byggeinnstillinger. Denne artikkelen vil utforske funksjonene til Vue CLI og demonstrere hvordan du bruker den effektivt.

Installerer Vue CLI

For å begynne å bruke Vue CLI, må du installere den globalt på systemet ditt. Sørg for at du har Node.js og npm (Node Package Manager) installert, og kjør deretter følgende kommando i terminalen eller ledeteksten:

npm install -g @vue/cli

Denne kommandoen installerer Vue CLI globalt, og gjør kommandoen vue tilgjengelig for å opprette og administrere Vue.js-prosjekter.

Opprette et nytt Vue.js-prosjekt

Med Vue CLI installert kan du enkelt opprette et nytt Vue.js-prosjekt ved å kjøre følgende kommando:

vue create my-vue-project

Du vil bli bedt om å velge en forhåndsinnstilling for prosjektet ditt. Du kan velge fra standard forhåndsinnstilling, som inkluderer Babel og ESLint, eller manuelt velge funksjoner som Vue Router, Vuex og TypeScript. For nybegynnere anbefales det å velge standard forhåndsinnstilling ved å trykke Enter.

Forstå Vue CLI-forhåndsinnstillinger

Vue CLI gir flere alternativer for å konfigurere prosjektet ditt gjennom forhåndsinnstillinger:

• Standard forhåndsinnstilling: Inkluderer viktige verktøy som Babel og ESLint. Passer for de fleste prosjekter og et godt utgangspunkt for nybegynnere.
• Velg funksjoner manuelt: Lar deg velge spesifikke funksjoner som Vue Router for ruting, Vuex for state management, TypeScript for typekontroll og mer.

Prosjektstruktur

Når prosjektet ditt er opprettet, vil du se en standard Vue.js-prosjektstruktur. Her er noen viktige mapper og filer:

• src: Inneholder kildekoden for applikasjonen din, inkludert komponenter, visninger og stiler.
• public: Inneholder statiske ressurser og index.html-filen, som fungerer som inngangspunkt for søknaden din.
• src/main.js: Oppføringsfilen for Vue-applikasjonen. Initialiserer Vue-forekomsten og monterer den til DOM.
• src/App.vue: Rotkomponenten til applikasjonen din. Du kan tilpasse denne filen for å definere hovedoppsettet til appen din.
• src/components: Inneholder Vue-komponenter. Du kan legge til nye komponenter her og importere dem til applikasjonen din.

Kjører utviklingsserveren

For å se Vue.js-applikasjonen din i aksjon, start utviklingsserveren ved å kjøre følgende kommando:

npm run serve

Dette vil starte en lokal server på http://localhost:8080 (eller en annen tilgjengelig port). Åpne denne URL-en i nettleseren for å se applikasjonen.

Bygg for produksjon

Når du er klar til å distribuere applikasjonen din, må du bygge den for produksjon. Kjør følgende kommando for å lage en produksjonsklar build:

npm run build

Denne kommandoen genererer optimaliserte og minifiserte filer i dist-mappen, som du kan distribuere til webserveren din.

Bruker Vue CLI Plugins

Vue CLI støtter plugins som legger til funksjoner og muligheter til prosjektet ditt. For å installere en plugin, kjør følgende kommando:

vue add 

For å legge til Vue Router til prosjektet ditt, kjører du for eksempel:

vue add router

For å fjerne en plugin, bruk kommandoen vue remove:

vue remove router

Plugins kan også installeres og administreres gjennom vue.config.js-filen eller ved å endre prosjektets konfigurasjon.

Tilpasse Vue CLI-konfigurasjon

Du kan tilpasse Vue CLIs konfigurasjon ved å opprette eller endre vue.config.js-filen i roten av prosjektet. Denne filen lar deg justere ulike innstillinger som proxy-konfigurasjoner, offentlige stier og mer.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

Konklusjon

Vue.js CLI er et kraftig verktøy som forenkler prosessen med å opprette, administrere og konfigurere Vue.js-prosjekter. Ved å bruke Vue CLI kan du raskt sette opp et nytt prosjekt, kjøre en utviklingsserver, bygge for produksjon og tilpasse prosjektet med plugins og konfigurasjonsalternativer. Med disse egenskapene er du godt rustet til å begynne å utvikle moderne, dynamiske nettapplikasjoner med Vue.js.