Delen via

Zelfstudie: Vue.js voor beginners

Als u nog geen ervaring hebt met het gebruik van Vue.js, helpt deze handleiding u om aan de slag te gaan met enkele basisprincipes.

Vereiste voorwaarden

NodeJS uitproberen met Visual Studio Code

Als u deze nog niet hebt, installeert u VS Code. We raden u aan VS Code in Windows te installeren, ongeacht of u Vue wilt gebruiken in Windows of WSL.

  1. Open je opdrachtprompt en maak een nieuwe map: mkdir HelloVue, en ga naar de map: cd HelloVue

  2. Installeer de Vue CLI: npm install -g @vue/cli

  3. Maak uw Vue-app: vue create hello-vue-app

    U moet kiezen of u Vue 2 of Vue 3 Preview wilt gebruiken of handmatig de gewenste functies wilt selecteren.

    Vue CLI vooraf ingestelde

  4. Open de map van uw nieuwe hello-vue-app: cd hello-vue-app

  5. Probeer de nieuwe Vue-app uit te voeren in uw webbrowser: npm run serve

    U zou "Welkom bij uw Vue.js-app" op http://localhost:8080 in uw browser moeten zien. U kunt drukken Ctrl+C om de vue-cli-serviceserver te stoppen.

    Opmerking

    Als u WSL (met Ubuntu of uw favoriete Linux-distributie) gebruikt voor deze zelfstudie, moet u ervoor zorgen dat u de externe WSL-extensie hebt geïnstalleerd voor de beste ervaring met het uitvoeren en bewerken van uw code met externe VS-server.

  6. Probeer het welkomstbericht bij te werken door de broncode van uw Vue-app in VS Code te openen en voer het volgende in: code .

  7. VS Code zal starten en uw Vue-toepassing weergeven in de Bestandsverkenner. Voer uw app opnieuw uit in de terminal met npm run serve en zorg dat uw webbrowser openstaat op localhost, zodat u de welkomstpagina van de Vue-applicatie kunt zien. Zoek het App.vue bestand in VS Code. Probeer 'Welkom bij uw Vue.js App' te wijzigen in 'Welkom bij de Jungle!'. U ziet uw Vue-app 'hot reload' zodra u de wijziging opslaat.

    Vue-app hotloaden bij het wijzigen van gif-animaties

Aanvullende bronnen

  • Last updated on