Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
In deze inleiding van 5-10 minuten tot de IDE (Integrated Development Environment) van Visual Studio maakt en voert u een eenvoudige Vue.js-webtoepassing uit.
Vereiste voorwaarden
Je moet Visual Studio en de Node.js-ontwikkelworkload geïnstalleerd hebben.
Als u Visual Studio 2019 nog niet hebt geïnstalleerd, gaat u naar de downloadpagina van Visual Studio om deze gratis te installeren.
Als u de workload wilt installeren maar visual Studio al hebt, gaat u naar Tools>Get Tools and Features..., waarmee het installatieprogramma van Visual Studio wordt geopend. Kies de Node.js ontwikkelomvang en kies Wijzigen.
U moet de Node.js runtime hebben geïnstalleerd.
Als u deze niet hebt geïnstalleerd, raden we u aan de LTS-versie van de Node.js-website te installeren voor de beste compatibiliteit met externe frameworks en bibliotheken. Node.js is gebouwd voor 32-bits en 64-bits architecturen. De Node.js-hulpprogramma's in Visual Studio, opgenomen in de Node.js-workload, ondersteunen beide versies. Er is slechts één vereist en het Node.js installatieprogramma ondersteunt slechts één installatie tegelijk.
Over het algemeen detecteert Visual Studio automatisch de geïnstalleerde Node.js runtime. Als er geen geïnstalleerde runtime wordt gedetecteerd, kunt u uw project configureren om te verwijzen naar de geïnstalleerde runtime op de eigenschappenpagina (nadat u een project hebt gemaakt, met de rechtermuisknop op het projectknooppunt hebt geklikt, Eigenschappen hebt gekozen en het padNode.exe hebt ingesteld). U kunt een globale installatie van Node.js gebruiken of u kunt het pad naar een lokale interpreter opgeven in elk van uw Node.js projecten.
Een project maken
Eerst maakt u een Vue.js webtoepassingsproject.
Als u de Node.js runtime nog niet hebt geïnstalleerd, installeert u de LTS-versie vanaf de Node.js website.
Zie de vereisten voor meer informatie.
Open Visual Studio.
Maak een nieuw project.
Druk op Esc om het startvenster te sluiten. Typ Ctrl + Q om het zoekvak te openen, typ Basic Vue.jsen kies vervolgens Basic Vue.js-webtoepassing (JavaScript of TypeScript). Typ in het dialoogvenster dat wordt weergegeven de naam basic-vuejs en kies Maken.
Als u de projectsjabloon Basic Vue.js Web Application niet ziet, moet u de Node.js ontwikkelworkload toevoegen. Zie de vereisten voor gedetailleerde instructies.
Visual Studio maakt het nieuwe project. Het nieuwe project wordt geopend in Solution Explorer (rechterdeelvenster).
Controleer het uitvoervenster (onderste deelvenster) op voortgang bij het installeren van de npm-pakketten die vereist zijn voor de toepassing.
Open in Solution Explorer het npm-knooppunt en zorg ervoor dat alle vermelde NPM-pakketten zijn geïnstalleerd.
Als er pakketten ontbreken (uitroeptekenpictogram), kunt u met de rechtermuisknop op het npm-knooppunt klikken en ontbrekende npm-pakketten installeren kiezen.
De IDE verkennen
Bekijk Solution Explorer in het rechterdeelvenster.
Vetgedrukt is uw project, met de naam die u hebt opgegeven in het dialoogvenster Nieuw project . Op schijf wordt dit project vertegenwoordigd door een . njsproj-bestand in uw projectmap.
Op het hoogste niveau is een oplossing die standaard dezelfde naam heeft als uw project. Een oplossing, vertegenwoordigd door een . Sln-bestand op schijf is een container voor een of meer gerelateerde projecten.
Het npm-knooppunt toont geïnstalleerde NPM-pakketten. U kunt met de rechtermuisknop op het npm-knooppunt klikken om npm-pakketten te zoeken en te installeren met behulp van een dialoogvenster.
Als u npm-pakketten wilt installeren of Node.js opdrachten wilt uitvoeren vanaf een opdrachtprompt, klikt u met de rechtermuisknop op het projectknooppunt en kiest u Hier opdrachtprompt openen.
Een .vue-bestand toevoegen aan het project
Klik in Solution Explorer met de rechtermuisknop op een map zoals de map src/components en kiesNieuw item>.
Als u niet alle itemsjablonen ziet, kiest u Alle sjablonen weergevenen kiest u vervolgens de itemsjabloon.
Selecteer javaScript Vue Single File Component of TypeScript Vue Single File Component en klik vervolgens op Toevoegen.
Visual Studio voegt het nieuwe bestand toe aan het project.
Het project bouwen
Kies vervolgens Build Build>Solution om het project te bouwen.
Controleer het uitvoervenster om de buildresultaten te bekijken en kies Build in de lijst Uitvoer weergeven .
De JavaScript Vue.js projectsjabloon (en oudere versies van het TypeScript-sjabloon) gebruiken het build npm-script door een post-build evenement te configureren. Als u deze instelling wilt wijzigen, opent u het projectbestand (<projectname.njsproj>) vanuit Windows Verkenner en zoekt u deze coderegel:
<PostBuildEvent>npm run build</PostBuildEvent>
De toepassing uitvoeren
Druk op Ctrl+F5 (of Debuggen> Starten zonder debuggen) om de toepassing uit te voeren.
In de console ziet u een bericht Dat de ontwikkelserver wordt gestart.
Vervolgens wordt de app geopend in een browser.
Als u de actieve app niet ziet, vernieuwt u de pagina.
Sluit de webbrowser.
Gefeliciteerd met het voltooien van deze Quickstart. We hopen dat u iets hebt geleerd over het gebruik van de Visual Studio IDE met Vue.js. Als u meer wilt weten over de mogelijkheden ervan, gaat u verder met een zelfstudie in de sectie Zelfstudies van de inhoudsopgave.