Opsætning af dit første Vue.js-projekt

Vue.js er en progressiv JavaScript-ramme til opbygning af brugergrænseflader og enkeltside-applikationer. Det er meget fleksibelt og nemt at integrere med andre biblioteker eller eksisterende projekter. Denne guide vil lede dig gennem trinene til at konfigurere dit første Vue.js-projekt ved hjælp af Vue CLI, et kraftfuldt værktøj til stilladsering og administration af Vue-applikationer.

Forudsætninger

Før du opsætter et Vue.js-projekt, skal du sørge for, at du har følgende installeret på dit system:

• Node.js og npm: Vue.js kræver, at Node.js og npm (Node Package Manager) er installeret. Du kan downloade dem fra det officielle Node.js-websted.

Trin 1: Installer Vue CLI

Vue CLI (Command Line Interface) er et værktøj, der hjælper dig med at oprette og administrere Vue.js-projekter med lethed. For at installere Vue CLI globalt på dit system skal du åbne din terminal eller kommandoprompt og køre følgende kommando:

npm install -g @vue/cli

Denne kommando installerer Vue CLI globalt, så du kan få adgang til vue kommandoen fra hvor som helst i din terminal.

Trin 2: Opret et nyt Vue-projekt

Når Vue CLI er installeret, kan du oprette et nyt Vue.js-projekt ved at køre følgende kommando:

vue create my-vue-app

Du bliver bedt om at vælge en forudindstilling til dit projekt. Du kan enten vælge standardforudindstillingen, som inkluderer Babel og ESLint, eller manuelt vælge funktioner såsom Vue Router, Vuex, TypeScript og mere. For begyndere anbefales det at vælge standardforudindstillingen ved at trykke på Enter.

Vue CLI vil derefter oprette en ny mappe ved navn my-vue-app og opsætte projektstrukturen med alle nødvendige filer og konfigurationer.

Trin 3: Naviger til projektmappen

Når projektet er oprettet, skal du navigere til projektmappen ved hjælp af følgende kommando:

cd my-vue-app

Dette vil ændre din terminals arbejdsmappe til den nyoprettede Vue.js-projektmappe.

Trin 4: Kør udviklingsserveren

For at se din nye Vue.js-applikation i aktion skal du starte den lokale udviklingsserver ved at køre:

npm run serve

Denne kommando vil starte en udviklingsserver på http://localhost:8080 (eller en anden tilgængelig port). Åbn din webbrowser, og naviger til denne URL for at se din nye Vue.js-applikation.

Forståelse af projektstrukturen

Efter at have oprettet et nyt Vue.js-projekt, vil du se en velorganiseret projektstruktur. Her er de vigtigste filer og mapper:

• src: Denne mappe indeholder kildekoden til din Vue.js-applikation. Alle komponenter, visninger og stilarter er placeret her.
• public: Denne mappe indeholder statiske aktiver såsom billeder, skrifttyper og filen index.html, som tjener som indgangspunkt for din applikation.
• src/main.js: Hovedindgangspunktet for din Vue.js-applikation. Denne fil initialiserer Vue-forekomsten og monterer den til DOM.
• src/App.vue: Rodkomponenten i din applikation. Du kan ændre denne fil for at ændre hovedlayoutet for din app.
• src/components: Denne mappe indeholder eksempler på Vue-komponenter som HelloWorld.vue. Du kan tilføje nye komponenter her og importere dem til din applikation.

Trin 5: Tilpas din applikation

Du kan begynde at tilpasse din Vue.js-applikation ved at redigere App.vue-filen og oprette nye komponenter. Her er et eksempel på en simpel 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>

Gem dine ændringer og se resultaterne med det samme i din browser, takket være Vues hot-genindlæsningsfunktion.

Konklusion

Tillykke! Du har med succes konfigureret dit første Vue.js-projekt og lært det grundlæggende i, hvordan du opretter og kører en Vue-applikation. Med Vue CLI har du et kraftfuldt værktøj til at hjælpe dig med at stilladsere, udvikle og administrere dine Vue.js-projekter. Herfra kan du udforske mere avancerede funktioner som Vue Router til routing, Vuex til statsadministration og Composition API for mere kraftfuld og fleksibel udvikling.