Uw eerste Vue.js-project instellen

Vue.js is een progressief JavaScript-framework voor het bouwen van gebruikersinterfaces en single-page-applicaties. Het is zeer flexibel en eenvoudig te integreren met andere bibliotheken of bestaande projecten. Deze gids leidt u door de stappen om uw eerste Vue.js-project op te zetten met behulp van de Vue CLI, een krachtige tool voor het opzetten en beheren van Vue-applicaties.

Vereisten

Voordat u een Vue.js-project opzet, moet u ervoor zorgen dat het volgende op uw systeem is geïnstalleerd:

• Node.js en npm: Vue.js vereist dat Node.js en npm (Node Package Manager) geïnstalleerd zijn. U kunt ze downloaden van de officiële Node.js website.

Stap 1: Vue CLI installeren

De Vue CLI (Command Line Interface) is een tool die u helpt om eenvoudig Vue.js-projecten te maken en beheren. Om Vue CLI wereldwijd op uw systeem te installeren, opent u uw terminal of opdrachtprompt en voert u de volgende opdracht uit:

npm install -g @vue/cli

Met deze opdracht wordt de Vue CLI wereldwijd geïnstalleerd, zodat u overal in uw terminal toegang hebt tot de opdracht vue.

Stap 2: Maak een nieuw Vue-project

Nadat Vue CLI is geïnstalleerd, kunt u een nieuw Vue.js-project maken door de volgende opdracht uit te voeren:

vue create my-vue-app

U wordt gevraagd een preset voor uw project te kiezen. U kunt de standaardpreset selecteren, die Babel en ESLint omvat, of handmatig functies selecteren zoals Vue Router, Vuex, TypeScript en meer. Voor beginners is het raadzaam om de standaardpreset te kiezen door op Enter te drukken.

Vue CLI maakt vervolgens een nieuwe map aan met de naam my-vue-app en stelt de projectstructuur in met alle benodigde bestanden en configuraties.

Stap 3: Navigeer naar de projectmap

Zodra het project is aangemaakt, navigeert u naar de projectmap met behulp van de volgende opdracht:

cd my-vue-app

Hiermee wordt de werkmap van uw terminal gewijzigd naar de nieuw aangemaakte Vue.js-projectmap.

Stap 4: De ontwikkelingsserver uitvoeren

Om uw nieuwe Vue.js-applicatie in actie te zien, start u de lokale ontwikkelserver door het volgende uit te voeren:

npm run serve

Deze opdracht start een ontwikkelserver op http://localhost:8080 (of een andere beschikbare poort). Open uw webbrowser en navigeer naar deze URL om uw nieuwe Vue.js-applicatie te bekijken.

De projectstructuur begrijpen

Nadat u een nieuw Vue.js-project hebt gemaakt, ziet u een goed georganiseerde projectstructuur. Dit zijn de belangrijkste bestanden en mappen:

• src: Deze map bevat de broncode voor uw Vue.js-applicatie. Alle componenten, weergaven en stijlen bevinden zich hier.
• public: Deze map bevat statische bestanden zoals afbeeldingen, lettertypen en het bestand index.html, dat als toegangspunt voor uw toepassing dient.
• src/main.js: Het belangrijkste toegangspunt voor uw Vue.js-applicatie. Dit bestand initialiseert de Vue-instantie en koppelt deze aan de DOM.
• src/App.vue: Het root-component van uw applicatie. U kunt dit bestand aanpassen om de hoofdlay-out van uw app te wijzigen.
• src/components: Deze map bevat voorbeeld Vue-componenten zoals HelloWorld.vue. U kunt hier nieuwe componenten toevoegen en deze importeren in uw applicatie.

Stap 5: Pas uw applicatie aan

U kunt beginnen met het aanpassen van uw Vue.js-applicatie door het bestand App.vue te bewerken en nieuwe componenten te maken. Hier is een voorbeeld van een eenvoudig Vue-component:

<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>

Sla uw wijzigingen op en bekijk de resultaten direct in uw browser, dankzij de hot-reloading-functie van Vue.

Conclusie

Gefeliciteerd! U hebt met succes uw eerste Vue.js-project opgezet en de basisbeginselen geleerd van het maken en uitvoeren van een Vue-applicatie. Met Vue CLI hebt u een krachtige tool om uw Vue.js-projecten te scaffolden, ontwikkelen en beheren. Vanaf hier kunt u meer geavanceerde functies verkennen, zoals Vue Router voor routing, Vuex voor statusbeheer en de Composition API voor krachtigere en flexibelere ontwikkeling.