Delen via

Een Vue.js-toepassing maken met behulp van Node.js Tools voor Visual Studio

Visual Studio ondersteunt app-ontwikkeling met het Vue.js framework in JavaScript of TypeScript.

De volgende nieuwe functies ondersteunen Vue.js toepassingsontwikkeling in Visual Studio:

  • Ondersteuning voor script-, stijl- en sjabloonblokken in .vue--bestanden
  • Herkenning van het kenmerk lang op .vue-bestanden
  • Vue.js project- en bestandssjablonen

Voorwaarden

  • U moet Visual Studio 2017 versie 15.8 of een latere versie en de Node.js ontwikkelworkload geïnstalleerd hebben.

    Belangrijk

    Voor dit artikel zijn functies vereist die alleen beschikbaar zijn vanaf Visual Studio 2017 versie 15.8.

    Als er nog geen vereiste versie is geïnstalleerd, installeert u Visual Studio 2019.

    Als u de workload wilt installeren maar visual Studio al hebt, gaat u naar Tools>Hulpprogramma's en onderdelen ophalen..., waarmee het installatieprogramma van Visual Studio wordt geopend. Kies de Node.js ontwikkelwerklast en kies daarna wijzigen.

  • Om het ASP.NET Core-project te maken, moet u de workloads voor ASP.NET en webontwikkeling, evenals de workloads voor .NET Core-platformonafhankelijke ontwikkeling, geïnstalleerd hebben.

  • U moet de Node.js runtime hebben geïnstalleerd.

    Als u deze niet hebt geïnstalleerd, installeert u de LTS-versie vanaf de Node.js website. 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, klikt u met de rechtermuisknop op het projectknooppunt en kiest u Eigenschappen).

Een Vue.js project maken met behulp van Node.js

U kunt de nieuwe Vue.js-sjablonen gebruiken om een nieuw project te maken. Het gebruik van de sjabloon is de eenvoudigste manier om aan de slag te gaan. Voor gedetailleerde stappen, zie Visual Studio gebruiken om uw eerste Vue.js appte maken.

Een Vue.js-project maken met ASP.NET Core en de Vue CLI

Vue.js biedt een officiële CLI voor het snel opzetten van projecten. Als u de CLI wilt gebruiken om uw toepassing te maken, volgt u de stappen in dit artikel om uw ontwikkelomgeving in te stellen.

Belangrijk

Bij deze stappen wordt ervan uitgegaan dat u al ervaring hebt met het Vue.js framework. Zo niet, ga dan naar Vue.js voor meer informatie over het framework.

Een nieuw ASP.NET Core-project maken

