Ga naar hoofdinhoud

Starting with Vue

Opzetten van een Nieuw Vue Project​

In deze les leer je hoe je een nieuw Vue-project opzet met behulp van de Vue CLI. We doorlopen stap voor stap de configuratieopties zodat je een project creëert dat perfect aansluit bij jouw wensen. Je zult ook ontdekken waarom elke keuze belangrijk is en wat de impact ervan is op je project.

Om te beginnen gebruik je het volgende commando in je terminal:

npm create vue@latest

Hierna start een interactieve wizard die je helpt bij het configureren van je project.

vue project init

1. Project Name​

Wat is het?
De naam van je project.

Waarom is dit belangrijk?
Dit wordt de naam van de hoofdmap van je project en heeft invloed op hoe je project herkend wordt, bijvoorbeeld in build-output.

Voorbeeld
Je kunt iets als My-Vue-Project gebruiken.

2. Package Name​

Wat is het?
De naam van je npm-pakket.

Waarom is dit belangrijk?
Dit bepaalt hoe je pakket wordt genoemd wanneer je het publiceert, bijvoorbeeld naar npm.

Voorbeeld
syntra-groepswerk.

3. Add TypeScript?​

Keuzes: No / Yes

Waarom kiezen?
TypeScript voegt types toe aan je JavaScript, wat foutdetectie vergemakkelijkt en ontwikkelervaring verbetert. Kies dit als je werkt aan grotere projecten of een strakkere controle wilt op je code.

4. Add JSX Support?​

Keuzes: No / Yes

Wat is JSX?
JSX (JavaScript XML) is een syntaxis die bekend is van React. In Vue kun je het gebruiken voor component-rendering.

Waarom kiezen?
Dit is vooral handig als je eerder met React hebt gewerkt en JSX wilt gebruiken in je Vue-project.

5. Add Vue Router for Single Page Application development?​

Keuzes: No / Yes

Wat is Vue Router?
Vue Router is de officiële router voor Vue.js, waarmee je meerdere pagina's in je app kunt navigeren zonder herladen.

Waarom kiezen?
Als je een Single Page Application (SPA) bouwt met meerdere pagina’s, is Vue Router essentieel.

6. Add Pinia for State Management?​

Keuzes: No / Yes

Wat is Pinia?
Pinia is de opvolger van Vuex en biedt een efficiënte manier om de staat (data) van je applicatie centraal te beheren.

Waarom kiezen?
Bij grotere projecten helpt Pinia om data te delen tussen componenten, waardoor je structuur en consistentie bewaart.

7. Add Vitest for Unit Testing?​

Keuzes: No / Yes

Wat is Vitest?
Vitest is een snel testframework speciaal ontworpen voor Vite-gebaseerde projecten.

Waarom kiezen?
Kies Vitest als je componenten en logica in je applicatie wilt testen tijdens de ontwikkeling.

8. Add an End-to-End Testing Solution?​

Keuzes: No / Yes

Wat is het?
Hiermee voeg je tools toe zoals Cypress of Playwright om te testen hoe je applicatie functioneert in een echte browseromgeving.

Waarom kiezen?
End-to-end testen zorgt ervoor dat je volledige applicatie, inclusief gebruikersinteracties, werkt zoals verwacht.

9. Add ESLint for Code Quality?​

Keuzes: No / Yes

Wat is ESLint?
ESLint controleert je code op fouten en kan een consistente codestijl afdwingen.

Waarom kiezen?
Dit is handig om de codekwaliteit te verbeteren en veelvoorkomende fouten te vermijden.

10. Add Prettier for Code Formatting?​

Keuzes: No / Yes

Wat is Prettier?
Een tool die automatisch je code opmaakt volgens een consistente stijl.

Waarom kiezen?
Prettier bespaart tijd en zorgt voor een nette en uniforme codebase, vooral in teams.

Wat gebeurt er na het kiezen van deze opties?​

De Vue CLI of Vite-configuratie zal automatisch de benodigde pakketten installeren en instellen op basis van jouw keuzes.
Voorbeeld van wat er wordt aangemaakt:

  • TypeScript: Een tsconfig.json bestand voor types.
  • Vue Router: Een basisrouter in de map src/router.
  • Pinia: Setup voor state management.
  • Vitest: Een teststructuur voor unit tests.
  • ESLint: Een .eslintrc configuratiebestand.
  • Prettier: Setup voor automatische code-opmaak.