Not
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
I den här introduktionen på 5–10 minuter till Visual Studio Integrated Development Environment (IDE) skapar och kör du en enkel Vue.js webbapp.
Förutsättningar
Du måste ha Visual Studio installerat och utvecklingsverktyget för Node.js.
Om du inte redan har installerat Visual Studio 2019 går du till nedladdningssidan för Visual Studio för att installera det kostnadsfritt.
Om du behöver installera arbetsbelastningen men redan har Visual Studio går du till Verktyg>Hämta verktyg och funktioner..., som öppnar Installationsprogrammet för Visual Studio. Välj arbetsbelastningen Node.js utveckling och välj sedan Ändra.
Du måste ha Node.js-körningen installerad.
Om du inte har installerat den rekommenderar vi att du installerar LTS-versionen från Node.js webbplats för bästa kompatibilitet med externa ramverk och bibliotek. Node.js har skapats för 32-bitars- och 64-bitarsarkitekturer. De Node.js-verktyg som ingår i Node.js-arbetsbelastningen i Visual Studio stöder båda versionerna. Endast en krävs och installationsprogrammet för Node.js stöder bara en som installeras i taget.
I allmänhet identifierar Visual Studio automatiskt den installerade Node.js-körningen. Om den inte identifierar en installerad körning kan du konfigurera projektet så att det refererar till den installerade körningen på egenskapssidan (när du har skapat ett projekt högerklickar du på projektnoden, väljer Egenskaper och anger sökvägenNode.exe). Du kan använda en global installation av Node.js eller ange sökvägen till en lokal tolk i vart och ett av dina Node.js projekt.
Skapa ett projekt
Först skapar du ett Vue.js webbprogramprojekt.
Om du inte redan har installerat Node.js-körningen installerar du LTS-versionen från Node.js webbplats.
För mer information, se förutsättningarna.
Öppna Visual Studio.
Skapa ett nytt projekt.
Tryck på Esc för att stänga startfönstret. Skriv Ctrl + Q för att öppna sökrutan, skriv Grundläggande Vue.jsoch välj sedan Grundläggande Vue.js webbprogram (antingen JavaScript eller TypeScript). I dialogrutan som visas skriver du namnet basic-vuejs och väljer sedan Skapa.
Om du inte ser projektmallen Grundläggande Vue.js webbprogram måste du lägga till arbetsbelastningen Node.js utveckling . Detaljerade instruktioner finns i Förutsättningar.
Visual Studio skapar det nya projektet. Det nya projektet öppnas i Solution Explorer (höger fönster).
Kontrollera utdatafönstret (den nedre rutan) för att se statusen för installationen av de npm-paket som krävs för applikationen.
Öppna noden npm i Solution Explorer och kontrollera att alla npm-paket som visas är installerade.
Om några paket saknas (utropsteckenikonen) kan du högerklicka på noden npm och välja Installera npm-paket som saknas.
Utforska IDE
Ta en titt på Solution Explorer i den högra rutan.
Markerat i fetstil är ditt projekt med det namn som du gav i dialogrutan Nytt projekt . På disken representeras det här projektet av en . njsproj-fil i projektmappen.
På den översta nivån finns en lösning som som standard har samma namn som projektet. En lösning som representeras av en . sln-fil på disk, är en container för ett eller flera relaterade projekt.
Noden npm visar alla installerade npm-paket. Du kan högerklicka på noden npm för att söka efter och installera npm-paket med hjälp av en dialogruta.
Om du vill installera npm-paket eller köra Node.js kommandon från en kommandotolk högerklickar du på projektnoden och väljer Öppna kommandotolken här.
Lägga till en .vue-fil i projektet
I Solution Explorer högerklickar du på valfri mapp, till exempel mappen src/components , och väljer sedan Lägg till>nytt objekt.
Om du inte ser alla objektmallar väljer du Visa alla mallaroch väljer sedan objektmallen.
Välj antingen JavaScript Vue Single File Component eller TypeScript Vue Single File Component och klicka sedan på Lägg till.
Visual Studio lägger till den nya filen i projektet.
Bygga projektet
Välj sedan Skapa>bygglösning för att skapa projektet.
Kontrollera fönstret Utdata för att se byggresultat och välj Skapa i listan Visa utdata från .
JavaScript-Vue.js-projektmallen (och äldre versioner av TypeScript-mallen) använder build npm-skriptet genom att konfigurera en händelse efter bygget. Om du vill ändra den här inställningen öppnar du projektfilen (<projectname.njsproj>) från Utforskaren och letar upp den här kodraden:
<PostBuildEvent>npm run build</PostBuildEvent>
Starta programmet
Kör programmet genom att trycka på Ctrl+F5 (eller Felsöka > Start utan felsökning).
I konsolen visas ett meddelande Startar utvecklingsserver.
Sedan öppnas appen i en webbläsare.
Om du inte ser appen som körs, uppdatera sidan.
Stäng webbläsaren.
Grattis till att du har slutfört den här snabbstarten! Vi hoppas att du har lärt dig lite om att använda Visual Studio IDE med Vue.js. Om du vill fördjupa dig i dess funktioner kan du fortsätta med en självstudiekurs i avsnittet Självstudier i innehållsförteckningen.