In dit voorbeeld gebruikt u een lege ASP.NET Core Application (C#). U kunt echter kiezen uit verschillende projecten en programmeertalen.

Een leeg project maken

  • Open Visual Studio en maak een nieuw project.

    Kies in Visual Studio 2019 Maak een nieuw project in het startvenster. Als het startvenster niet is geopend, kiest u Bestand>Startvenster. Typ web-app, kies C# als taal, kies ASP.NET Core Emptyen kies vervolgens Next. Geef in het volgende scherm de naam van het project client-appen kies vervolgens Volgende.

    Kies het aanbevolen doelframework of .NET 6 en selecteer vervolgens Aanmaken.

    Als u de ASP.NET Core Web Application projectsjabloon niet ziet, moet u de ASP.NET en webontwikkeling installeren workload en de .NET Core ontwikkelworkload eerst. Als u de workload(s) wilt installeren, klikt u op de koppeling Visual Studio Installer openen in het linkerpaneel van het venster Nieuw project (selecteer Bestand>Nieuw>Project). Het installatieprogramma van Visual Studio wordt gestart. Selecteer de vereiste workloads.

Het opstartbestand van het project configureren

  • Open het bestand ./Startup.csen voeg de volgende regels toe aan de methode Configureren:

    app.UseDefaultFiles(); // Enables default file mapping on the web root.
app.UseStaticFiles(); // Marks files on the web root as servable.

De Vue CLI installeren

Als u de vue-cli npm-module wilt installeren, opent u een opdrachtprompt en typt u npm install --g vue-cli of npm install -g @vue/cli voor versie 3.0 (momenteel in de bètaversie).

Een nieuwe clienttoepassing maken met behulp van de Vue CLI

  1. Ga naar de opdrachtprompt en wijzig de huidige map in de hoofdmap van uw project.

  2. Typ vue init webpack client-app en volg de stappen wanneer u wordt gevraagd om aanvullende vragen te beantwoorden.

    Notitie

    Voor .vue bestanden moet u webpack of een vergelijkbaar framework gebruiken met een laadprogramma om de conversie uit te voeren. TypeScript en Visual Studio weten niet hoe ze .vue--bestanden kunnen compileren. Hetzelfde geldt voor bundeling; TypeScript weet niet hoe u ES2015-modules (dat wil zeggen import en export instructies) converteert naar één definitief .js bestand dat in de browser moet worden geladen. Nogmaals, webpack is hier de beste keuze. Als u dit proces vanuit Visual Studio wilt stimuleren met behulp van MSBuild, moet u beginnen met een Visual Studio-sjabloon. Op dit moment is er geen ASP.NET-sjabloon voor Vue.js-ontwikkeling standaard beschikbaar.

Wijzig de webpackconfiguratie om de gemaakte bestanden naar wwwroot uit te voeren

  • Open het bestand ./client-app/config/index.jsen wijzig de build.index en build.assetsRoot in het wwwroot-pad:

    // Template for index.html
index: path.resolve(__dirname, '../../wwwroot/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Geef het project aan om de client-app te bouwen telkens wanneer een build wordt geactiveerd

  1. Ga in Visual Studio naar Project>Properties>Build Events.

  2. Typ in de npm --prefix ./client-app run build.

De namen van de uitvoermodules van webpack configureren

  • Open het bestand ./client-app/build/webpack.base.conf.jsen voeg de volgende eigenschappen toe aan de uitvoereigenschap:

    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'

TypeScript-ondersteuning toevoegen met de Vue CLI

Voor deze stappen is vue-cli 3.0 vereist. Deze is momenteel in bètaversie.

  1. Ga naar de opdrachtprompt en wijzig de huidige map in de hoofdmap van het project.

  2. Typ vue create client-appen kies Selecteer functies handmatig.

  3. Kies TypeScript-en selecteer vervolgens andere gewenste opties.

  4. Volg de resterende stappen en beantwoord de vragen.

Een Vue.js-project configureren voor TypeScript

  1. Open het bestand ./client-app/tsconfig.json en voeg noEmit:true toe aan de compileropties.

    Door deze optie in te stellen, voorkomt u dat uw project rommelig wordt telkens wanneer u in Visual Studio bouwt.

  2. Maak vervolgens een vue.config.js-bestand in ./client-app/ en voeg de volgende code toe.

    module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

    Met de voorgaande code wordt webpack geconfigureerd en wordt de map wwwroot ingesteld.

Bouwen met vue-cli 3.0

Een onbekend probleem met de vue-cli 3.0 kan voorkomen dat het buildproces wordt geautomatiseerd. Telkens wanneer u de wwwroot-map probeert te vernieuwen, moet u de opdracht npm run build uitvoeren in de map client-app.

U kunt het vue-cli 3.0-project ook bouwen als een pre-buildgebeurtenis met behulp van de eigenschappen van het ASP.NET project. Klik met de rechtermuisknop op het project, kies Eigenschappenen voeg de volgende opdrachten toe op het tabblad Build onder het tekstvak pre-build gebeurtenis opdrachtregel.

cd ./client-app
npm run build
cd ../

Beperkingen

  • lang kenmerk ondersteunt alleen JavaScript- en TypeScript-talen. De geaccepteerde waarden zijn: js, jsx, ts en tsx.

  • lang kenmerk werkt niet met sjabloon- of stijltags.

  • Foutopsporing van scriptblokken in .vue bestanden wordt niet ondersteund vanwege de vooraf verwerkte aard.

  • TypeScript herkent .vue--bestanden niet als modules. U hebt een bestand nodig dat code bevat, zoals het volgende om TypeScript te laten weten hoe .vue-bestanden eruitzien (vue-cli 3.0-sjabloon bevat dit bestand al).

    // ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

  • Het uitvoeren van de opdracht npm run build als een pre-buildgebeurtenis op de projecteigenschappen werkt niet wanneer u vue-cli 3.0 gebruikt.

Verwante inhoud

  • Last updated on