Sette opp ditt første Vue.js-prosjekt

Vue.js er et progressivt JavaScript-rammeverk for å bygge brukergrensesnitt og enkeltsideapplikasjoner. Det er svært fleksibelt og enkelt å integrere med andre biblioteker eller eksisterende prosjekter. Denne guiden vil lede deg gjennom trinnene for å sette opp ditt første Vue.js-prosjekt ved å bruke Vue CLI, et kraftig verktøy for stillas og administrering av Vue-applikasjoner.

Forutsetninger

Før du setter opp et Vue.js-prosjekt, sørg for at du har følgende installert på systemet ditt:

• Node.js og npm: Vue.js krever at Node.js og npm (Node Package Manager) er installert. Du kan laste dem ned fra den offisielle Node.js-nettstedet.

Trinn 1: Installer Vue CLI

Vue CLI (Command Line Interface) er et verktøy som hjelper deg å lage og administrere Vue.js-prosjekter med letthet. For å installere Vue CLI globalt på systemet ditt, åpne terminalen eller ledeteksten og kjør følgende kommando:

npm install -g @vue/cli

Denne kommandoen installerer Vue CLI globalt, og lar deg få tilgang til vue-kommandoen fra hvor som helst i terminalen din.

Trinn 2: Opprett et nytt Vue-prosjekt

Når Vue CLI er installert, kan du opprette et nytt Vue.js-prosjekt ved å kjøre følgende kommando:

vue create my-vue-app

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

Vue CLI vil da opprette en ny mappe kalt my-vue-app og sette opp prosjektstrukturen med alle nødvendige filer og konfigurasjoner.

Trinn 3: Naviger til prosjektmappen

Når prosjektet er opprettet, naviger til prosjektmappen ved å bruke følgende kommando:

cd my-vue-app

Dette vil endre terminalens arbeidskatalog til den nyopprettede Vue.js-prosjektmappen.

Trinn 4: Kjør utviklingsserveren

For å se din nye Vue.js-applikasjon i aksjon, start den lokale utviklingsserveren ved å kjøre:

npm run serve

Denne kommandoen vil starte en utviklingsserver på http://localhost:8080 (eller en annen tilgjengelig port). Åpne nettleseren din og naviger til denne URL-en for å se din nye Vue.js-applikasjon.

Forstå prosjektstrukturen

Etter å ha opprettet et nytt Vue.js-prosjekt, vil du se en godt organisert prosjektstruktur. Her er nøkkelfilene og mappene:

• src: Denne mappen inneholder kildekoden for Vue.js-applikasjonen. Alle komponenter, visninger og stiler er plassert her.
• public: Denne mappen inneholder statiske ressurser som bilder, fonter og index.html-filen, som fungerer som inngangspunktet for applikasjonen din.
• src/main.js: Hovedinngangspunktet for Vue.js-applikasjonen din. Denne filen initialiserer Vue-forekomsten og monterer den til DOM.
• src/App.vue: Rotkomponenten til applikasjonen din. Du kan endre denne filen for å endre hovedoppsettet til appen din.
• src/components: Denne mappen inneholder eksempler på Vue-komponenter som HelloWorld.vue. Du kan legge til nye komponenter her og importere dem til applikasjonen din.

Trinn 5: Tilpass applikasjonen din

Du kan begynne å tilpasse Vue.js-applikasjonen din ved å redigere App.vue-filen og opprette nye komponenter. Her er et eksempel på en enkel Vue-komponent:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Lagre endringene dine og se resultatene umiddelbart i nettleseren din, takket være Vues funksjon for hot-reloading.

Konklusjon

Gratulerer! Du har konfigurert ditt første Vue.js-prosjekt og lært det grunnleggende om hvordan du oppretter og kjører en Vue-applikasjon. Med Vue CLI har du et kraftig verktøy som hjelper deg med stillas, utvikle og administrere Vue.js-prosjektene dine. Herfra kan du utforske mer avanserte funksjoner som Vue Router for ruting, Vuex for state management og Composition API for kraftigere og mer fleksibel utvikling.