search

aliceafanasieva / i-love-web

Learning journal, blog, digital gardening
0 stars 0 forks source link

Tutorial Nuxt.js #52

Open aliceafanasieva opened 3 weeks ago

aliceafanasieva commented 3 weeks ago

Opstarten

Voor het opstarten heb ik een tutorial gevolgd op https://nuxt.com/docs/getting-started. Eerst heb ik gecontroleerd of Node.js al op mijn computer stond. Dit deed ik door het volgende commando in mijn terminal te typen:

node -v

Er werd een versienummer teruggegeven, dus Node.js was al geïnstalleerd en klaar voor gebruik. Nuxt.js vereist minimaal versie 16.0.0, en mijn versie was hoger, dus ik kon verder.

Om een nieuw Nuxt.js project aan te maken, installeerde ik de Nuxt CLI-tool genaamd nuxi met dit commando:

sudo npm install -g nuxi

In mijn projectmap choices-choices-the-tech-stack installeerde ik de Nuxt.js package direct in deze map met:

npm install nuxt

Vervolgens maakte ik een pages-map aan en voegde daar een index.vue bestand toe voor de startpagina van de app:

mkdir pages

In pages/index.vue voegde ik wat code toe:

<template>
  <div>
    <h1>dit is mijn nuxt.js pagina</h1>
  </div>
</template>

Git gaf een melding dat er te veel wijzigingen waren en vroeg of ik node_modules aan .gitignore wilde toevoegen. Ik heb "Ja" gekozen, zodat deze map niet werd gevolgd in Git.

Daarna heb ik server opgestart op http://localhost:3000:

npm run dev

aliceafanasieva commented 3 weeks ago

Routing

In Nuxt.js worden pagina's aangemaakt door .vue-bestanden in de pages map. Elke .vue file in pages vertegenwoordigt een route. De .vue bestanden in Nuxt.js gebruiken een