Quickstart: Een Vue.js-project maken

In deze quickstart maakt en voert u een basis-Vue.js front-endwebtoepassing uit. Dit artikel bevat een inleiding van 5-10 minuten tot de Visual Studio IDE (Integrated Development Environment).

Voorwaarden

Bereid uw configuratie voor met de volgende vereisten:

Uw Vue-app maken

Maak een Vue.js-web-app door de volgende stappen uit te voeren:

  1. Selecteer in het Visual Studio-venster Start (selecteer Bestand>Startvenster) Een nieuw project maken.

    Schermopname die laat zien hoe u de optie Een nieuw project maken selecteert.

    Schermopname die laat zien hoe u de optie Een nieuw project maken selecteert.

  2. Voer In het dialoogvenster Een nieuw project makenVue in het zoekvak in. Selecteer de Vue-app-sjabloon voor JavaScript of TypeScript en selecteer Volgende.

    Schermopname die laat zien hoe u een Vue-sjabloon kiest voor JavaScript of TypeScript.

    Schermopname die laat zien hoe u een Vue-sjabloon kiest voor JavaScript of TypeScript.

    In Visual Studio versie 11 en hoger van 2022 wordt de sjabloonnaam Standalone JavaScript Vue Project gewijzigd in Vue App.

  3. Voer een naam in voor uw project en oplossing en selecteer Maken.

Wacht tot Visual Studio het nieuwe project hebt gemaakt.

De projecteigenschappen weergeven

Met de standaardprojectinstellingen kunt u het project bouwen en fouten opsporen.

Als u instellingen wilt wijzigen, voert u de volgende stappen uit:

  1. Klik met de rechtermuisknop op het project in Solution Explorer en selecteer Eigenschappen.

  2. Selecteer in het deelvenster Projecteigenschappen de optie Debug, Linting, Build of Deploy om de bijbehorende eigenschappen weer te geven.

Gebruik het bestand launch.json voor de configuratie van de foutopsporing.

Notitie

In launch.json het configuratiebestand voor foutopsporing worden de opstartinstellingen opgeslagen die zijn gekoppeld aan de actie Starten op de werkbalk Foutopsporing. Het launch.json bestand moet zich onder de .vscode map in uw project bevinden.

Uw project bouwen

Selecteer Build Build>Solution om uw nieuwe project te bouwen.

Uw project starten

Selecteer F5 of gebruik de actie Starten boven aan het venster.

Het project opent een opdrachtprompt met de volgende tekst (of vergelijkbaar):

VITE v4.4.9 ready in 780 ms

Notitie

Controleer de console-uitvoer op berichten, zoals instructies voor het bijwerken van uw versie van Node.js.

Wanneer het proces is voltooid, wordt de basis-Vue.js-app geopend.

Volgende stap